Cum să adăugați formulare HTML în WordPress (2 metode)

Doriți să scrieți propriul markup pentru formular în loc să trageți câmpuri într-un constructor vizual?

Vești bune: nu trebuie să scrieți PHP pentru a face acel formular să funcționeze. Puteți lăsa un plugin ușor să se ocupe de procesare, în timp ce dvs. scrieți fiecare etichetă. Alternativ, puteți construi formularul vizual și puteți plasa HTML personalizat exact acolo unde aveți nevoie.

În acest ghid, vă vom arăta cum să creați un formular HTML personalizat care funcționează în WordPress.

Ce sunt formularele HTML și de ce să creezi unul?

Un formular HTML colectează informații de la vizitatori, cum ar fi nume, emailuri și feedback, la fel ca orice alt formular de pe web. Ceea ce îl diferențiază este modul în care este construit. În loc să se bazeze pe un editor vizual drag-and-drop greoi, construiți un formular HTML cu cod simplu. Aceasta înseamnă că dvs. scrieți câmpurile (cum ar fi casete de text, casete de selectare și dropdown-uri) singur.

Persoanele care folosesc formulare HTML peste un constructor de formulare drag-and-drop o fac de obicei pentru a maximiza performanța site-ului lor. Formularele HTML simple mențin paginile web să se încarce puțin mai repede. Dincolo de viteză, scrierea codului însuți îți oferă control total asupra designului. În loc să fii închis în setările rigide ale unui constructor, poți personaliza aspectul exact nevoilor tale.

Majoritatea utilizatorilor WordPress consideră că pluginurile de tip constructor de formulare drag-and-drop oferă cea mai bună experiență de utilizare. Obții personalizare completă HTML fără bătaia de cap a configurării manuale a serverului.

Iată tot ce vom acoperi în acest ghid:

Metoda 1: Adăugarea formularelor HTML în WordPress cu un plugin

🎖️ Cel mai bun pentru: Dezvoltatori și manageri de site care doresc control complet HTML cu o soluție ușoară, axată pe performanță. Pluginul pune accent pe simplitate și viteză în detrimentul constructorilor vizuali de formulare.

Poți adăuga un formular HTML în WordPress folosind un plugin gratuit de formulare precum HTML Forms. Acest plugin gestionează PHP-ul și o mică parte de JavaScript necesară pentru a rula un formular HTML în WordPress, oferindu-ți în același timp libertate totală să scrii singur HTML-ul.

Versiunea gratuită acoperă tot ce este în acest tutorial, inclusiv trimiterea notificărilor prin e-mail și stocarea trimiterilor tale. Protecția împotriva spamului este, de asemenea, gratuită.

Pentru a începe, instalează pluginul pe site-ul tău WordPress. Dacă ai nevoie de ajutor, urmează ghidul nostru pas cu pas despre instalarea unui plugin WordPress.

La activare, accesează HTML Forms » Adaugă Nou pentru a începe crearea formularului tău.

Introdu un nume pentru formularul tău în câmpul „Titlul formularului”. În acest ghid, construim un formular de contact simplu, așa că am numit-o „Formular de contact”.

Apoi, apasă butonul Creare Formular.

După ce faci asta, va apărea pagina „Editare Formular” și poți începe să-ți personalizezi formularul HTML.

În partea de sus a paginii, vei vedea detaliile formularului tău, inclusiv titlul formularului, slugul și shortcode-ul. Sub aceste detalii, vei găsi cinci file: „Câmpuri”, „Mesaje”, „Setări”, „Acțiuni” și „Trimiteri”.

Fila „Câmpuri” conține zece butoane care generează codul câmpului tău.

În partea de jos a acestei file, vei găsi un formular HTML preconstruit, împreună cu o previzualizare.

Formularul implicit este destul de simplu. Are 4 câmpuri pentru ca utilizatorii să-și introducă numele, adresa de e-mail, un subiect scurt și un mesaj.

Pentru a adăuga un câmp nou, apasă butonul corespunzător chiar deasupra casetei „Cod formular”.

Vom înlocui câmpul Subiect cu un câmp de tip dropdown în acest tutorial.

Continuă și apasă „Dropdown” pentru a deschide setările acestuia. Apoi, introdu întrebarea ta în caseta „Etichetă câmp” și adaugă o opțiune pentru fiecare tip de solicitare, cum ar fi „Întrebare generală”, „Vânzări” și „Suport”.

