Cum să personalizați și să stilizați formularele dvs. WordPress (2 metode ușoare)

Un formular WordPress simplu și greoi poate face ca chiar și cel mai bine conceput site web să pară neterminat și să arate complet deplasat.

Partea cea mai rea? Vizitatorii s-ar putea simți nesiguri cu privire la completarea acestuia dacă nu se potrivește cu restul site-ului dvs.

Pe parcursul experienței noastre de gestionare a unui blog WordPress, am învățat că formularele bine concepute și personalizate pot face o mare diferență.

De fapt, atunci când am potrivit formularele noastre cu culorile și aspectul site-ului nostru, am observat o creștere uriașă a trimiterilor de formulare.

În acest ghid, vă vom arăta două modalități simple, dar puternice, de a vă personaliza și stiliza formularele WordPress, astfel încât acestea nu numai să arate grozav, ci și să funcționeze mai bine. 🚀

De ce să personalizați și să stilizați formularele dvs. WordPress?

Personalizarea formularelor dvs. WordPress le ajută să se potrivească cu marca dvs., ceea ce construiește încredere și poate crește semnificativ ratele de conversie ale formularelor dvs. Prin stilizarea formularelor dvs., le faceți mai atrăgătoare vizual și mai ușor de navigat pentru vizitatorii dvs.

De exemplu, dacă adăugați un formular de înregistrare pe site-ul dvs. folosind un plugin pentru formulare de înregistrare a utilizatorilor, veți observa că aspectul său este puțin plictisitor. Acest lucru poate să nu capteze atenția vizitatorului dvs. și chiar să-l descurajeze să completeze formularul.

Personalizarea formularelor le poate face mai atractive, potrivindu-le cu tema și brandingul tău WordPress.

Acest lucru poate duce la mai multe conversii, deoarece formularele WordPress stilizate WordPress forms sunt mai ușor de navigat și pot încuraja mai mulți utilizatori să le completeze.

Formele stilizate pot, de asemenea, să vă sporească recunoașterea mărcii în rândul utilizatorilor. De exemplu, puteți utiliza logo-ul site-ului dvs. web și culorile signature ale companiei pentru a face formularul dvs. mai memorabil și mai eficient.

Acum, vă vom arăta cum să personalizați și să stilizați cu ușurință formularele dvs. WordPress, pas cu pas.

Vom acoperi două metode în această postare și puteți utiliza linkurile rapide de mai jos pentru a sări la cea pe care doriți să o utilizați:

Să începem!

Metoda 1: Cum să personalizezi și să stilizezi formularele WordPress cu WPForms (Metodă fără cod)

WPForms este cel mai bun plugin pentru formulare de contact WordPress cu un constructor drag-and-drop. Oferă peste 2.000 de teme predefinite și opțiuni de personalizare încorporate pentru stilizarea formularelor fără cod, plus instrumente AI pentru crearea formularelor.

Folosim WPForms pe WPBeginner pentru formulare de contact, migrări de site-uri web și sondajul nostru anual. Pentru a afla mai multe despre experiența noastră, consultați recenzia noastră completă WPForms.

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

Mai întâi, să ne înregistrăm pentru un cont WPForms.

Pe site-ul lor, faceți clic pe butonul „Get WPForms Now”, alegeți un plan și urmați instrucțiunile de pe ecran pentru a finaliza înregistrarea.

Acum, trebuie să instalați și să activați pluginul WPForms.

În zona de administrare WordPress, accesați Pluginuri » Adaugă Plugin.

Pe ecranul următor, poți folosi bara de căutare pentru a găsi rapid plugin-ul WPForms.

Faceți clic pe „Install Now” și apoi pe „Activate” pentru a-l activa pe site-ul dvs. WordPress.

Pentru instrucțiuni detaliate, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

Dacă utilizați versiunea Pro, vizitați pagina WPForms » Settings din bara laterală de administrare WordPress pentru a introduce cheia de licență la activare.

Puteți găsi aceste informații în contul dvs. pe site-ul WPForms.

Apoi, accesați WPForms » Settings din tabloul de bord de administrare și verificați dacă este bifată căsuța „Use Modern Markup”.

Trebuie să activați Modern Markup pentru a debloca setările avansate de design și opțiunile de personalizare din cadrul editorului de blocuri WordPress.

