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

Aveți un formular HTML gata de utilizare, dar adăugarea lui în WordPress se transformă în încercări și erori.

Motivul este simplu: WordPress nu gestionează formularele în același mod în care o face un site web HTML obișnuit. Dacă doar copiați și lipiți codul formularului, acesta adesea nu va funcționa corect fără câțiva pași suplimentari.

Pe propriile noastre site-uri, folosim pluginul WPForms deoarece se ocupă de toată configurarea pentru noi. Acestea fiind spuse, știm că mulți utilizatori preferă să folosească formulare HTML personalizate pentru a menține lucrurile ușoare, a păstra controlul complet asupra codului lor sau pentru a evita adăugarea unui alt plugin.

În acest ghid, vă vom arăta 2 moduri ușoare de a adăuga formulare HTML în WordPress, astfel încât formularul dvs. să apară corect, să funcționeze așa cum este așteptat și să nu vă strice site-ul. 💡

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

Formularele HTML funcționează în mare măsură la fel ca alte formulare de pe site. Ele permit vizitatorilor să introducă și să trimită informații precum nume, adrese de e-mail, feedback, comenzi și multe altele.

Ceea ce le diferențiază este că formularele HTML sunt create folosind cod, în loc de un editor vizual drag-and-drop, cum ar fi un plugin de formulare. Acest lucru înseamnă că trebuie să definiți singur câmpuri precum casete de text, casete de selectare, butoane radio și meniuri derulante.

Iată câteva avantaje ale creării formularelor de la zero folosind HTML:

• Performanță optimizată. Formularele HTML tind să se încarce mai rapid și să folosească mai puțină memorie, deoarece codul este ușor.
• Control. Veți avea control complet asupra designului și funcționalității formularului, deoarece nu sunteți limitat de caracteristicile unui constructor de formulare.
• Personalizare. Formularele HTML pot fi adaptate exact nevoilor dvs., oferind o personalizare a formularelor mai flexibilă.

Deși crearea formularelor HTML de la zero este o modalitate excelentă de a învăța și practica codarea, aceasta are propriile provocări.

S-ar putea să aveți probleme cu compatibilitatea între browsere, unde formularul funcționează diferit pe diferite browsere web.

De asemenea, pe baza experienței noastre, gestionarea validării formularelor cu JavaScript poate fi dificilă. Necesită testare amănunțită pentru a vă asigura că puteți colecta și procesa corect toate intrările utilizatorilor.

Acestea fiind spuse, există modalități de a adăuga formulare HTML fără aceste complexități. Deci, indiferent dacă gestionați un blog WordPress, un site de afaceri sau un magazin online, puteți adăuga cu ușurință formulare HTML pe site-ul dvs. fără a fi nevoie să codificați de la zero.

În secțiunile următoare, vă vom arăta cum să adăugați formulare HTML în WordPress. Iată o prezentare generală rapidă a celor 2 metode pe care le vom acoperi în acest ghid:

Gata? Să începem.

Metoda 1: Adăugarea formularelor HTML în WordPress folosind pluginul HTML Forms (Ușor)

O modalitate ușoară de a adăuga un formular HTML la un site web WordPress este să utilizați un plugin gratuit pentru formulare, cum ar fi HTML Forms. Este un instrument excelent pentru crearea și configurarea formularelor HTML într-un singur loc, astfel încât să nu fie nevoie să vă ocupați de nicio configurare pe partea de server.

În acest ghid, vom folosi versiunea gratuită a pluginului, care include tot ce aveți nevoie pentru a crea un formular HTML de bază.

Pentru a începe, să ne asigurăm că aveți pluginul instalat pe site-ul dvs. WordPress. Dacă aveți nevoie de ajutor, puteți urma ghidul nostru pas cu pas despre instalarea unui plugin WordPress.

După activare, puteți naviga la Formulare HTML » Adăugare nou în tabloul de bord de administrare WordPress pentru a începe crearea formularului dvs. de contact.

Acest lucru te va redirecționa către pagina „Adaugă formular nou”.

De aici, primul lucru pe care va trebui să îl faceți este să denumiți formularul tastând numele în câmpul „Titlul formularului”. De exemplu, noi am numit formularul nostru „Înscriere la Newsletter”.

Apoi, continuați și faceți clic pe butonul „Creare formular” de sub câmp.

Odată ce ați făcut acest lucru, va apărea pagina „Editare formular” și puteți începe să personalizați formularul dvs. de contact HTML.