După introducerea acestor informații, apasă „Adaugă Câmp la Formular”.

Vei vedea apoi noua etichetă dropdown apărând în caseta „Cod formular”. Doar derulează în jos pentru a verifica markup-ul actualizat.

Pentru a face formularul ușor de utilizat, să plasăm câmpul de tip dropdown direct sub câmpul „Adresa ta de e-mail”. Deoarece acest plugin nu are un constructor drag-and-drop, va trebui să tăiați codul din constructorul de cod și să-l lipiți acolo unde doriți să-l plasați.

Pentru a elimina câmpul Subiect, ștergeți întregul bloc de paragrafe care conține câmpul Subiect.

Odată ce ați terminat, veți dori să verificați panoul „Previzualizare formular”.

Dacă nu îl puteți vedea, faceți clic pe linkul „Afișați previzualizarea formularului”.

Această previzualizare live vă permite să confirmați că modificările dvs. au funcționat fără a rupe aspectul.

Puteți verifica rapid dacă câmpul Subiect a dispărut și puteți testa dacă noul dvs. dropdown funcționează corect.

Apoi, continuați și faceți clic pe butonul albastru „Salvați modificările”.

Acum, s-ar putea să doriți să verificați configurația formularului. Continuați și faceți clic pe fila „Mesaje” pentru a vedea cum configurează formularele HTML mesajele de confirmare a trimiterii formularului.

Această filă vă permite să personalizați mesajele de confirmare pe care le vor vedea utilizatorii.

Dacă sunteți mulțumit de textul implicit, îl puteți lăsa așa. În caz contrar, faceți editările și apoi faceți clic pe Salvați modificările.

În mod implicit, un formular nou salvează intrările dvs. în baza de date, dar nu vă va trimite un e-mail atunci când cineva îl trimite.

Pentru a remedia acest lucru, faceți clic pe fila Acțiuni. Veți vedea o notificare care spune „Nicio acțiune de formular configurată pentru acest formular.”

Continuați și faceți clic pe „Trimiteți e-mailul”.

Câmpurile „De la”, „Către” și „Mesaj” sunt toate obligatorii. Puteți utiliza câmpurile variabile listate direct sub caseta Mesaj pentru a insera automat informații pe care vizitatorul le-a tastat în formularul dvs.

După ce le-ați completat, faceți clic pe „Salvați modificările”. Acum veți primi un e-mail de fiecare dată când cineva trimite formularul dvs.

Odată ce totul este configurat, tot ce trebuie să faceți este să publicați formularul dvs. HTML. Accesați pagina sau postarea unde doriți să încorporați formularul. Apoi, treceți cu mouse-ul peste zona în care doriți să inserați formularul și faceți clic pe butonul „+”.

De aici, începeți să tastați „HTML Forms” în bara de căutare. Când apare blocul corect, faceți clic pentru a-l adăuga la pagina sau postarea dvs.

În interiorul blocului HTML Forms, faceți clic pe meniul derulant și alegeți formularul pe care doriți să îl afișați.

După ce ați selectat formularul din meniul derulant, faceți clic pe butonul „Actualizați”.

Formularul dvs. de contact este acum live. Iată cum va arăta vizitatorilor dvs.:

Înainte de a promova formularul oriunde, vă recomandăm să îl testați singur, trimițând o intrare eșantion. Acesta este modul în care confirmați că formularul nu doar se afișează, ci și livrează efectiv.

După ce ați trimis o intrare de test, accesați HTML Forms » Toate formularele. Aici, faceți clic pe linkul „Trimiteri” al formularului dvs.

Aceasta arată toate trimiterile formularului dvs. Intrarea dvs. de test va apărea în tabel, iar dvs. ar trebui să primiți și o notificare în inbox.

Tabelul „Trimiteri” se deschide cu o coloană „Marcaj temporal” care vă spune când a fost trimis formularul, urmată de o coloană pentru fiecare câmp.

Metoda 2: Adăugarea de HTML personalizat la formulare cu drag & drop

🎖️ Cel mai bun pentru: Oricine dorește să creeze un formular vizual, dar are totuși nevoie să insereze cod HTML specific, cum ar fi un tooltip, un link sau o notă formatată.

