Cum să vă personalizați formularul de contact 7 Stilați în mod simplu
Publicat: 2022-04-10Formularul de contact este un element foarte important al oricărui site web. Le folosim pentru a colecta și a partaja diferite tipuri de informații și, prin urmare, trebuie să avem grijă ca acestea să arate la fel de bine ca și restul site-ului nostru . Un formular de contact prea simplu, cu un stil care pur și simplu pare să nu aparțină paginii nu poate insufla sentimentul de încredere utilizatorilor tăi și ar fi păcat să-ți pierzi audiența tocmai atunci când au vrut să ia un pas mai departe și lăsați unele dintre datele lor în formularul dvs. de contact.
O modalitate foarte populară de a crea un formular de contact este cu ajutorul unui plugin Contact Form 7 , un instrument practic și ușor de utilizat, care este adesea inclus gratuit cu multe teme WordPress care vă permite să creați cu ușurință tot felul de formulare de contact . Acest plugin acoperă toate aspectele tehnice ale creării unui formular de contact – pentru a-l modela, veți avea nevoie de abilități suplimentare sau alt plugin.
În acest articol, vă vom arăta cât de ușor vă puteți modela formularele de contact pentru a se potrivi cu designul site-ului dvs. cu un instrument gratuit .
Rămâneți pe fază pentru a afla mai multe despre:
- Utilizarea suplimentelor Qi pentru Elementor pentru stilizarea formularelor de contact
- Setarea stilului formularului de contact
Qi Addons pentru Elementor este un plugin gratuit, bogat în funcții, care vine cu 60 de widget-uri și include un widget Contact Form 7 , care este creat special pentru a vă ajuta să vă stilizați formularele. Pluginul necesită cunoștințe de codificare zero și, literalmente, oricine îl poate folosi confortabil. Nu vă oferă opțiunea de a crea un formular de contact, dar dacă utilizați pluginul Contact Form 7, cu Qi veți putea personaliza și reproiecta formularele în așa fel încât să se potrivească perfect cu stilul dvs. de site.
Qi Addons pentru Elementor este ușor de instalat și configurat, iar procedura este aproape aceeași ca pentru orice alt plugin.
După ce îl instalați, mergeți la pagina în care se află formularul de contact pe care doriți să-l stilați și alegeți să îl editați în Elementor.
Apoi tastați Formularul de contact 7 în câmpul de căutare din meniul din stânga pentru a găsi widgetul Formular de contact 7.
Acum, când l-ați primit, faceți clic pe el și plasați cursorul peste locul în care doriți să fie formularul de contact .
Formularul pe care îl adăugați în acest fel este formularul pe care l-ați creat cu pluginul Contact Form 7, acest widget este creat doar pentru a vă ajuta să stilați formularul, nu puteți crea un formular cu el . Deci, acum aveți formularul de contact plasat acolo unde ați dorit să fie și puteți vedea setările widgetului Formular de contact 7 în meniul din stânga.
Prima filă din meniu vă oferă opțiunea de a alege ce tip de formular de contact doriți să aveți pe pagină . Putem alege dintre trei opțiuni – Formularul de contact 1, Newsletter și Contactați-ne, puteți, desigur, să alegeți oricare dintre formularele pe care le-ați creat anterior pentru site-ul dvs. Să vă arătăm acum cum am personalizat formularul Contactați-ne de pe site-ul nostru.
Pentru a deschide opțiunile de stilare a formularului, faceți clic pe fila Stil .
Prima opțiune se referă la tipografia etichetei , unde puteți seta fontul, dimensiunea fontului, distanța dintre cuvintele etichetei, stilul fontului, distanța dintre literele din cuvinte și lucrul minunat este că puteți vedea toate modificările trăiește imediat ca să nu faci nimic orbește .
În imaginea de mai jos puteți vedea exact cum s-au reflectat alegerile noastre pe tipografia etichetei.
Următoarea opțiune se referă la culoarea etichetei .
Îți poți crea propria nuanță, în funcție de nevoile tale. Alegem albastru închis pentru eticheta noastră, deoarece se potrivește bine cu culoarea de fundal a paginii.
Acum, când sunteți setat cu stilul etichetei, următoarele setări se referă la stilul de intrare .
Veți avea, de asemenea, opțiuni similare aici - puteți alege stilul, dimensiunea și culoarea fontului tipografiei de intrare . De asemenea, puteți seta culoarea de fundal a câmpului de introducere dacă nu doriți ca acesta să fie alb, deoarece este implicit. Aici veți găsi și setări pentru ajustarea stilului de chenar al câmpurilor de introducere și puteți alege între solid, întrerupt, canelat, punctat, dublu sau niciunul și pentru fiecare dintre opțiuni puteți face ajustări suplimentare.
De asemenea, puteți seta diferite stiluri atunci când câmpurile de introducere sunt active . Toate aceleași opțiuni sunt la dispoziție, dar vor fi aplicate numai când câmpurile de introducere sunt active.
Următoarele setări se referă la stilul casetei de selectare . Acest element mic este foarte important într-un formular de contact și ar trebui să arate îngrijit și ușor accesibil, deoarece acesta este pasul în care oferiți un fel de alegere utilizatorilor site-ului dvs.
Cu Qi, vei face cu ușurință ca acest element să arate perfect. Puteți seta dimensiunea de intrare a casetei de selectare , puteți lăsa mai mult sau mai puțin spațiu între două casete de selectare, precum și între casete de selectare și alte câmpuri de introducere . Puteți vedea clar în fotografia de mai jos modul în care alegerile noastre afectează formularul de contact în acest caz:
Următoarele setări despre care este important să știți sunt setările Button Style .
Puteți schimba culoarea fundalului butonului, puteți seta chenarul din jurul butonului să fie într-o culoare și stil diferit (solid, punctat sau punctat). De asemenea, puteți schimba culoarea textului din buton alegând culoarea dorită în opțiunea Culoare buton. Toate modificările sunt vizibile imediat, astfel încât să puteți înțelege cu ușurință care dintre setări se referă la ce element al formularului de contact.
Dacă doriți ca stilul butonului să se schimbe la trecerea cu mouse-ul, faceți clic pe fila Activ și ajustați setările - puteți ajusta culoarea de trecere a butonului, culoarea de fundal a butonului, culoarea marginii butonului etc.
Când sunteți mulțumit de aspectul formularului de contact, acum puteți ajusta spațierea deschizând setările din fila Spacing Style . Puteți ajusta distanța pentru fiecare element al formularului de contact aici.
Setările stilului global se referă la stilul de aliniere al formularului de contact. Puteți alege între alinierea la stânga, la centru și la dreapta.
Setările Stil de eroare vă permit să controlați stilul mesajului de eroare care este afișat atunci când cineva nu introduce datele corecte în formular. Puteți seta cu ușurință poziția mesajului de eroare, tipografia și culoarea.
Setările Stil de răspuns vă permit să reglați detaliile răspunsurilor care sunt inserate în formularul de contact. Puteți controla fontul, culoarea fontului, puteți seta umplutura de răspuns și marja de răspuns, precum și tipul de chenar.
Iată cum arată formularul nostru după ce cineva a trimis mesajul:
Și, exact așa, aveți un formular de contact elegant pe pagina dvs., gata să lucreze pentru dvs.
Încheierea totul
Lucrul grozav despre Qi Addons pentru Elementor este că puteți vedea toate modificările pe care le faceți live, astfel încât să puteți trece rapid prin diferite opțiuni și să învățați cum să le utilizați intuitiv. Deși adăugarea de formulare de contact nu este o sarcină deosebit de creativă, acest plugin vă permite să fiți creativ chiar și în acest caz. Aspectul formularelor dvs. de contact poate avea un impact enorm asupra modului în care utilizatorii vă percep, iar dacă reușiți să oferiți același standard și în acest departament, va fi un plus imens pentru site-ul dvs., marca și afacerea dvs.
Sperăm că acest articol a fost de ajutor. Dacă v-a plăcut, nu ezitați să consultați și câteva dintre aceste articole!
- Cele mai bune plugin-uri pentru butoane de tip WordPress care merită să aibă
- 4 moduri ușoare de a crea butoane WordPress
- Sfaturi pentru proiectarea butoanelor: Cum să obțineți clicuri de la vizitatorii dvs