Cum să schimbați stilul unui formular de contact WordPress

Doriți să vă schimbați stilul formularului de contact WordPress? Atunci acest ghid este pentru tine! Veți învăța cum stilul formularelor WordPress poate fi foarte ușor! Află mai multe.

Timp de citire aproximativ : 6 minute

Ai o singură șansă să faci o primă impresie.

Și atragerea atenției vizitatorilor cu o formă frumoasă este o modalitate de a face o impresie excelentă .

Este, de asemenea, modalitatea perfectă de a-i determina să completeze formularul. La urma urmei, cum îl pot completa dacă nu îl văd?

Așadar, dacă ești gata să treci de la bază la frumos cu formele tale, acest ghid este pentru tine.

Vă vom arăta două moduri de a vă schimba cu ușurință stilul formularului de contact WordPress!

Să intrăm în asta.

Cum să vă schimbați stilul formularului de contact WordPress

După cum am menționat, există două moduri de a personaliza stilul formularului

Ceea ce alegeți va depinde de nivelul dvs. de confort cu codificare. Dar vă vom arăta ambele metode, astfel încât să cunoașteți toate opțiunile disponibile.

Metoda 1: Editați codul formularului în WordPress

Deci, vrei să te scufunzi cu capul întâi în apele de codificare, nu?

Presupunem că aveți deja un formular construit și doriți să îl personalizați. Dacă nu aveți un formular, accesați ghidul nostru despre crearea unui formular pentru a începe.

Pasul 1: Obțineți ID-ul sau clasa formularului dvs

Pentru a începe, trebuie să obțineți ID-ul sau clasa formularului dvs.

O modalitate simplă de a face acest lucru este să accesați site-ul dvs. web, să faceți clic dreapta pe formular și să faceți clic pe Inspectați . Aici, vom vedea șablonul HTML de formular în tema copilului.

Bara laterală Instrumente pentru dezvoltatori Google va glisa în afara și puteți vizualiza diferitele secțiuni de cod pentru formularul dvs.

Cel mai important lucru este să găsiți zona pe care doriți să o personalizați și să urmăriți ID-ul sau numele clasei . Veți folosi acest lucru pentru a face modificări.

De exemplu, dacă dorim să schimbăm culoarea de fundal a șablonului de formular Contactați-ne, am găsi cea mai exterioară bucată de cod. În acest caz, este un div cu clasa api-form-box .

Putem chiar să testăm cum ar arăta de pe această consolă.

Dacă facem clic dreapta pe div și facem clic pe Adăugare atribut , putem adăuga un stil de culoare de fundal.

Apăsați Enter, iar modificările sunt afișate imediat în fereastră.

Dar nu-ți face griji. Ori de câte ori reîmprospătați pagina, formularul va reveni la normal.

Apoi, accesați administratorul WordPress pentru a face modificările necesare codului CSS.

Pasul 2: Schimbați CSS-ul în panoul de administrare WordPress

Acum că ați luat notă de câteva lucruri pe care doriți să le modificați în formularul nostru, mergeți la administratorul WordPress pentru a începe.

Apoi, în bara laterală WordPress, alegeți Aspect → Personalizare → CSS suplimentar pentru a stila formularul.

Aici puteți introduce clasele CSS pentru formularul dvs.

De exemplu, am decis să schimbăm câteva lucruri pe formularul nostru, așa că iată codul pe care l-am introdus:

Pentru a eticheta o clasă , trebuie să includeți un . înainte de numele clasei. Pentru un ID , puneți un # .

Cu toate acestea, dacă utilizați această metodă, vă recomandăm să aflați mai multe despre regulile CSS pentru a înțelege mai bine modificările.

Pentru exemplul nostru, s-ar descompune astfel:

• .api-form-box schimbă culoarea de fundal în albastru deschis
• .frm-button-submit schimbă fundalul butonului de trimitere în galben și textul în negru
• .frm-submit centrează butonul în formular

Cu aceste modificări, formularul nostru ar arăta astfel:

De aici, puterea ta este nelimitată. Vă puteți personaliza formularul după cum doriți dacă învățați cum să utilizați CSS.

Cu toate acestea, această metodă are câteva dezavantaje.

O actualizare ar putea rupe designul formularului și vă poate determina să o faceți din nou. Ca să nu mai vorbim că consumă timp. Dacă aveți mai multe formulare de contact, va trebui să editați codul HTML și să adăugați CSS personalizat la fiecare.

Dar, dacă doriți ceva mai simplu și mai greu de spart, vă recomandăm să verificați următoarea metodă.

Metoda 2: Utilizați un generator de formulare cu un stilator vizual

Codarea este o abilitate care necesită timp pentru a învăța.

Și mulți oameni nu au timp să învețe. Dacă ești tu, un generator de formulare este cea mai bună opțiune.

Și una pe care o recomandăm este Formidable Forms .

Este cel mai avansat plugin WordPress pentru generatorul de formulare din WordPress, ceea ce înseamnă că construirea formularelor este simplă și economisește timp, ceea ce înseamnă mai mult timp de dedicat altor zone ale site-ului tău.

Indiferent de tipul de formular de pe site-ul dvs., Formidable poate gestiona totul rapid.

Fără codare, fără bătăi de cap - doar construirea simplă a formularelor.

