Formularul de contact 7 este un plugin WordPress incredibil de popular pentru crearea formularelor de contact. Vă permite să creați formulare fără codare HTML. acestea formulare poate oferi funcții precum CAPTCHA, descărcarea fișierelor, câmpuri de sondaj etc ...
Deși stilul de contact implicit 7 Formular este suficient pentru majoritatea formularelor de contact de bază, de multe ori trebuie să îl schimbați.
Aceasta modifică structura de formă implicită pentru a o face mai accesibilă. El adaugă, de asemenea, SHORTCODE [răspunde] deasupra formularului, astfel încât dacă există o eroare la trimiterea formularului, acesta este indicat pe formular.
Dacă nu ați creat niciodată un site web WordPress, aflați Cum se instalează un blog WordPress cu un client FTP
Pentru formularul standard, codul generat de plugin este:
[răspuns] Numele tău (obligatoriu) [text * numele tău id: numele tău ] E-mailul tău (obligatoriu) [e-mail * e-mailul tău e-mail: e-mailul tău ] Subiectul tău [textul subiectului tău id: subiectul tău] Mesajul dvs. [textarea mesajului dvs. id: mesajul dvs.] [trimiteți „Trimiteți”]
Unele pluginuri pentru personalizarea formularului de contact 7
1. Formular de contact 7 Style
plugin Formular de contact 7 Style are o serie de stiluri din care să aleagă.
Pentru utilizatorii temei Douăsprezece Cincisprezece, există și un stil compatibil.
Pentru a aplica un stil, accesați „ Stiluri de contact> Editare rapidă Verificați formularul în care doriți să aplicați stilul, apoi faceți clic pe „ Actualizare ".
2. Formular de contact Skins 7
Pentru a utiliza Skins Formular de contact 7, creaza un nou formular de contact și derulați în jos pagina la secțiunea Skins. Puteți alege un șablon și un stil pentru formularul dvs.
Veți găsi modele dedicate formelor deEVENEMENTS, înregistrare și notificare.
Așa arată formularul de sondaj cu stilul Topaz folosind tema Douăzeci și Cincisprezece.
3. Proiectarea materialului pentru formularul de contact
Aceste stiluri se bazează pe stilul Material design.
Acest plugin vă sugerează să ștergeți formularul implicit și să utilizați codurile scurte ale acestuia.
Iată un exemplu cu tema Hestia. Rețineți eticheta plutitoare atunci când indicatorul este mutat într-un câmp din formular.
Testul Formular 7 de contact pentru unele Teme WordPress
Formular de contact cu ColorMag WordPress Tema
De cele mai multe ori, Formularul de contact 7 va moșteni stilul temei dvs. WordPress. Acesta este cazul temei Coral Întuneric.
Formular de contact cu tema WordPress ColorMag
Iată formularul fără stil personalizat. Moștenește culoarea butonului albastru Tema WordPress ColorMag.
Am început prin încărcarea unei fotografii pe care să o folosesc ca imagine de fundal pentru formular și schimbarea codului etichetelor formularului din gri în alb cu o umbră albastră pe text.
Următoarele modificări au fost de a crește marginile dintre etichetele formularului și câmpurile formularului, de a modifica butonul de scădere și de a adăuga o margine atunci când indicatorul intră în câmpurile formularului.
Afișarea mesajelor de eroare / succes la trimiterea formularului ar trebui, de asemenea, modificată, astfel încât acestea să fie afișate corect.
GIF-ul care se rotește la trimiterea formularului nu a apărut corect, am găsit o alternativă la Loading.io și l-am referit cu CSS.
Iată formularul rezultat:
div.wpcf7 {margine: 0; padding: 1.5em; fundal: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; raza de graniță: 3px; } .wpcf7 label, .wpcf7-submit {culoare: alb; text-umbra: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-control-form {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {fundal: #186d8e; } .wpcf7-form-control: focalizare {frontieră: 2px solid #289dcc; } div.wpcf7-răspuns-ieșire {background: # F8F8F8; text-align: centru; lățime: 92.5%; marja: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; raza de graniță: 3px; } span.wpcf7-not-valid-tip {background: # F8F8F8; afișare: inline-block; lățime: auto; umplutură: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; raza de graniță: 3px; } div.wpcf7 .ajax-încărcător {background-image: url ('your_loading_image_url_here'); lățime: 50px; înălțime: 50px; }
Dacă nu este nevoie să scrieti în cod, vă sugerăm să consultați 10 plugin-uri WordPress pentru a crea un formular de contact pe blogul dvs.
Descoperiți, de asemenea, alternative premium 3 care vă vor ajuta să creați formularele de contact.
1. Formular de contact W8
Formularul de contact W8 este unul dintre pluginurile formular de contact cel mai popular pe WordPress. Oferă o mulțime de caracteristici, cum ar fi trimiterea către mai mulți destinatari, suport pentru animații, crearea nelimitată de formulare, stiluri diferite și o mare varietate de opțiuni suplimentare de personalizare.
În plus, oferă site-ului sau blogului dvs. un sistem profesional pentru a facilita contactul cu clienții. Veți putea să vă personalizați toate formularele în funcție de nevoile și gusturile dvs.
Descarca | Demo | web hosting
2. Contactați-ne Formularul
Contact Us Form este un plugin WordPress receptiv și un instrument simplu, dar bogat în opțiuni de personalizare, care vă permite să afișați un formular clar și încurajator, pe care vizitatorii dvs. vă pot contacta lăsând mesajul lor.
Vei putea defini câmpurile necesare, alege cea mai bună dispunere a câmpurilor și personalizează-l complet pentru a încuraja clienții sau vizitatorii să-și lase sugestiile sau mesajele.
Setați doar adresa de e-mail unde doriți să primiți mesajele și folosiți-o pentru a vă dezvolta afacerea în cea mai profitabilă direcție.
Descarca | Demo | web hosting
3. Slick Popup Pro
Slick Popup Pro este un Extensia WordPress destul de simplu și ușor care convertește orice formă creată de plugin Formular de contact 7 într-un pop-up. Folosește formularul și o convertește într-un popup frumos și perfect receptiv.
Formularul popup poate avea mai multe utilizări, inclusiv: un formular de colectare a informațiilor, a formular de contact, un formular de înregistrare, un formular de ofertă, un formular de sugestii / reclamații și altele.
Descarca | Demo | web hosting
Resurse recomandate
Consultați alte resurse recomandate care vă vor ajuta să creați și să gestionați mai bine formularele de contact de pe site-ul sau blogul dvs.
- 6 pluginurile WordPress pentru verificare prin CAPTCHA pe formularele dvs.
- Cum de a adăuga un formular de contact cu WordPress Formular de contact 7
- Cum se creează formularele compatibile cu GDPR pe WordPress
Concluzie
Voila! Asta e totul pentru acest tutorial, sper să ai mai multe idei pentru a-ți personaliza formularul de contact. Nu ezita sa împărtășiți cu prietenii de pe rețelele de socializare preferate.
Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, 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.
Dar, între timp, spuneți-ne despre dvs. comentarii și sugestii în secțiunea dedicată.
...
Pentru a crea un site profesional, trebuie să fii precis și concis pentru a convinge rapid utilizatorul. Vă oferim posibilitatea de a crea un site profesional, fie că este vorba despre fabricarea unui site de prezentare sau a unui portofoliu. Fabricarea unui site online sau a unui site profesional este acum la îndemâna tuturor. De aceea, site-ul dvs. de oră adaugă toate aceste caracteristici prin natura lor.
Nici un anunț nu vă rog!