Kontaktformular i AMP Blogger

ej bloggere, jeg håber, det går godt for jer alle sammen. I denne artikel lærer vi, hvordan du indsætter en fungerende kontaktformular i AMP Blogger med Google-formularer, AMP-formularer og nogle CSS. Denne tutorial er begyndervenlig, så du slet ikke behøver at bekymre dig om AMP-elementer og CSS.

Jeg fandt masser af artikler, der leverede indirekte metoder som at bruge sider med amp-iframe og indlejring. Du kan endda integrere en Google-formular direkte ved brug af amp-iframe, men du skal bære Google-kreditterne under den og hovedsagelig er den dårligt langsom sammenlignet med vores normale kontaktformular.

DEMO FOR AMP FORM

I denne vejledning bruger vi den samme Google-formular, men uden iframe bruger vi amp-form-elementerne til at skabe en perfekt kontaktformular. Du kan se demoen, før du går til artiklen.

Sådan tilføjes kontaktformular i AMP Blogger

Først og fremmest skal du sørge for, at du har amp-form installeret eller konfigureret i dit AMP-tema, de fleste af dem ville have det, men tjek ellers ville kontaktformularen aldrig fungere.

Denne artikel begrænser sig ikke kun til blogger, du kan bruge denne kode i enhver blog, der understøtter AMP.

Hvis amp-formen ikke er til stede i dit tema indsæt denne kode inde i <head>og </head>tag eller sammen med de tilsvarende amp tags

<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/>

Dette er for at indsætte AMP-formkomponenter og scripts på dit websted.

1. Gå til Google Forms, og klik på skabelonen "Kontaktoplysninger" fra toppen, hvilket gør vores arbejde let.

2. I skabelonen kan du se forskellige blokke for navn, e-mail, adresse osv. Slet alle blokke undtagen navn , e-mail og kommentarer . Du kan vælge hver blok ved blot at klikke på den.

3. Klik derefter på knappen Eksempel i toppen

4. Fra deres højreklik på svarfeltet Navn og vælg Inspicer .

5. Du kan se en fremhævet HTML-kode nedenfor, og i det kan du se et name="entry.xxxxx"felt, der er det ID, vi har brug for senere. Gentag den samme metode for e-mail og kommentarer.

6. Hvis du går op i koden, kan du se et element <form action="Some URL">. Kopier også denne URL

6. Nu har du fået et ID for hvert felt og URL, Udskift disse felter fra nedenstående kode og husk at ID'et skal matche med etiketten. Indsæt det ID, du har kopieret til det tilsvarende arkiverede, og indsæt URL'en i ovenstående felt.

<div class="msgform"> 
<form action-xhr="//docs.google.com/forms/u/0/d/e/xxxxx/formResponse" method="post" target="_top">
    <label>Your Name</label>
    <input name="entry.xxxxx" required="" type="text" />

    <label>Your Email</label>
    <input name="entry.xxxxx" required="" type="email" />

    <label>Message</label>
    <textarea cols="45" name="entry.xxxxx" required="" rows="8"></textarea>
  
    <input type="submit" value="Submit" />
  
    <div class="alert" submitting="">
     Please Wait...
   </div>
    <div class="alert" submit-error="">
     Success!
   </div>
    <div class="alert" submit-success="">
     Oops Please Try Again!
   </div>
  </form>
</div>

7. Indsæt ovenstående HTML-kode på din kontaktside ved at skifte til HTML-tilstand i posteditoren.

8. Indsæt nedenstående CSS inde i <style amp-custom='amp-custom>tagget, og gem temaet.

/* AMP Contact Form by MFK Bloginos */
.msgform input[type=text],input[type=email],textarea{width:100%;padding:12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;margin-top:6px;margin-bottom:16px;resize:vertical}.msgform input[type=submit]{background-color:#297CA4;color:#fff;padding:12px 20px;border:none;border-radius:4px;cursor:pointer}.msgform input[type=submit]:hover{background-color:#222}.alert{background:linear-gradient(to right,#e24747,#f39d9da6);margin:20px 0;padding:0 10px;color:#fff;border-radius:3px;}

9. Hvis du har gjort alt korrekt, skal din kontaktformular fungere fra nu af!

Ændring af kontaktformularen

Du kan tilføje din egen CSS for at ændre formularen og tilføje brugerdefinerede fejl, sende og succesmeddelelser i HTML-koden. For at erstatte kan du blot redigere teksten inde i de tilsvarende tags nedenfor.

Type	Tag
Afsender besked	`<div class="alert" submitting="">`
Succesmeddelelse	`<div class="alert" submit-error="">`
Fejl besked	`<div class="alert" submit-success="">`

Brugerdefinerede meddelelser

Fordele ved AMP-kontaktformular i Blogger

I denne særlige kontaktformular kan du nemt indsamle e-mail-adresse og gemme den i et Excel-ark, der allerede findes i Google-formularerne, og udnytte andre tilføjelsesfunktioner fra Google.

Du kan senere bruge disse e-mails til indholdsmarkedsføring eller andre markedsføringsformål. At skabe en vidunderlig mulighed for at indsamle e-mails, som ikke er tilgængelige i almindelige former.

Det er svært at skelne mellem vores kontaktformular og den oprindelige kontaktformular i bloggeren. Du kan se vores tidligere indlæg, hvor vi har diskuteret de bedste amp blogger-skabeloner .

Konklusion

Jeg håber, at denne artikel på kontaktformularen i AMP Blogger har hjulpet dig med at indsætte en fungerende kontaktformular i din AMP-blog. Hvis du er i tvivl om denne artikel, kan du kommentere nedenfor med dine spørgsmål, og vi er glade for at hjælpe dig.