Nu uitați să faceți clic pe butonul „Salvare modificări” pentru a vă stoca setările.

Pasul 2. Creați formularul dvs. WordPress

De aici, accesați ecranul WPForms » Adăugare Nou din tabloul de bord de administrare WordPress pentru a crea formularul dvs.

Acest lucru vă va duce la pagina „Configurare”, unde puteți începe prin a introduce un nume pentru formularul dvs.

După aceea, puteți alege orice șablon de formular doriți, plasați cursorul peste el și faceți clic pe butonul „Utilizați șablonul” de sub el. Pentru acest tutorial, vom crea și adăuga un formular de contact simplu pe site-ul nostru web.

Aceasta va lansa șablonul în constructorul de formulare WPForms, unde vei vedea o previzualizare a formularului în partea dreaptă și câmpurile formularului în coloana din stânga.

De aici, puteți trage și plasa orice câmp de formular doriți în formular, conform preferințelor dumneavoastră. Puteți, de asemenea, rearanja sau șterge câmpuri.

Pentru instrucțiuni detaliate, consultați tutorialul nostru despre cum să creați un formular de contact în WordPress.

După ce ați terminat cu formularul dvs., pur și simplu faceți clic pe butonul „Salvare” din partea de sus pentru a ieși din constructorul de formulare.

Pasul 3. Personalizați designul formularului dvs. cu temele WPForms

Acum sunteți gata să adăugați formularul în editorul de blocuri și să îl personalizați. Să dăm clic pe butonul „Embed” din interiorul constructorului de formulare.

Aceasta va deschide expertul de încorporare, unde puteți alege una dintre următoarele opțiuni:

• Selectați o pagină existentă – Alegeți o pagină de pe site-ul dvs. WordPress și adăugați formularul folosind blocul WPForms.
• Creați o pagină nouă – Aceasta adaugă automat formularul într-o pagină nouă.

Pentru acest ghid, vom alege „Creați o pagină nouă”.

Apoi, să adăugăm un nume pentru noua pagină, de exemplu, „Contactați-ne”.

Continuați și dați clic pe „Să mergem!” când ați terminat aici.

Aceasta va deschide editorul de pagină cu formularul dvs. deja încorporat.

Pentru detalii, consultați ghidul nostru despre cum să încorporați formulare în WordPress.

Acum că ați adăugat formularul, este timpul să îl personalizați și să îl stilizați.

Pentru a face acest lucru, trebuie să deschideți panoul de blocuri din partea dreaptă a ecranului și să derulați în jos la secțiunea „Teme”.

De aici, puteți alege dintr-o bibliotecă de peste 40 de teme pre-proiectate pentru a oferi instantaneu formularului dvs. un aspect frumos.

Apoi, puteți derula în jos la secțiunea „Stiluri de câmp” pentru a vă personaliza și mai mult formularul.

Puteți selecta dimensiunea câmpurilor formularului din meniul derulant și chiar puteți seta dimensiunea și raza bordurii acestora.

Apoi, puteți schimba culoarea de fundal, textul și culoarea chenarului câmpurilor formularului folosind instrumentul de selectare a culorilor.

Aici, puteți utiliza culorile signature ale mărcii dvs. sau alte culori utilizate pe restul blogului dvs. WordPress pentru a crea un formular atrăgător din punct de vedere vizual.

Odată ce ați făcut acest lucru, derulați în jos la secțiunea „Stiluri etichetă”, unde puteți selecta dimensiunea fontului etichetelor din meniul derulant.

După aceea, puteți schimba și culoarea fontului etichetelor câmpurilor, sub-etichetelor și mesajelor de eroare care vor fi afișate în formularul dumneavoastră.

Pentru a personaliza butonul din formularul dumneavoastră, derulați în jos la secțiunea „Stiluri buton” și selectați dimensiunea acestuia din meniul derulant.

Puteți seta, de asemenea, o rază a chenarului și puteți schimba culoarea de fundal și a textului butonului de trimitere al formularului.

După ce ați terminat de personalizat formularul, pur și simplu faceți clic pe butonul „Actualizare” sau „Publicare” din partea de sus pentru a salva setările.