Când vine vorba de crearea formularelor, recomandăm WPForms. Acesta oferă un constructor drag and drop, permițându-vă în același timp să inserați propriul marcaj, astfel încât un link, o notă formatată sau un tooltip să apară exact acolo unde doriți.

Folosim WPForms pe propriile noastre site-uri web pentru formulare de contact, generare de lead-uri, sondaje anuale și multe altele.

WPForms Lite este complet gratuit, dar câmpul HTML utilizat în această metodă este o funcție plătită. Este disponibil pe planul Basic (39,60 $/an) și superioare.

În această metodă, vă vom arăta cum să adăugați fragmente de cod HTML pentru a vă personaliza formularele WordPress folosind WPForms.

Pentru a începe, instalați și activați WPForms.

Odată finalizat, puteți începe să creați formulare și să adăugați HTML personalizat. Pentru acest ghid, vă vom arăta cum să adăugați un tooltip simplu la formularul dvs. de contact.

Pentru a începe, să creăm formularul de contact accesând WPForms » Adăugare Nou.

În panoul de configurare, începeți prin a da un nume formularului dvs.

Acest nume este doar pentru referință internă, deci puteți folosi orice doriți.

Următorul pas este să decideți cum doriți să vă construiți formularul. Cu WPForms, puteți începe de la un șablon predefinit, puteți construi de la zero sau puteți descrie ce aveți nevoie și lăsați constructorul de formulare AI să îl asambleze pentru dvs.

Dacă doriți să utilizați constructorul bazat pe inteligență artificială, introduceți pur și simplu o solicitare simplă. AI-ul va crea apoi formularul pentru dvs. în câteva secunde.

Pentru acest tutorial, vom folosi un șablon preconstruit.

Deoarece există peste 2.100 de șabloane de formulare din care puteți alege, puteți utiliza bara de căutare pentru a le filtra rapid. Pentru a face acest lucru, tastați pur și simplu „Formular de contact” și așteptați finalizarea căutării.

Pentru a examina mai atent un șablon, puteți folosi funcția de previzualizare încorporată. Pur și simplu treceți cu mouse-ul peste orice șablon de formular și faceți clic pe „Vezi demo”.

Odată ce ați găsit formularul de contact perfect pentru nevoile dvs., treceți peste el încă o dată și faceți clic pe „Utilizați șablonul”.

Aceasta va lansa constructorul de formulare. Veți vedea toate instrumentele de personalizare în panoul din stânga și o previzualizare live în dreapta.

Puteți trage elemente din panoul din stânga și le puteți plasa pe previzualizarea live. De asemenea, puteți rearanja elementele din previzualizare folosind drag and drop.

Derulați în jos panoul din stânga până la grupul Câmpuri Fancy, apoi trageți și plasați câmpul HTML direct pe formularul dvs.

După adăugarea câmpului HTML, faceți clic pe el pentru a deschide opțiunile sale de personalizare.

Pentru a începe, introduceți o „Etichetă” pentru a vă ajuta să identificați acest câmp. Acesta este doar pentru referința dvs. și nu este afișat vizitatorilor, deci puteți folosi orice doriți. Puteți, de asemenea, să lăsați câmpul gol.

Apoi, veți insera codul HTML personalizat în câmpul „Cod”.

Pentru a crea un tooltip, puteți utiliza eticheta <span> sau pur și simplu copiați următorul cod și lipiți-l în câmpul „Cod”:

<span title="We have cool stuff to share every week. :)">Hi there! We have an email newsletter you might want to subscribe to. Let us know in the Comment or Message field, and we'll sign you up.</span>

Acesta este doar un exemplu de cod, așa că nu ezitați să-l editați pentru a se potrivi nevoilor dvs. Partea title="" din cod este exact ceea ce îi spune browserului web să creeze efectul pop-up la trecerea cu mouse-ul, astfel încât să obțineți tooltip-ul fără a adăuga CSS pe site-ul dvs.

Rețineți că WPForms nu afișează codul HTML în previzualizarea constructorului de formulare. Pentru a testa tooltip-ul, faceți clic pe „Previzualizare”.

Aceasta va deschide o nouă filă.

Aici, puteți testa că fragmentul de cod HTML pentru tooltip-ul dvs. funcționează corect, trecând cu mouse-ul peste text. După câteva momente, tooltip-ul ar trebui să apară.

