Cum se creează un formular de contact prietenos cu AMP pentru WordPress

Publicat: 2019-07-04

Doriți să creați un formular de contact prietenos cu AMP? AMP sau Accelerated Mobile Pages este o tehnologie de la Google care vă încarcă rapid paginile web pe dispozitive mobile.

În acest articol, vă vom arăta cum să creați un formular de contact care să se încarce pe paginile dvs. AMP fără nicio problemă. De asemenea, vă vom explica cum să adăugați reCAPTCHA la formularul dvs. de contact AMP pentru a-l proteja de spammeri.

Crearea unui formular de contact prietenos cu AMP în WordPress

AMP (Accelerated Mobile Pages) oferă cea mai bună experiență persoanelor cu o conexiune lentă la internet. Încarcă paginile mai rapid pe dispozitivele mobile și, astfel, vă ajută să îmbunătățiți traficul către site-ul dvs. web.

Cu toate acestea, AMP vine cu o serie de provocări pentru proprietarii de site-uri web.

Una dintre ele este că permite utilizarea limitată a resurselor pentru a încărca paginile mai repede. Astfel, unele funcționalități nu vor funcționa pe paginile dvs. AMP așa cum ar funcționa în mod normal.

Deci, ce se va întâmpla cu formularul de contact de pe site-ul dvs. web? Va funcționa corect?

WPForms este cel mai bun plugin WordPress Form Builder. Ia-l gratuit!

Dacă utilizați pluginul WPForms, acesta va detecta automat dacă formularul se încarcă pe o pagină AMP sau nu. Și apoi, va afișa linkul către versiunea non-AMP a paginii pentru a încărca formularul corect.

Link Formular de contact pe pagina AMP

Cu toate acestea, puteți adăuga și un formular pe pagina dvs. AMP în loc să afișați mesajul de mai sus.

Pentru a face acest lucru, va trebui să utilizați pluginul WPForms Lite și apoi să creați un formular care să fie pe deplin compatibil cu AMP.

Deci, fără alte întrebări, să aruncăm o privire la procesul pas cu pas pentru a crea un formular de contact prietenos cu AMP pentru site-ul dvs. WordPress.

Pasul 1: Instalați pluginul AMP

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul oficial Google AMP pentru WordPress. Acest plugin gratuit este esențial pentru adăugarea de asistență AMP pe site-ul dvs. web.

Plugin oficial AMP pentru WordPress

Puteți consulta ghidul pas cu pas despre cum să instalați un plugin WordPress pentru instrucțiuni detaliate.

Odată activat, acest plugin adaugă automat asistență AMP pe site-ul dvs. Cu toate acestea, puteți face modificări la setări accesând pagina Setări » AMP .

Pentru mai multe detalii, puteți urma ghidul despre cum să configurați corect Google AMP pe site-ul dvs. WordPress.

Pasul 2: Creați un formular WordPress

Este timpul să creați un formular de contact cu ajutorul pluginului WPForms Lite.

Pentru a începe lucrurile, va trebui să instalați și să activați pluginul WPForms Lite. După activare, trebuie să accesați WPForms » Adăugați nou pentru a crea un formular nou.

În pagina Configurare , veți găsi câteva șabloane de formulare implicite. Aceste șabloane vă permit să accelerați procesul de creare a formularului. De asemenea, puteți utiliza șablonul de formular gol pentru a crea un formular de la zero.

Deoarece dorim să creăm un formular de contact, continuați și faceți clic pe șablonul Formular de contact simplu .

Șablon formular simplu de contact

Aceasta vă va duce la pagina Generator de formulare, unde puteți adăuga sau elimina cu ușurință un câmp. De exemplu, dacă doriți să adăugați un câmp de subiect, pur și simplu trageți și fixați câmpul Text cu o singură linie din panoul din stânga în formular.

Și pentru a schimba numele câmpului, trebuie să faceți clic pe câmpul din panoul din dreapta și apoi să modificați eticheta din panoul din stânga.

Personalizarea câmpului formularului de contact prietenos cu AMP

Cea mai bună parte este că veți putea vedea schimbările în direct. Mișto, nu-i așa?

În mod similar, puteți edita celelalte câmpuri de formular așa cum doriți. De asemenea, puteți urma tutorialul nostru pas cu pas despre cum să creați un formular simplu de contact în WordPress.

După ce ați terminat cu partea de personalizare, puteți accesa pagina Setări formular din bara laterală stângă a constructorului de formulare. Aici veți putea modifica setările de notificare și confirmare.

În cele din urmă, trebuie să stocați modificările făcând clic pe butonul Salvare , prezent în colțul din dreapta sus al ecranului.

Setări de formular de contact prietenoase cu AMP

Asta e tot! Nu trebuie să configurați nimic altceva. Pluginul WPForms Lite va adăuga automat compatibilitatea AMP completă la formularul dvs. acum.

În plus, puteți adăuga asistență reCAPTCHA la formularul dvs. de contact AMP pentru a-l proteja de spammeri.

Să vă arătăm cum să o faceți în pasul următor.

Pasul 3: Înregistrați-vă site-ul web pentru a obține chei reCAPTCHA

Pentru a opri spamul formularului de contact, WPForms acceptă 3 tipuri diferite de CAPTCHA pentru formularele dvs.:

  • CAPTCHA personalizat
  • reCAPTCHA
  • hCaptcha