Acum, puteți vizita site-ul dvs. WordPress pentru a vedea formularul stilizat în acțiune.

Metoda 2: Cum să stilizezi formularele WordPress cu CSS (Personalizare avansată)

Dacă nu doriți să utilizați opțiunile de personalizare oferite de WPForms sau doriți să aplicați personalizări diferite cu CSS, atunci puteți utiliza și un fragment de cod CSS personalizat.

Pasul 1. Creați formularul dvs. folosind WPForms

Pentru a începe, va trebui să creați un formular folosind WPForms. Este cel mai bun plugin pentru formulare de contact WordPress cu un constructor drag-and-drop, oferind peste 2.000 de șabloane pentru a vă ajuta să creați rapid formulare de contact, formulare de încărcare fișiere, formulare de înregistrare și formulare RSVP.

Pentru instrucțiuni detaliate, puteți consulta tutorialul nostru despre cum să creezi un formular de contact în WordPress sau să vezi metoda 1.

Odată ce ați făcut acest lucru, să obținem ID-ul formularului dvs. – veți avea nevoie de el pentru fragmentul de cod personalizat.

Pentru a face acest lucru, vizitați pagina WPForms » Toate formularele din tabloul de bord WordPress și copiați numărul ID-ului WPForms al formularului pe care doriți să îl stilizați.

Pasul 2. Instalați și activați WPCode

WPCode este cel mai sigur și mai ușor plugin pentru fragmente de cod WordPress pentru adăugarea de CSS personalizat pentru stilizarea formularelor. Dispune de validare inteligentă a codului pentru a preveni erorile și oferă o bibliotecă de fragmente gata făcute pentru personalizarea WordPress.

Folosim WPCode pe WPBeginner pentru a adăuga și gestiona fragmente de cod personalizate pe site-urile noastre de afaceri. Pentru a citi mai multe despre experiența noastră, consultați recenzia noastră completă WPCode.

Mai întâi, puteți crea un cont WPCode. Pe site-ul WPCode, faceți clic pe butonul „Obțineți WPCode acum”, selectați un plan și urmați instrucțiunile de pe ecran pentru a vă înscrie.

Acum, să instalăm și să activăm pluginul WPCode.

În tabloul de bord de administrare WordPress, accesați Plugins » Add Plugin.

Apoi, puteți folosi caseta de căutare pentru a găsi rapid pluginul WPCode.

Când îl vedeți, faceți clic pe butonul „Instalați acum” și apoi pe „Activați”.

Pentru instrucțiuni detaliate, consultați ghidul nostru pentru începători despre cum să instalați un plugin WordPress.

Pasul 3. Adăugați un fragment de cod personalizat pentru a personaliza formularele WordPress

După activare, vizitați pagina Code Snippets » + Adăugați fragment din tabloul de bord WordPress.

Apoi, treceți cu mouse-ul peste opțiunea „Adăugați codul dvs. personalizat (Fragment nou)” și faceți clic pe butonul „Utilizați fragmentul”.

Veți vedea apoi o fereastră pop-up care vă cere să selectați Tipul de cod.

Să alegem „Fragment CSS”.

Acest lucru vă va duce la pagina „Creează fragment personalizat”, unde puteți începe prin a introduce un nume pentru fragmentul dumneavoastră de cod.

După aceea, selectează opțiunea „CSS Snippet” din meniul derulant din colțul din dreapta al ecranului.

Apoi, copiați și lipiți următorul cod în caseta „Previzualizare cod”. Etichetele !important spun browserului să prioritizeze aceste stiluri în fața setărilor implicite ale temei dvs.:

#wpforms-0000 .wpforms-form {
    background-color: #ADD8E6 !important;
	font-family: 'Arial', sans-serif !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Iată cum ar putea arăta pe ecranul dvs.:

Apoi, puteți schimba codul hexazecimal, cum ar fi #ADD8E6, pentru a se potrivi culorii specifice a mărcii dvs. Puteți găsi aceste coduri folosind orice instrument gratuit de selectare a culorilor online.

De asemenea, puteți adăuga o familie de fonturi la alegere și puteți configura spațierea (padding) (spațierea din interiorul casetei) și raza colțurilor (border radius) (colțuri rotunjite) ale formularului prin modificarea fragmentului de cod.