Când ești mulțumit de rezultate, te poți întoarce la constructorul de formulare pentru a-ți finaliza formularul.

WPForms configurează automat setările de notificare și confirmare pentru tine. Cu toate acestea, dacă dorești să le personalizezi, selectează „Setări” și apoi fie „Notificări”, fie „Confirmări”.

În secțiunea „Notificări”, puteți adăuga mai mulți destinatari pentru trimiterea formularului de contact.

Pentru a adăuga mai mulți destinatari, separă adresele de e-mail cu virgule, cum ar fi email1@exemplu.com, email2@exemplu.com, email3@exemplu.com.

După ce ți-ai personalizat notificările și alte setări, este timpul să publici și să încorporezi formularul WordPress.

Continuă și apasă butonul „Încorporează” din colțul din dreapta sus al constructorului de formulare.

WPForms te va întreba apoi dacă dorești să adaugi formularul la o pagină existentă sau la o pagină nouă.

În acest ghid, vom alege „Selectează Pagina Existentă”.

În următoarea fereastră pop-up, alege o pagină din lista de pagini disponibile. După aceea, poți apăsa „Să mergem!” pentru a deschide editorul de blocuri.

Acum, plasează cursorul peste zona unde dorești să adaugi formularul și apasă butonul „+”. Apoi, continuă și selectează blocul WPForms.

Poți alege acum formularul pe care dorești să îl afișezi, folosind meniul derulant.

După selectarea formularului tău, WPForms îl va încărca în editorul de blocuri.

Când ești mulțumit de modul în care totul este configurat, apasă butonul „Actualizează”.

Și gata! Ați adăugat HTML personalizat la formularul de contact WPForms și l-ați făcut live pe site-ul dvs. WordPress.

Înainte de a trimite vizitatori reali la formular, recomandăm să trimiți o intrare de test rapidă pentru a te asigura că totul funcționează.

După trimiterea unui test, mergi la WPForms » Toate Formularele. Aici, plasează cursorul peste formularul tău de contact și apasă „Intrări” când apare.

Pe ecranul următor, vei vedea toate trimiterile formularului tău.

Tabelul afișează fiecare informație pe care utilizatorii au trimis-o, împreună cu ora exactă a trimiterii.

Întrebări frecvente: Cum să adaugi formulare HTML în WordPress

De ce formularul meu HTML nu funcționează pe WordPress?

Cel mai probabil, WordPress afișează formularul tău, dar nu îl procesează. Pur și simplu lipirea unui formular HTML într-o pagină nu este suficientă pentru a-l face să funcționeze.

Deși formularul poate fi afișat corect, WordPress nu procesează automat trimiterile de formulare. Spre deosebire de un site HTML de bază, nu există un script încorporat pentru a gestiona datele atunci când cineva face clic pe Trimite.

Pentru a face formularul funcțional, va trebui să adăugați cod PHP personalizat pentru a procesa trimiterile sau să utilizați un plugin care se ocupă de acest lucru pentru dvs.

Pot să-mi personalizez formularele dacă folosesc HTML?

Da, absolut. Utilizarea HTML îți oferă control complet asupra modului în care formularul tău arată și funcționează. Doar ține cont că vei fi responsabil și pentru tot restul, cum ar fi:

• Stilizarea formularului cu propriul dvs. CSS
• Adăugarea de validare, mesaje de eroare sau logică condițională cu cod personalizat
• Asigurarea că formularul funcționează corect pe diferite dispozitive și browsere

Deci, da, aveți flexibilitate completă, dar și responsabilitate completă.

Resurse suplimentare: Mai multe ghiduri despre formulare WordPress

Sperăm că acest articol v-a ajutat să învățați cum să adăugați formulare HTML în WordPress. În continuare, ați putea dori să consultați ghidurile noastre despre:

• Cum să exportați intrările formularului WordPress în CSV și Excel
• Cum să personalizați și să stilizați formularele dvs. WordPress
• Cele mai bune pluginuri pentru formulare de contact WordPress

Dacă v-a plăcut acest articol, atunci vă rugăm să vă abonați la Canalul nostru de YouTube pentru tutoriale video despre WordPress. Ne puteți găsi, de asemenea, pe Twitter și Facebook.