[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0 ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: cea mai ușoară temă WordPress de utilizat

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62.

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ă.

Lista stilurilor de contact de 6Pentru 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 ".

Exemplu de formular de contact wordpress2. Formular de contact Skins 7

Pentru a utiliza Skins Formular de contact 7, creați un nou formular de contact și derulați în jos în 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.

Formular de contact pagină șablon wordpress

Așa arată formularul de sondaj cu stilul Topaz folosind tema Douăzeci și Cincisprezece.

Exemplu de formular de contact 7

3. Proiectarea materialului pentru formularul de contact

Aceste stiluri se bazează pe stilul Material design.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați Ușor și Gratuit orice site web sau design de blog cu aspect profesional. Nu mai plătiți mult pentru un site web pe care îl puteți face singur.

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.

Exemplu de proiectare material formular de contact 7Testul formularului de contact 7 pe 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 întuneric coral

Formular de contact cu tema WordPress ColorMag

Iată formularul fără stil personalizat. Moștenește culoarea butonului albastru Tema WordPress ColorMag.

Formular de contact cu tema colormagAm î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.

Vrei să-ți vinzi produsele pe internet?

Descărcați gratuit WooCommerce, cele mai bune pluginuri de comerț electronic pentru a vă vinde produsele fizice și digitale pe WordPress și pentru a vă crea cu ușurință magazinul online. Perfect pentru incepatori.

Iată formularul rezultat:

Rezultatul personalizării unui formular de contact 7Iată codul:

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 cele mai populare pluginuri de formulare de contact de pe WordPress. Oferă o mulțime de caracteristici, cum ar fi trimiterea către mai mulți destinatari, suport pentru animație, crearea nelimitată a formularelor, stiluri diferite și o mare varietate de opțiuni de personalizare suplimentare.

W8 formular de contact wordpress plugin formular de contact

Î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.

Contactați-ne din formularul Wordpress pentru formularul de contact

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 plugin 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.Pluginul pop-up Wordpress slick popup pro

Formularul popup poate avea mai multe utilizări, inclusiv: un formular de colectare a informațiilor, un 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. 

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ă.

...  

106 acțiuni
acțiune4
tweet
Registru102