După ce ați făcut acest lucru, derulați în jos la secțiunea „Inserare” și selectați modul „Inserare automată”.

Codul va fi executat automat pe site-ul dvs. la activare.

În cele din urmă, derulați înapoi în partea de sus a paginii și comutați comutatorul la „Activ”.

După aceea, faceți clic pe butonul „Salvează fragment” pentru a vă stoca setările

Acum, formularul WordPress va fi personalizat automat conform fragmentului CSS, iar dvs. îl puteți vizualiza.

Cu toate acestea, dacă nu ați adăugat încă formularul pe site-ul dvs. web, atunci deschideți o pagină sau postare în editorul de blocuri.

Odată ce sunteți acolo, faceți clic pe butonul „+” din colțul din stânga sus pentru a deschide meniul de blocuri și a adăuga blocul WPForms.

După aceea, selectați formularul pe care l-ați stilizat folosind fragmentul CSS din meniul derulant din blocul în sine.

În cele din urmă, faceți clic pe butonul „Actualizare” sau „Publicare” pentru a salva setările.

Acum, puteți vizita site-ul dvs. WordPress într-o fereastră Incognito sau Privată pentru a vedea formularul personalizat în acțiune, deoarece cache-ul browserului poate ascunde uneori modificările recente.

Sfat bonus 🧑‍💻: Cum să creați cu ușurință pagini personalizate pentru site-uri web

Puteți stiliza formularele WordPress pentru a face site-ul dvs. mai atractiv și mai interesant vizual. De asemenea, este posibil să vă creați propriile pagini web complet personalizate folosind SeedProd. Este cel mai bun plugin de creare de pagini WordPress cu funcționalitate drag-and-drop pentru crearea de pagini web și teme fără cod.

Am testat temeinic SeedProd pentru a vedea cum se compară cu alte soluții. Pentru a afla mai multe despre experiența noastră, consultați recenzia noastră completă SeedProd.

SeedProd are, de asemenea, șabloane și kituri de site pre-făcute, opțiuni ușoare de personalizare, palete de culori și blocuri avansate pentru pagini. În plus, poți încorpora cu ușurință formularele tale WPForms în editorul SeedProd.

Pentru mai multe detalii, poți consulta tutorialul nostru despre cum să creezi o pagină de destinație în WordPress.

Întrebări frecvente despre personalizarea și stilizarea formularelor WordPress

Încă aveți întrebări? Iată câteva dintre cele mai frecvente întrebări pe care le primim de la cititori – cu răspunsuri.

Ce pot personaliza într-un formular WordPress?

Puteți personaliza câmpurile, aspectul, culorile, fonturile, etichetele, mesajele de eroare și butonul de trimitere pentru a se potrivi cu designul site-ului dvs.

Am nevoie de abilități de codare pentru a stiliza formularele WordPress?

Nu. Cu pluginuri excelente precum WPForms, puteți personaliza și stiliza formularele folosind setările încorporate, fără a fi nevoie de cod.

Pot face ca formularele mele să se potrivească cu brandingul site-ului meu web?

Da. Puteți utiliza culorile de marcă, fonturile și spațierea dvs., astfel încât formularul să se integreze natural cu tema dvs. WordPress.

Va afecta personalizarea și stilizarea unui formular modul în care funcționează?

Modificările vizuale nu vor afecta funcționalitatea. Doar asigurați-vă că testați formularul dacă modificați câmpuri sau reguli obligatorii.

Pot schimba stilul formularului mai târziu?

Absolut. Puteți actualiza designul oricând, fără a reconstrui formularul de la zero.

Mai multe ghiduri despre utilizarea formularelor în WordPress

Sperăm că acest articol v-a ajutat să învățați cum să vă personalizați și să vă stilizați formularele WordPress.

De asemenea, ați putea dori să vedeți tutorialele noastre despre:

• Cum să încărcați fișiere din formularele WordPress în Google Drive
• Cum să permiteți utilizatorilor să facă fotografii și videoclipuri live în formularele WordPress
• Sfaturi pentru a face formularele dvs. WordPress mai interactive
• Cum să automatizați formularele WordPress cu n8n pentru a economisi ore de muncă manuală
• Cele mai bune alternative la Google Forms (Funcționalități mai bune + Gratuit)

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.