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.

Dacă ați decis să folosiți AMP pentru a accelera site-ul dvs., aveți nevoie de o soluție pentru formularele dvs. Am găsit o abordare simplă pe care oricine o poate folosi pentru a crea formulare compatibile cu 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 web 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:

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

Atât versiunea Lite, cât și cea Pro a WPForms vă permit să creați un formular de contact de bază, pregătit pentru AMP. Dar 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.

Pentru a începe, puteți vizita site-ul WPForms și crea un cont. Apoi, faceți clic pe butonul „Get WPForms Now”, selectați un plan și finalizați procesul de înregistrare.

După ce v-ați înregistrat, veți fi direcționat către tabloul de bord al contului dvs. WPForms. De acolo, puteți descărca fișierul plugin-ului și copia cheia de licență — veți avea nevoie de ambele în pașii următori.

Acum este momentul să adăugați WPForms pe site-ul dvs. Din zona de administrare WordPress, accesați Pluginuri » Adăugare Plugin Nou.

Pe ecranul următor, căutați „WPForms”.

Când vedeți WPForms în rezultate, faceți clic pe „Instalare Acum” și apoi pe „Activare”.

Dacă aveți nevoie de ajutor suplimentar cu acest pas, consultați ghidul nostru despre cum să instalați un plugin WordPress.

După activare, accesați WPForms » Setări în tabloul de bord.

Introduceți cheia de licență în câmpul „Cheie de licență” și faceți clic pe „Verificare Cheie” pentru a vă conecta contul.

Odată ce acest lucru este gata, WPForms este instalat, activat și gata de utilizare pe site-ul dvs.

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 din panoul „Pluginuri” din zona de administrare.

Pentru 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.

Dacă sunteți începător, recomandăm alegerea Modului Cititor (numit uneori Clasic). Acest lucru asigură că site-ul dvs. principal de pe desktop rămâne exact la fel, în timp ce vizitatorii de pe mobil primesc versiunea AMP super-rapidă.

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. Dacă utilizați Modul Cititor, puteți deschide pagina în browserul dvs. desktop pentru a o testa adăugând /amp/ sau /?amp la sfârșitul URL-ului paginii, astfel:

https://www.example.com/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”.

Apoi, trebuie să introduceți numele site-ului dvs. în câmpul Etichetă. Paginile Google AMP nu pot gestiona caseta de selectare standard „Nu sunt un robot” (v2). Prin urmare, trebuie să utilizați reCAPTCHA v3, care funcționează invizibil în fundal.

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.

Întrebări frecvente: Crearea formularelor AMP în WordPress

Înainte de a încheia, iată răspunsuri rapide la câteva întrebări frecvente despre AMP și utilizarea acestuia cu formularele WordPress.

Ce este AMP în WordPress?

AMP (Accelerated Mobile Pages) este un cadru care ajută paginile dvs. să se încarce mai rapid pe dispozitivele mobile, utilizând o versiune simplificată de HTML și JavaScript. În WordPress, AMP înseamnă, de obicei, crearea unei versiuni ușoare a paginilor dvs., optimizată pentru viteză pe telefoane și tablete.

Este AMP încă relevant?

Pentru majoritatea site-urilor web, AMP nu mai este necesar. Google prioritizează acum Core Web Vitals, pe care le puteți îmbunătăți folosind o temă rapidă și responsivă și un plugin de caching bun. Cu toate acestea, editorii de știri și site-urile mari de media pot beneficia în continuare de AMP.

Cum să creezi pagini AMP în WordPress?

Cea mai ușoară metodă este să folosești un plugin AMP. Acesta poate genera automat versiuni AMP ale paginilor și postărilor tale. După instalarea unuia, poți alege ce conținut ar trebui să aibă o versiune AMP și să ajustezi setările de bază din tabloul de bord WordPress.

Care sunt dezavantajele AMP?

Ai mai puțin control asupra designului, unele pluginuri și scripturi nu vor funcționa, iar funcționalitățile avansate (cum ar fi anumite animații, instrumente de urmărire sau JavaScript personalizat) pot fi restricționate. Acest lucru poate face ca site-ul tău să se simtă mai limitat în comparație cu o pagină WordPress normală.

Mai multe ghiduri despre utilizarea formularelor WordPress

Sperăm că acest articol te-a ajutat să înveți cum să creezi ușor formulare AMP în WordPress. În continuare, s-ar putea să vrei să vezi și ghidurile noastre despre:

• Cum să personalizați și să stilizați formularele dvs. WordPress
• Cum să folosiți formularele de contact pentru a vă crește lista de e-mailuri în WordPress
• Cum să creezi formulare conforme cu GDPR în WordPress
• Ghidul complet pentru utilizarea formularelor WordPress
• Cele mai bune constructoare de formulare online (alegeri ale experților)

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.