În partea de sus a paginii, veți vedea detaliile formularului dvs., inclusiv titlul formularului, slug și shortcode. Nu trebuie să memorați aceste detalii, deoarece vor fi disponibile în tabloul de bord HTML Forms atunci când aveți nevoie de ele.

Sub detaliile acestea, veți găsi filele meniului. În fila „Câmpuri”, puteți vedea diverse butoane de câmp, cum ar fi „Text”, „Date”, „Bife” și „Butoane radio”, pentru a le adăuga la formularele dvs.

Acum, derulați puțin mai jos.

În partea de jos a acestei file, veți găsi un formular HTML preconstruit, împreună cu previzualizarea.

Acest formular de contact 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.

Acum, să spunem că doriți să adăugați un nou câmp cu un abonament la un newsletter prin e-mail. Apoi, pur și simplu faceți clic pe unul dintre butoanele de câmp deasupra „Cod formular”.

De exemplu, vom folosi un câmp de tip dropdown și vom crea o opțiune „Da/Nu” pentru abonarea la newsletter.

De aici, veți dori să faceți clic pe „Dropdown” (Listă derulantă), iar aceasta va deschide opțiunile de configurare ale câmpului derulant. Puteți începe să completați detaliile, care includ eticheta câmpului și alegerile.

După introducerea detaliilor, puteți face clic pe „Add Field to Form” (Adaugă câmp la formular).

Apoi, ar trebui să vedeți eticheta câmpului derulant în secțiunea „Cod formular”. Pur și simplu derulați în jos fila pentru a o verifica.

Următorul pas este reorganizarea formularului de contact.

Pentru a menține un flux bun, veți dori ca câmpul derulant să fie chiar sub câmpul „Email”.

Deoarece acest plugin nu are un constructor drag-and-drop, va trebui să mutați codul manual. Continuați și tăiați codul câmpului dropdown (de la tag-ul de deschidere la tag-ul de închidere
tag).

Apoi, pur și simplu lipiți acel fragment de cod chiar după tag-ul de închidere al câmpului „Email”.

Câmpul implicit „Subiect” s-ar putea să nu fie necesar pentru un formular de înscriere la newsletter. Prin urmare, recomandăm eliminarea câmpului.

Puteți face acest lucru ștergând eticheta sa de la primul <p> la ultimul </p>.

După mutarea și ștergerea etichetelor, veți dori să derulați în jos fila până la secțiunea „Form Preview” (Previzualizare formular).

În această secțiune, poți verifica dacă ai mutat și șters cu succes câmpurile fără a strica nimic. Poți verifica, de asemenea, dacă meniul derulant funcționează corect.

Când sunteți mulțumit de rezultate, faceți clic pe butonul albastru „Salvează modificările” din secțiunea „Cod formular”.

Odată ce procesul de salvare este finalizat, ar trebui să vedeți o notificare „Formular actualizat.” în partea de sus a acestei pagini.

Acum, ați putea dori să verificați configurația formularului. Să trecem la fila „Mesaje” pentru a vedea cum configurează HTML Forms mesajele de confirmare a trimiterii formularului.

Pur și simplu faceți clic pe „Mesaje” pentru a deschide fila.

Această filă vă permite să editați textul predefinit pentru situațiile în care trimiterea formularului de către un utilizator este reușită și altele similare.

Dacă totul arată bine pentru dvs., atunci îl puteți lăsa așa. Dacă faceți modificări, nu uitați să faceți clic pe butonul „Salvează modificările” pentru a nu vă pierde progresul.

Apoi, să mergem la fila „Setări”.

Implicit, HTML Forms va seta „Da” pentru a salva fiecare trimitere de formular și „Nu” pentru a ascunde formularul după o trimitere reușită. Puteți personaliza acest lucru după cum este necesar.

Apoi, în câmpul „Redirect to URL After Successful Sign-Ups” (Redirecționează către URL după înscrieri reușite), puteți copia și lipi URL-ul unei pagini web live de pe site-ul dvs. WordPress. Sau, introduceți 0 în câmp pentru a menține utilizatorii pe pagină după o trimitere reușită a formularului.

Când totul este setat, tot ce mai rămâne de făcut este să adăugați formularul HTML la o pagină WordPress.

Să mergem la Postări sau Pagină » Toate Postările sau Toate Paginile din tabloul de bord WordPress.

Pentru acest ghid, vom adăuga formularul HTML la pagina noastră „Contact”.