În acest tutorial, ne vom concentra pe reCAPTCHA, un serviciu de filtrare a spamului de la Google. Vă ajută să vă protejați site-ul web de spammeri și roboți automatizați.

Pentru a-l utiliza pe site-ul dvs., va trebui să vă înregistrați site-ul pe site-ul Google reCAPTCHA, astfel încât să puteți obține cheia site-ului și cheia secretă pentru site-ul dvs. web.

Și apoi le puteți folosi pentru a adăuga asistență reCAPTCHA la formularul dvs. de contact prietenos cu AMP.

Așadar, accesați site-ul web Google reCaptcha și apoi faceți clic pe butonul Consolă de administrare , prezent în colțul din dreapta sus al ecranului.

Site-ul Google reCAPTCHA

Google vă va cere acum să vă conectați la contul dvs. După aceea, veți fi redirecționat către tabloul de bord reCAPTCHA.

Dacă ați configurat anterior un reCAPTCHA cu acest cont, atunci va trebui să faceți clic pe pictograma plus (+) pentru a vă înregistra noul site.

Buton de înregistrare pentru a adăuga site-ul dvs.

Cu toate acestea, dacă utilizați acest cont pentru prima dată, atunci veți vedea automat pagina „Înregistrați un site nou” după ce v-ați conectat la contul dvs.

Odată ce sunteți pe pagina respectivă, ar trebui să scrieți orice nume la alegere în câmpul Etichetă pentru referințe viitoare.

Selectați butonul radio reCAPTCHA v3

Apoi, trebuie să selectați tipul de reCAPTCHA pe care doriți să îl utilizați.

Este important să rețineți că reCAPTCHA V2 nu este acceptat de AMP. Așadar, va trebui să selectați „reCAPTCHA V3” pentru a adăuga asistență reCAPTCHA la formularul dvs. de contact prietenos cu AMP.

În câmpul Domeniu , ar trebui să scrieți numele domeniului (fără http: // sau www) al site-ului dvs. web în care doriți să adăugați suport reCAPTCHA. De asemenea, puteți adăuga mai multe domenii sau subdomenii făcând clic pe pictograma plus (+).

În ceea ce privește câmpul Proprietari , adresa dvs. de e-mail va fi prezentă în mod implicit acolo. Cu toate acestea, puteți adăuga o altă adresă de e-mail dacă doriți.

În cele din urmă, bifați caseta de selectare „Acceptați Termenii și condițiile reCAPTCHA” și apoi derulați în josul paginii pentru a face clic pe butonul Trimiteți .

Acceptați termenii reCAPTCHA

Acum veți vedea un mesaj de succes împreună cu cheia de site și cheia secretă a site-ului dvs. web. Trebuie să copiați aceste chei, deoarece va trebui să le utilizați pe site-ul dvs. WordPress.

Copiați site-ul și cheia secretă

Dar înainte de asta, trebuie să faceți un ultim lucru.

Mai întâi, trebuie să faceți clic pe linkul Accesați setări . Apoi, derulați în jos până la partea de jos a paginii și apoi bifați caseta de selectare „Permiteți acestei taste să funcționeze cu paginile AMP”.

Permiteți reCAPTCHA să funcționeze cu pagini AMP

Acest lucru este necesar pentru ca reCAPTCHA v3 să funcționeze pe paginile AMP. După ce ați terminat, trebuie să faceți clic pe butonul Salvare pentru a stoca modificările.

Pasul 4: Adăugați reCAPTCHA la Formularul dvs. de contact

Pentru a începe, va trebui să adăugați cheia de site și cheia secretă la site-ul dvs. web.

Așadar, mergeți la site-ul dvs. WordPress și accesați pagina WPForms » Setări din bara laterală stângă a panoului de administrare WordPress.

Apoi, trebuie să faceți clic pe fila reCAPTCHA pentru a modifica setările.

Pagina de setări WCFTorms reCAPTCHA

Aici, va trebui să selectați „reCAPTCHA v3” ca tip, apoi să lipiți site-ul și cheile secrete în câmpurile respective.

Adăugați site-ul și cheia secretă

După ce ați terminat, trebuie să derulați în jos și să faceți clic pe butonul Salvare setări pentru a stoca modificările.

Este timpul să adăugați reCAPTCHA la formularul de contact prietenos cu AMP.

Pentru a face acest lucru, trebuie să vă îndreptați către WPForms » Toate formularele și apoi să faceți clic pe titlul formularului pentru a-l deschide.

Apoi, accesați pagina Setări » General și apoi bifați opțiunea„ Activați Google v3 reCAPTCHA ”. Și nu uitați să faceți clic pe butonul Salvare pentru a stoca modificările.

Activați formularul de contact Google v3 reCAPTCHA compatibil cu amplificatorul

Gânduri finale

Felicitări! Ați creat cu succes un formular de contact prietenos cu AMP pentru site-ul dvs. WordPress. De asemenea, ați adăugat reCAPTCHA la acest formular pentru a-l proteja de spammeri.

Dacă v-a plăcut acest articol, vă recomandăm să consultați tutorialul nostru pas cu pas despre cum să creați un formular simplu de sondaj în WordPress.

De asemenea, vă rugăm să ne urmați pe Facebook și Twitter pentru a primi actualizări de pe blogul nostru.