Există și alți constructori de formulare din care să alegeți (WPForms, Gravity Forms și multe altele), dar nu oferă abilitățile de stilare care vin cu Formidable. Și asta înseamnă că obții mai multă putere asupra modului în care arată formularul tău.

Vă recomandăm să verificați și planurile premium ale Formidable.

Deși nu sunt necesare pentru a vă stila formularul, aveți multe caracteristici excelente:

• Acces la șabloane de design de formulare
• Posibilitatea de a personaliza imaginea de fundal
• Mai multe șabloane de formular pentru a începe formularul mai repede
• Și mult mai mult

Deci, odată ce ați instalat și activat Formidable, veți fi gata să începeți.

Obțineți Formulare formidabile acum!

Sunt doar trei pași simpli pentru a vă stila formularul și a-l activa pe site-ul dvs.:

1. Creați un formular
2. Stilați formularul
3. Afișați formularul

Pasul 1: Creați un formular

Pentru a modela o formă, aveți nevoie de o formă pentru a modela, nu?

Așadar, mergeți la administratorul WordPress și accesați Formidable → Forms → Add New .

Puteți alege unul dintre numeroasele noastre șabloane predefinite (funcție premium) sau un Formular necompletat pentru a începe.

Apoi, dați un nume formularului și faceți clic pe Creare .

Pluginul vă va duce la generatorul său de drag-and-drop, unde vă puteți edita cu ușurință formularul.

Adăugați orice câmpuri de formular doriți, personalizați etichetele câmpurilor, modificați tipul de intrare și multe altele din meniul din bara laterală.

Dacă creați un formular de contact, cel mai bine este să adăugați următoarele:

• Câmp text pentru numele vizitatorului
• E-mail pentru o modalitate de a-i contacta
• Paragraf pentru un mesaj pe care doresc să-l adauge

Odată ce formularul de contact este configurat, faceți clic pe Actualizare pentru a salva modificările.

Apoi, ne vom îndrepta către fila Stil .

Pasul 2: stilați formularul

Sub fila Stil , veți vedea câteva opțiuni.

Puteți alege unul dintre șabloanele noastre de design prefabricate pentru a vă economisi timp (premium) sau puteți începe să vă proiectați propriul dvs.

Pentru a vă crea propriul design, faceți clic pe cele trei puncte de lângă Stilul formidabil și faceți clic pe Editați . Stilul Formidable este stilul implicit în Formidable.

Acest lucru vă va duce la designerul nostru Formidable Style, unde vă puteți personaliza formularul.

Puteți modifica dimensiunea și culoarea etichetelor, câmpurile de introducere, dimensiunea fontului și culoarea de fundal și chiar puteți încărca o imagine de fundal!

De exemplu, pentru un site web de testare numit Cheap n' Cheesy , am conceput un formular care reflectă afacerea:

Posibilitățile sunt nelimitate pentru tine și formularul tău de contact!

Așadar, faceți clic pe Actualizare pentru a salva modificările după ce vă personalizați formularul.

Acum trebuie doar să-l afișăm!

Pasul 3: Afișați formularul

Afișarea formularului este chiar mai ușoară decât a-l crea.

Mai întâi, mergeți la postarea sau pagina în care doriți să vă afișați formularul și adăugați un nou bloc WordPress.

Apoi, căutați blocul Formulare formidabile , adăugați-l și alegeți formularul din meniul drop-down.

În sfârșit, actualizați-vă postarea sau pagina, iar formularul va fi live pe pagina dvs.!

Ți-am spus că a fost ușor, la fel ca totul cu Formidable.

Obțineți Formulare formidabile acum!

Ești gata să modelezi formularele de contact WordPress pe site-ul tău?

A avea capacitatea de a modela formularele de contact este ceva de care ai nevoie , nu vrei.

Este posibil să vedeți căutări pentru pluginul Formular de contact 7 care implică personalizarea acestora. Lucruri precum Formularul de contact 7 CSS, textul de introducere a textului în WPCF7 sau e-mailul de tipul de introducere cu WPCF7.

Nimic din toate acestea nu este necesar cu aceste două metode. Și această postare v-a învățat cum să personalizați un formular de contact în WordPress, astfel încât formularul dvs. să arate așa cum doriți. Indiferent dacă introduceți HTML personalizat, CSS și multe altele, fie că utilizați Formulare formidabile. Nu vei fi dezamăgit.

Deci, nu mai aștepta. Luați Formulare formidabile și începeți să vă proiectați formularele!

Și urmăriți-ne pe Facebook, Twitter și YouTube pentru mai multe sfaturi și trucuri grozave!

Citiți mai multe de pe blogul Formidable

• Forme formidabile 6.0! Șabloane de stil, acțiune de formular de confirmare și altele
  Citeşte mai mult

  Jotform vs Typeform vs Formidable Form [comparativ]
  Citeşte mai mult

  Cum să utilizați un formular de contact WordPress pentru a redirecționa după trimitere
  Citeşte mai mult

Știați că Formidable Forms este unul dintre cele mai rapide pluginuri WordPress pentru generarea de formulare disponibile astăzi? Dacă nu îl utilizați deja, începeți cu pluginul nostru gratuit sau cu versiunea pro cu funcții complete!