Apoi, vom plasa cursorul deasupra paginii „Contact” din listă și vom apăsa „Edit” (Editare) când apare.

Aceasta va lansa editorul de blocuri al paginii „Contact”.

În editor, puteți începe să alegeți o zonă unde să adăugați formularul. Apoi, pur și simplu treceți cursorul peste el și faceți clic pe butonul „+” pentru a adăuga blocul Formulare HTML.

Acum, poți tasta „Formulare HTML” în bara de căutare pentru a găsi rapid blocul. Odată ce ai rezultatul căutării, fă clic pe el.

Veți vedea apoi un meniu derulant în blocul „Formulare HTML”. Pur și simplu extindeți-l și selectați formularul pe care doriți să îl afișați. Aici, selectăm formularul „Înscriere la newsletter” pe care tocmai l-am creat.

Formularul va apărea atunci când publicați conținutul. Deci, odată ce ați selectat formularul din meniul derulant, puteți face clic pe butonul „Actualizare”.

Formularul dvs. este acum live, iar utilizatorii se pot abona la newsletter-ul dvs. Iată cum ar putea arăta pe site-ul dvs.:

Pentru a vedea trimiterile formularelor, puteți mai întâi să accesați Formulare HTML » Toate formularele. Acest lucru vă va duce la lista tuturor formularelor dvs. HTML.

Apoi, pur și simplu plasează cursorul deasupra unui formular și apasă butonul „Submissions” (Trimiteri) când apare.

De aici, puteți vedea toate trimiterile formularului dvs.

Tabelul „Trimiteri” detaliază toate informațiile pe care utilizatorii le-au completat în formularul dvs. Apoi, există coloana „Timestamp”, care vă spune când au trimis formularul.

De exemplu, aici, prima trimitere a fost făcută de „User 1”.

Din tabel, putem vedea că utilizatorul a trimis formularul pe 25 iunie, în jurul orei 13:00. De asemenea, „Utilizatorul 1” a răspuns „Poate mai târziu” la întrebarea „Doriți să vă abonați la newsletter-ul nostru?”. Deci, în acest caz, nu ar trebui să adăugați adresa lor de e-mail în lista dvs. de corespondență.

Metoda 2: Adăugarea de HTML personalizat la formularele WordPress cu WPForms

O altă abordare este să folosiți un constructor vizual de formulare de contact. Aceasta este cea mai bună opțiune dacă doriți să construiți formularul vizual, dar trebuie să inserați elemente HTML specifice, cum ar fi un link, un format de text sau un tooltip, folosind cod.

De exemplu, ați putea folosi HTML personalizat pentru a afișa un scurt mesaj de avertizare pe un formular de checkout, cu un link către pagina dvs. „Politica de rambursare și returnare”. Sau puteți adăuga o bară de progres pentru a informa utilizatorii cât de aproape sunt de completarea formularului. HTML-ul personalizat vă poate permite chiar să inserați emoji-uri sau să adăugați un tooltip.

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

Pe site-ul nostru WPBeginner, îl folosim pentru formulare de contact, sondaje anuale și solicitări de migrare a site-ului. Obțineți mai multe informații despre acest plugin pe recenzia noastră detaliată despre WPForms.

WPForms vine cu extensii cuprinzătoare cu un singur clic și integrări cu terți. De exemplu, puteți instala extensia Form Abandonment pentru a urmări și reduce problemele de abandonare a formularelor și multe altele!

Deci, WPForms face extinderea funcționalității formularului dvs. mai ușoară decât dacă ați fi codat manual formularul WordPress de la zero.

Înainte de a începe, să ne asigurăm că aveți WPForms instalat și activat pe site-ul dvs. WordPress. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.

La activare, puteți naviga la WPForms » Setări pentru a introduce codul licenței. După introducerea cheii, faceți clic pe butonul „Verifică cheia” pentru a începe verificarea.

Odată terminat, puteți începe să creați formularul ș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.

Un tooltip este ca o mică fereastră pop-up care apare atunci când plasați cursorul mouse-ului peste un element web. Este util, deoarece permite utilizatorilor să afle mai multe despre un element web specific, fără a da clic sau a părăsi pagina pe care se află.

Dar mai întâi, să creăm formularul de contact. Pur și simplu accesați WPForms » Adăugare nou din zona de administrare WordPress pentru a începe.

