Doriți să personalizați un formular de contact 7 cu pluginul Elementor's Essential Addons?

Formularul de contact 7 este unul dintre WordPress plugin-uri dintre cei mai populari constructori de forme. Este complet gratuit și îl puteți folosi pentru a crea un formular de contact pe site-ul dvs. WordPress.

De asemenea, puteți crea multe tipuri de formulare, cum ar fi un formular de rezervare sau un formular de încărcare a fișierelor. Oferă 14 tipuri de câmpuri pe care le puteți utiliza în timp ce creați un formular.

Vezi și: Cum să utilizați widgeturile/șabloanele Elementor ca blocuri Gutenberg

Una dintre problemele comune ale pluginului formularul de contact 7 este procesul de personalizare. Formularul de contact 7 folosește stilul implicit al dvs WordPress temă activ. Puteți folosi un stil diferit, dar abilitățile CSS vor fi necesare. Dacă nu aveți abilități CSS, puteți utiliza modulul Addons esențiale pentru a vă stila forma.

Essential Addons este un add-on Elementor care îmbunătățește procesul de personalizare a formularelor de Contact Form 7 cu Elementor. Elementor și Essential Addons sunt pluginuri freemium. Puteți folosi versiunile gratuite ale ambelor pentru a vă stila formularele Formular de contact 7.

Cum să stilați un formular de contact 7 cu suplimente esențiale

Înainte de a începe stilul formularelor, asigurați-vă că ați instalat Elementor et Addons esențiale. Odată instalat și activat, creați o pagină nouă (Pagini – > Adăugați) și editați-l cu Elementor.

personalizați un formular de contact 7 cu pluginul Elementor Essential Addons

Înainte de a începe procesul de personalizare, setați aspectul paginii făcând clic pe pictograma roată din colțul din stânga jos. Setați aspectul din meniul derulant.

personalizați un formular de contact 7 cu pluginul Elementor Essential Addons

Adăugați o secțiune nouă făcând clic pe pictograma plus din caseta de editare și trăgând widgetul Formularul de contact EA 7 din panoul din stânga din editor.

personalizați un formular de contact 7 cu pluginul Elementor Essential Addons

Accesați panoul din stânga și selectați formularul al cărui stil doriți să-l personalizați.

După ce ați selectat un formular, navigați la filă Stil. După cum puteți vedea, puteți seta mai multe opțiuni de stil. Iată opțiunile comune de stil pe care le puteți seta.

  • Lățimea formularului, alinierea și fundalul

Sub bloc FormContainer, faceți clic pe selectorul de culori din secțiune Tip de fundal și setați culoarea dorită pentru fundalul formularului. Puteți utiliza fie o culoare solidă, fie o culoare gradient ca fundal.

Citiți și: Elementor: Cum să importați sau să exportați șabloane

Pentru a seta alinierea formularului, pur și simplu selectați opțiunea de aliniere preferată din secțiune Alinierea formularului.

Pentru a seta lățimea formularului, setați valoarea Lățimii maxime a formularului în câmp Lățimea maximă a formularului.

personalizați un formular de contact 7 cu pluginul Elementor Essential Addons
  • Câmp de fundal, lățimea marginii și raza

Pentru a defini fundalul câmpurilor, lățimea și raza chenarului, puteți deschide secțiunea Introducere & Textarea. Faceți clic pe selectorul de culori a câmpului Culoare de fundal pentru a seta fundalul.

De asemenea, puteți seta culoarea de fundal a câmpurilor în modul de depanare făcând clic pe filă FOCUS.

Pentru a defini lățimea câmpurilor, puteți defini valoarea în câmpuri Lățimea de intrare. În această secțiune puteți seta și lățimea câmpului casetei de text în Lățimea zonei de text.

Pentru a seta raza graniței, editați câmpul Raza de frontieră și setați valoarea de frontieră pe care o preferați. De asemenea, puteți seta tipografia (familia de fonturi, dimensiunea fontului, stilul fontului) făcând clic pe pictograma creion din câmp tipografie.

  • etichete

Essential Addons vă permite, de asemenea, să personalizați stilul etichetelor formularelor. Puteți seta culoarea textului, precum și tipografia. Pentru a face acest lucru, deschideți opțiunea etichete. Setați culoarea textului făcând clic pe selectorul de culori din câmp Culoarea textului.

Pentru a seta tipografia, faceți clic pe pictograma creion din câmp Tipografie.

personalizați un formular de contact 7 cu pluginul Elementor Essential Addons
  • Buton de trimitere

Pentru a personaliza stilul butonului de trimitere, deschideți blocul trimiteţi butonul. De aici puteți seta alinierea butoanelor, lățimea, culoarea de fundal, culoarea textului, raza chenarului, precum și tipografia.

  • Mesaj de eroare

Pentru a personaliza stilul mesajului de eroare, puteți deschide blocul Erori. Puteți seta culoarea textului mesajului de eroare, tipografia, culoarea de fundal a erorii de validare, culoarea textului erorii de validare etc..

Puteți seta mai multe alte opțiuni de stil. Vă puteți juca cu panoul din stânga până când sunteți mulțumit de stilul formularului dvs.

Puteți adăuga alte câteva elemente la pagina dvs. folosind widget-urile disponibile oferite de Elementor și Essential Addons. Când ați terminat, faceți clic pe butonul publier în partea de jos a panoului din stânga pentru a vă publica pagina.

Integrarea formularului într-o pagină obișnuită

După ce faceți clic pe butonul publier, pagina ta de contact a fost practic publicată. Pagina în sine este alimentată de Elementor. Dacă preferați să adăugați dvs formular de contact 7 la o pagină obișnuită (o pagină creată cu Gutenberg, editorul WordPress implicit), puteți instala pluginul Elementor Blocks pentru Gutenberg. Acest plugin va converti un șablon Elementor într-un bloc Gutenberg.

Pentru a vă înregistra formular de contact 7 ca șablon Elementor, faceți clic pe butonul săgeată de lângă butonul PUBLICAȚI / ACTUALIZAȚI pe panoul din stânga și selectați Salvați ca șablon.

Dați un nume șablonului și faceți clic pe butonul ÎNREGISTRATOR.

Creați o pagină nouă (Pagini – > Adăugați) și dați-i un nume precum „contactați-ne” „contact” sau orice alt nume care vă place.

Adăugați un bloc nou și selectați Biblioteca Elementor și selectați șablonul de formular de formular de contact pe care tocmai l-ați creat.

personalizați un formular de contact 7 cu pluginul Elementor Essential Addons

Și acum tocmai v-ați personalizat formularul Formular de contact 7.

Obțineți Elementor Pro acum!!!

Concluzie

Aici este ! Asta este tot pentru acest articol care vă arată cum să personalizați un formular de contact 7 cu Essential Addons. Dacă aveți nelămuriri cu privire la cum să ajungeți acolo, anunțați-le în comentarii.

Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...