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. Cel mai rău? Vizitatorii s-ar putea să nu fie siguri dacă să îl completeze 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?

Când adăugați un formular pe site-ul dvs. WordPress folosind un plugin, veți observa că aspectul său este de obicei simplu și nepretențios.

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.

Acestea fiind spuse, vă vom arăta cum să personalizați și să stilizați cu ușurință formularele dumneavoastră WordPress, pas cu pas. Vom acoperi două metode în această postare și puteți folosi linkurile rapide de mai jos pentru a sări la cea pe care doriți să o utilizați:

• Metoda 1: Cum să personalizați și să stilizați formularele WordPress cu WPForms (Metodă fără cod)
• Metoda 2: Cum să stilizezi formularele WordPress cu CSS (Personalizare avansată)
• Sfat bonus 🧑‍💻: Cum să creați cu ușurință pagini personalizate pentru site-uri web

Să începem!

Metoda 1: Cum să personalizați și să stilizați formularele WordPress cu WPForms (Metodă fără cod)

Puteți personaliza și stiliza cu ușurință formularele dumneavoastră WordPress folosind WPForms. Este cel mai bun plugin de formulare de contact WordPress de pe piață, utilizat de peste 6 milioane de site-uri web.

Folosim noi înșine WPForms pentru o mulțime de tipuri de formulare și puteți afla mai multe despre plugin în recenzia noastră detaliată WPForms.

WPForms vine cu un constructor drag-and-drop care face extrem de ușoară crearea oricărui tip de formular. Are chiar și o bibliotecă vastă de peste 2.000 de teme pre-făcute și opțiuni de personalizare încorporate pentru formularul tău, care nu necesită nicio codare.

De asemenea, are instrumente AI pentru a vă ajuta să creați formulare personalizate de la zero folosind o simplă solicitare și să generați mai multe opțiuni pentru câmpuri precum dropdown, butoane radio sau casete de selectare.

Mai întâi, trebuie să instalați și să activați pluginul WPForms. Pentru instrucțiuni detaliate, consultați ghidul nostru pas cu pas despre cum să instalezi un plugin WordPress.

După activare, vizitați pagina WPForms » Setări din bara laterală de administrare WordPress pentru a introduce cheia de licență.

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

Odată ce ați făcut acest lucru, accesați ecranul WPForms » Adăugare nou din tabloul de bord WordPress.

Acest lucru vă va duce la pagina „Selectați un șablon”, unde puteți începe prin a introduce un nume pentru formularul dvs. După aceea, puteți alege orice șablon de formular doriți și faceți clic pe butonul „Utilizați șablonul” de sub acesta.

De dragul acestui tutorial, vom crea și adăuga un formular de contact simplu pe site-ul nostru.

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.

După aceea, trebuie să vizitați pagina WPForms Setări din tabloul de bord WordPress și să bifați căsuța „Utilizați marcajul modern”. Dacă nu faceți acest lucru, setările de personalizare WPForms nu vor fi disponibile în editorul de blocuri.

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

Apoi, deschideți pagina sau postarea unde doriți să adăugați formularul pe care tocmai l-ați creat.

De aici, trebuie să faceți clic pe butonul „+” de adăugare bloc din colțul din stânga sus pentru a deschide meniul de blocuri și a adăuga blocul WPForms.

Odată ce ați făcut acest lucru, pur și simplu selectați formularul pe care doriți să îl adăugați pe site-ul dvs. din meniul derulant din interiorul blocului.

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, de asemenea, un fragment de cod CSS personalizat.

Pentru a face acest lucru, mai întâi, va trebui să creați un formular utilizând WPForms, care este cel mai bun constructor de formulare de pe piață.

Utilizează un constructor drag-and-drop și vine cu peste 2.000 de șabloane pentru a te ajuta să creezi rapid formulare, inclusiv formulare de contact, formulare de încărcare fișiere, formulare de înregistrare, formulare RSVP și multe altele!

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 ai creat un formular, este timpul să îl personalizezi folosind WPCode. Este cel mai bun plugin pentru fragmente de cod WordPress de pe piață, oferind cea mai ușoară și sigură modalitate de a adăuga cod CSS pentru stilizarea formularului tău WordPress.

Unele dintre site-urile noastre de afaceri folosesc WPCode pentru a adăuga și gestiona fragmente de cod personalizate, și a funcționat excepțional de bine. Consultați recenzia noastră completă despre WPCode pentru detalii despre instrument.

Mai întâi, va trebui să instalați și să activați pluginul WPCode. Pentru instrucțiuni detaliate, poate doriți să consultați ghidul nostru pentru începători despre cum să instalați un plugin WordPress.

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

Odată ce sunteți acolo, faceți clic pe butonul „Utilizați fragmentul” sub opțiunea „Adăugați codul personalizat (Fragment nou)”.

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”:

#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;
}

Odată ce ați făcut acest lucru, va trebui să înlocuiți scurtcodul implicit din partea de sus cu scurtcodul formularului pe care doriți să îl personalizați.

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

După aceea, lipiți numărul ID al formularului lângă linia wpforms- din cod. Acum, tot codul va fi executat doar în acest formular specific.

Apoi, puteți schimba cu ușurință codul hexazecimal pentru culoarea de fundal, puteți adăuga o familie de fonturi la alegere și puteți configura spațierea și razele marginilor 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 pentru a vedea formularul personalizat în acțiune.

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

Stilul formularelor WordPress este doar o modalitate de a face site-ul tău mai atractiv și interesant vizual. Poți, de asemenea, să îți creezi propriile pagini de site complet personalizate folosind SeedProd.

Este cel mai bun plugin pentru crearea de pagini WordPress de pe piață. Îți permite să creezi pagini atractive fără a folosi cod.

Unele dintre mărcile noastre partenere și-au construit întregul site web folosind SeedProd. Este un constructor puternic, drag-and-drop, care merge dincolo de simple pagini de destinație! Aflați mai multe despre instrument în recenzia noastră completă despre 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.

Sperăm că acest articol v-a ajutat să învățați cum să personalizați și să stilizați formularele dvs. WordPress. De asemenea, ați putea dori să consultați tutorialul nostru despre cum să adăugați un câmp pentru codul de cupon la formularele WordPress și comparația noastră despre WPForms vs. Gravity Forms vs. Formidable Forms.

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.