Aceasta va deschide panoul „Configurare”, unde va trebui mai întâi să denumiți formularul. Acest nume este doar pentru referință internă, deci puteți folosi orice doriți.

Următorul pas este să selectați cum doriți să construiți formularul.

Cu WPForms, puteți crea formulare utilizând constructorul de formulare AI, un șablon predefinit sau de la zero.

Dacă doriți să utilizați constructorul bazat pe AI, atunci tot ce trebuie să faceți este să introduceți o solicitare simplă. AI-ul va crea apoi formularul pentru dvs. în câteva secunde.

Pentru acest tutorial, însă, vom folosi un șablon preconstruit.

Deoarece există peste 2.000 de șabloane de formulare din care puteți alege, puteți folosi 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.

Dacă doriți să explorați fiecare rezultat al căutării pentru a vedea cum arată formularul, atunci puteți profita de funcția de previzualizare. Pur și simplu treceți cu mouse-ul peste șablonul formularului și faceți clic pe „View 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.

Acum, toate instrumentele de personalizare se află în panoul din stânga, iar previzualizarea live a formularului este în partea dreaptă a ecranului.

Pe această pagină, puteți folosi funcția de glisare și fixare pentru a adăuga elemente din panoul din stânga în previzualizarea live. Puteți folosi, de asemenea, funcția pentru a muta câmpurile în previzualizarea live.

Să încercăm să adăugăm câmpul HTML în formular. Tot ce trebuie să faci este să derulezi în jos panoul din stânga și apoi să tragi și să plasezi „HTML” pe formular.

După inserarea câmpului HTML, poți face clic pe el pentru a deschide opțiunile de personalizare. Aici, primul lucru de făcut este să completezi „Eticheta” câmpului. Poți, de asemenea, să o lași goală.

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

Pentru a crea un tooltip, puteți folosi tag-ul <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 cod de exemplu, deci nu ezitați să editați textul pentru a se potrivi nevoilor dvs.

Reține că WPForms nu afișează codul HTML în previzualizarea constructorului de formulare. Pentru a previzualiza câmpul și a te asigura că totul este corect, poți salva mai întâi modificările și apoi să apeși „Preview” (Previzualizare).

Acest lucru vă va duce la o nouă filă.

Acum, să testăm dacă fragmentul de cod HTML pentru tooltip-ul tău funcționează corect. Pur și simplu plutește cu mouse-ul peste text și așteaptă ca tooltip-ul să apară timp de câteva secunde.

Când sunteți mulțumit de rezultat, puteți reveni la constructorul de formulare pentru a finaliza formularul.

Notificarea formularului și setările de confirmare sunt deja configurate în WPForms. Cu toate acestea, dacă doriți să le personalizați, accesați „Setări” și apoi „Notificări” sau „Confirmări”.

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

Veți vedea o scurtă instrucțiune dacă treceți cu mouse-ul peste butonul cu semnul întrebării de lângă câmpul „Trimite la adresa de e-mail”. Va trebui să o urmați pentru a vă asigura că notificarea este trimisă la adresele de e-mail corecte.

Puteți edita, de asemenea, textul predefinit pentru linia de subiect a e-mailului dvs.

De exemplu, noi am schimbat al nostru din „Înregistrare nouă: Formular de contact” în „Aveți un mesaj: Contact nou”.

După ce ați personalizat notificările, veți dori să treceți la panoul „Confirmare”.

Implicit, WPForms setează tipul de confirmare la „Mesaj” și are copia pre-făcută gata pentru dvs. Puteți schimba cu siguranță aceste setări dacă doriți.

Pe lângă afișarea unui mesaj de confirmare, puteți redirecționa utilizatorii către o pagină nouă sau un URL specific.

Odată ce totul este configurat, este timpul să publicați și să încorporați formularul WordPress.

Continuați și faceți clic pe butonul „Embed” (Încorporare) pentru a începe publicarea. WPForms vă va întreba apoi dacă doriți să adăugați formularul la o pagină existentă sau la una nouă. În acest ghid, vom alege „Select Existing Page” (Selectați pagina existentă).

În fereastra pop-up următoare, veți alege o pagină din lista de pagini disponibile. După aceea, puteți face clic pe „Să mergem!” pentru a accesa editorul de blocuri al paginii.

Acum, poți pluti cu mouse-ul peste zona unde dorești să plasezi formularul și să dai clic pe butonul „+”. Continuă și selectează blocul WPForms.

Apoi, poți alege un formular din meniul derulant al blocului WPForms.

Odată ce ați selectat un formular, WPForms îl va încărca în zona de conținut selectată. Dacă doriți să afișați titlul formularului, puteți accesa fila „Bloc” din panoul din dreapta și puteți activa glisorul „Afișare titlu”.

Când ești mulțumit de tot, apasă butonul „Update” (Actualizare).

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

Acum, utilizatorii pot începe să completeze formularul și, posibil, să se aboneze la newsletterul tău prin e-mail.

Pentru a vedea toate trimiterile de formulare WPForms, navigați la WPForms » Toate formularele.

Apoi, puteți trece cu mouse-ul peste „Formular de contact” sau orice formular din listă și faceți clic pe „Intrări” atunci când apare butonul.

Pe ecranul următor, ar trebui să puteți vedea toate trimiterile formularului dvs.

Tabelul detaliază toate informațiile pe care utilizatorii le-au trimis cu formularul, precum și ora trimiterii.

De exemplu, pe 2 iulie, în jurul orei 8 dimineața, „Utilizator 3” a spus că dorește să se aboneze la newsletter-ul prin e-mail și a lăsat o întrebare despre cum să contacteze echipa noastră de suport clienți.

Putem vedea, de asemenea, coloana „Acțiuni”. În această coloană, există mai multe butoane: „Vizualizare”, „Editare”, „Spam” și „Coș de gunoi”.

Dacă faceți clic pe „Vizualizare”, WPForms vă va direcționa către pagina dedicată de prezentare generală a unei înregistrări. Pe această pagină, pluginul vă încurajează să activați două add-on-uri.

Prima este add-on-ul Geolocation pentru urmărirea de unde utilizatorul trimite formularul. A doua este add-on-ul User Journey, care vă poate ajuta să analizați parcursul utilizatorului pe site-ul dvs. până când acesta apasă butonul „Trimite”.

Recomandăm instalarea și activarea acestor add-on-uri pentru o performanță mai optimizată a formularelor.

Butoanele „Spam” și „Trash” sunt utile pentru marcarea trimiterilor false și eliminarea lor din intrările dvs. Pentru a afla mai multe despre reducerea trimiterilor false de formulare, puteți citi ghidul nostru despre cum să blocați spam-ul formularelor de contact.

Sfat bonus: Încărcarea unei pagini HTML personalizate în WordPress

De asemenea, s-ar putea să căutați o modalitate de a încărca o pagină HTML personalizată pe site-ul dvs. WordPress. Acest lucru poate fi util dacă aveți un șablon static pe care doriți să îl utilizați sau o pagină HTML dintr-un site web vechi.

Ca regulă generală, puteți încărca o singură pagină HTML fără fișiere CSS sau imagini separate direct.

Dar, dacă pagina pe care doriți să o încărcați include fișiere CSS și imagini separate, atunci va trebui să le încărcați într-un folder, păstrând aceeași structură de directoare utilizată în fișierul dvs. HTML.

AIOSEO, cel mai bun plugin SEO pentru WordPress, poate ajuta motoarele de căutare să găsească pagina dvs. HTML personalizată, adăugând-o la hărțile dvs. XML de site.

Pentru a afla mai multe, consultă ghidul nostru pentru începători despre cum să încarci o pagină HTML în WordPress fără erori 404.

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

Am răspuns la câteva întrebări frecvente pentru a vă ajuta să adăugați formulare HTML în WordPress cu ușurință.

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

Aceasta este o problemă comună. În WordPress, simpla lipire a unui formular HTML de obicei 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.

Cum mă pot asigura că trimiterile formularului meu sunt procesate?

Cea mai ușoară opțiune este să utilizați un plugin pentru formulare de contact precum WPForms sau Formidable Forms. Aceste pluginuri se ocupă de tot în culise, inclusiv de salvarea intrărilor, trimiterea notificărilor prin e-mail și blocarea spam-ului, astfel încât să nu fie nevoie să configurați totul singur.

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

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

• Stilarea 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ă creați un formular de RSVP în WordPress
• Cum să creezi un formular de rezervare online în WordPress
• Cum să creezi un formular WordPress cu un selector de dată
• Cum să creați formulare multilingve în WordPress
• Cum să creați formulare conversaționale în WordPress
• Cum să stilizați și să personalizați formularele dvs. WordPress
• Cum să exportați intrările formularului WordPress în CSV și Excel
• Ghidul complet pentru utilizarea formularelor WordPress

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.