Cum să adăugați formulare de contact utilizând pluginul – P1: utilizați formularul de contact 7

Formularul de contact este unul dintre cele mai importante elemente dacă vrei să ai un site web profesionist. Nu este chiar dificil să creezi și să configurați un formular de contact dacă utilizați pluginuri dedicate. Pentru a vă ajuta să creați formulare de contact cu pluginuri ușor și rapid, am compilat și scris instrucțiuni despre cum să utilizați cele mai populare pluginuri pentru formulare de contact.

În prima parte a seriei „Formular de contact”, să aflăm:

• Ce este formularul de contact?
• Beneficiile formularului de contact
• Cum să utilizați pluginul Contact Form 7 pentru a crea un formular?

Ce este formularul de contact și beneficiile acestuia?

Ce este Formularul de Contact?

Formularul de contact este un termen familiar pentru marketeri. Folosind formularul de contact, utilizatorii pot trimite e-mailuri și vă pot contacta direct pe site, fără a vă cunoaște adresa de e-mail.

Un formular de contact are de obicei multe câmpuri pentru ca utilizatorii să completeze informațiile solicitate, cum ar fi e-mail, număr de telefon, nume, conținut de e-mail, ... În plus, este de obicei plasat pe o pagină de contact sau în zona în care trebuie să obțineți informațiile de contact ale clienților. . Iată un exemplu:

Beneficiile formularului de contact

Deoarece utilizatorii pot folosi formularul de contact pentru a trimite informații proprietarului site-ului (pentru a-și lăsa informațiile de contact, pentru a trimite cereri de asistență sau alte solicitări, …) chiar pe site-ul respectiv, contactul face mult mai comod și mai rapid.

În plus, utilizarea unui formular de contact vă poate menține e-mailul privat, precum și poate reduce spamul și amenințările de securitate. Prin urmare, nu va trebui să aveți de-a face cu căsuța poștală plină de spam și gunoi în fiecare zi.

De asemenea, formularele de contact vă ajută să culegeți mai ușor informațiile utilizatorilor deoarece aceștia trebuie să completeze informațiile pe care le solicitați în formular. Aceasta este una dintre strategiile pentru a obține mai multe clienți potențiali.

În general, pentru a construi un site web profesional și pentru a obține mai multe beneficii pentru afacerea dvs., ar trebui să utilizați formulare de contact.

Cum se creează un formular de contact

Puteți codifica pentru a crea câmpuri și formulare după cum doriți. Cu toate acestea, dacă nu sunteți un programator, acest lucru nu este posibil. Sau trebuie să plătiți o sumă de bani angajând un programator pentru a face acest lucru.

Prin urmare, cea mai utilă soluție pentru a crea formulare de contact pentru utilizatorii non-tech, sau chiar pentru dezvoltatori (pentru a economisi timp și efort) este utilizarea unui plugin. Acum, există o mulțime de pluginuri de formulare de contact care sunt simple, ușoare, rapide și gratuite. Deci, nu există niciun motiv pentru a nu le folosi pentru a crea un formular de contact, nu?

În toate articolele acestei serii, vă voi arăta cum să creați un formular de înregistrare la universitate, după cum urmează:

Creați un formular utilizând formularul de contact 7

În acest prim articol al seriei „Creați un formular de contact folosind pluginuri”, folosesc Formularul de contact 7 – unul dintre cele mai populare pluginuri gratuite pentru formulare de contact disponibile astăzi.

În primul rând, descărcați și instalați acest plugin din depozitul de pluginuri de pe wordpress.org sau accesați Dashboard > Plugin > Add New pentru a-l instala și activa.

Formularul de contact 7

Autor(i): Takayuki Miyoshi

Versiunea curentă: 5.5.3

Ultima actualizare: 28 noiembrie 2021

contact-form-7.5.5.3.zip

82% Evaluări 5.000.000+ Instalări WP 5.7+ Necesită

Iată instrucțiuni specifice pentru a crea formularul de înregistrare la universitate de mai sus cu acest plugin.

Interfață

Accesați Tabloul de bord > Contact > Adăugați nou pentru a crea un nou formular de contact. Iată interfața cu care vei lucra:

(1): Introduceți numele formularului de contact
(2): File pentru a crea și configura un formular de contact, inclusiv:

• Fila Formular : creați câmpuri pentru formularul de contact
• Fila E-mail : configurați e-mailurile pe care le primiți din formularul de contact
• Fila Mesaj : includeți notificările pe care utilizatorii le primesc atunci când există o eroare de imputare a datelor, formularul nu poate fi trimis, trimiterea formularului cu succes, …
• Fila Setări suplimentare : adăugați alte elemente la formularul de contact.

Creați câmpuri pentru formularul de contact

După cum am menționat, un formular de contact conține câmpuri care permit utilizatorilor să introducă informații sau să interacționeze cu acestea. Iată fila Formular care este folosită pentru a crea aceste câmpuri:

(1) constă din câmpuri de adăugat la formular, cum ar fi nume, e-mail, număr, butonul de trimitere, … Pentru a adăuga orice câmp, trebuie doar să faceți clic pe numele câmpului corespunzător.

(2) este zona pentru afișarea structurii formularului în format HTML. Când creați un formular de contact nou, veți avea structura implicită pentru un formular de bază cu câmpuri simple, cum ar fi e-mail, nume, subiect și butonul de trimitere. Puteți utiliza acest formular imediat sau puteți crea un formular nou pe baza acestuia.

Instrucțiuni generale pentru câmpuri

După alegerea câmpului dorit, va apărea o fereastră pop-up în care introduceți informațiile necesare în câmp. Fiecare câmp necesită informații diferite, dar, în general, toate au următoarele secțiuni:

Nume : atribut nume
Valoare implicită : valoarea implicită a câmpului
Atribut Id : ID-ul câmpului
Atribut de clasă : clasa câmpului

Notă : atributul ID și atributul Class sunt opționale și puteți introduce informațiile personalizate acolo. Dacă doriți ca următorii pași de stilare a formularului de contact să fie mai ușor, ar trebui să completați aceste 2 secțiuni.

După completarea acestor informații, veți vedea eticheta câmpului pe care l-ați creat în partea de jos a acestei casete. Faceți clic pe Inserare etichetă pentru a insera acest câmp în codul HTML al formularului.

În mod normal, eticheta fiecărui câmp dintr-un formular de contact creat cu Formularul de contact 7 va avea următoarea structură:

 [field* name_attribute id:field_id class:field_class „valoarea implicită a câmpului”]

Explicatii:

• field * este tipul de câmp pe care îl alegeți. Aceasta este partea cea mai importantă și obligatorie a unui domeniu.
• * înseamnă că acest câmp este obligatoriu. Dacă nu doriți să forțați utilizatorii să îl introducă, eliminați * .

Pentru a înțelege mai multe despre structura unei etichete de câmp din Formularul de contact 7, consultați această documentație. Înțelegerea semnificației și structurii HTML a unui formular de contact vă va facilita editarea, crearea și adăugarea de câmpuri noi folosind cod. În special cu codificatori, aceștia pot scrie cod HTML pentru a crea formularul conform sintaxei de mai sus. Cu toate acestea, cu non-coder, poate fi dificil, așa că vă recomand să urmați acești pași de mai jos.

Cu formularele de contact din această serie, trebuie să aleg următoarele câmpuri:

Toate câmpurile au informațiile comune pe care le-am spus mai sus. Prin urmare, doar ghidez părțile specifice ale fiecărui domeniu acum.

Mai jos sunt instrucțiuni detaliate pentru fiecare câmp.

Creați un câmp pentru introducerea numelui

Selectați câmpul de text și introduceți informațiile de bază pentru câmp în casetă:

În secțiunea Tip câmp , puteți alege solicita, astfel încât acest câmp să fie obligatoriu să fie completat (acest lucru este opțional).

Notă : în secțiunea Valoare implicită , alegeți Utilizați acest text ca substituent al câmpului pentru a afișa acest conținut în câmp înainte ca utilizatorii să introducă date. Ar trebui să utilizați acest mod pentru a explica utilizatorilor ce trebuie să completeze câmpul.

Secțiunea Akismet este legată de pluginul Akismet – un plugin anti-spam. Dacă nu aveți acest plugin, atunci nu vă pasă de această secțiune.

Creați un câmp pentru introducerea numărului de telefon

Selectați câmpul numeric și completați informațiile de bază pentru câmp.

În secțiunea Tip câmp , alegeți un tip pentru acest câmp. Există două tipuri de câmpuri: Spinbox și Slider .

Glisorul va afișa o scară pentru alegerea numărului, după cum urmează:

Acest stil este potrivit pentru notarea sau alegerea numerelor pe baza unei anumite scale.

Între timp, Spinbox vă permite să introduceți orice număr, succesiunea numerelor din câmp precum numărul de telefon, numărul cardului, numărul cărții de identitate, … Așa că în acest exemplu aleg Spinbox.

Secțiunea Interval vă permite să alegeți o limită pentru număr. În acest exemplu, nu am nevoie de această secțiune, așa că nu am completat nimic.

Creați un câmp pentru selectarea specializărilor și a locațiilor de studiu

Cu acest câmp, selectați meniul drop-down .

Acum, completați opțiunile pentru specializări și locații în secțiunea Opțiuni , rețineți că fiecare opțiune este o linie.

Dacă doriți să permiteți utilizatorilor să selecteze mai multe opțiuni simultan, faceți clic pe Permite selecții multiple .

Creați un câmp pentru alegerea scopului înregistrării

Selectați câmpul casetei de selectare .

Secțiunea Opțiuni este similară cu cea din câmpul meniul drop-down de mai sus. În plus, există mai multe opțiuni pentru casetele de selectare, după cum urmează

• Pune o etichetă mai întâi, apoi o casetă de selectare
• Înfășurați fiecare articol cu ​​element de etichetă
• Faceți casetele de selectare exclusive (aveți voie să alegeți doar o opțiune).

Creați butonul de trimitere

În cele din urmă, selectați câmpul de trimitere și completați doar informațiile ca următoarea cerință (rețineți că Eticheta este cuvântul care va apărea pe acest buton, de exemplu „Trimite”, „Înregistrează”, „Confirmă”).

În special, atunci când creați un formular nou, acest plugin a creat deja automat un câmp trimis. Prin urmare, puteți utiliza acest câmp fără a crea unul nou.

Adăugați etichete pentru câmpuri

Acum ați terminat de creat câmpuri pentru formularul de contact. Cu toate acestea, câmpurile dvs. nu au avut un nume de afișat în formularul de contact, după cum urmează:

Prin urmare, trebuie să adăugați etichete la câmpuri inserând următoarea structură de cod în partea HTML a formularului:

 <label> Etichetă de câmp
[Eticheta câmpului] </label>

Apoi, scrieți eticheta câmpului în secțiunea Field Label . Apoi completați toate informațiile de mai sus, faceți clic pe Salvare .

După crearea câmpurilor, formularul meu de contact are următoarea structură de cod, rețineți că am aranjat câmpurile pentru a le afișa în poziția dorită pe front end:

 <label> Numele dvs. (obligatoriu)
[text* your-name "introduceți numele dvs."] </label> 

<label> Numărul dvs. de telefon
[substituent pentru numărul de telefon „introduceți numărul de telefon”] </label> <label> E-mailul dvs. (obligatoriu)
[email* your-mail „introduceți adresa de e-mail”] </label>

<label> Major
[selectați* majoră „Informatică” „Lingvistică” „Agricultură” „Inginerie” „Comerț electronic”] </label>
<label> Locație de studiat 
[selectați* Locație pentru studiu „New York” „Chicago” „Los Angeles” „Washington DC” „Houston” „Philadelphia”] </label>

</label> Înregistrați-vă la
[checkbox* register label_first „Studiați” „Faceți un tur” „Consultați”] </label>

[trimiteți „Trimiteți”]

De data aceasta, formularul dvs. de contact încă nu apare pe site. Trebuie să faceți mai mulți pași pentru a-l afișa pe partea frontală.

Setări formular de contact

Configurați e-mailul

Fila Mail vă permite să personalizați conținutul e-mailului pe care îl veți primi atunci când formularele de contact sunt trimise de către utilizatori. Pentru a configura această secțiune, trebuie să inserați etichete de e-mail ale câmpurilor din formularul de contact pe care tocmai l-ați creat. Iată un exemplu:

Explicatii:

• Către : Introduceți adresa de e-mail a persoanei care se ocupă de verificarea formularului de contact.
• De la și Subiect : ar trebui să setați un nume aici pentru a determina cine trimite acest formular de contact.
• Corpul mesajului : adăugați aici etichete de e-mail pentru a vă asigura că atunci când primiți e-mailuri din formularul de contact, acesta va afișa toate informațiile pe care le solicitați de la utilizatori.

Alte setari

fila Mesaj

Introduceți mesajele care sunt utilizate în situațiile așa cum puteți vedea în descrierea filei. De exemplu, după ce utilizatorii trimit formularul cu succes sau nu îl trimit, ar trebui să adăugați un mesaj pentru a le informa despre acest lucru. Sau atunci când utilizatorii uită un câmp obligatoriu, ar trebui să adăugați și un mesaj, astfel încât utilizatorii să poată reveni pentru a completa acel câmp. Deși acestea sunt mici detalii, ar trebui să acordați atenție pentru a îmbunătăți experiența utilizatorului.

Fila Setări suplimentare

Această filă vă ajută să adăugați fragmente de cod pentru a instala următoarele:

• Modul numai pentru abonați
• Modul demonstrativ
• Sari peste e-mail
• Acceptare ca validare
• Setări Flamingo
• Suprimarea stocării mesajelor
• Cod JavaScript

Există câteva părți destul de utile pe care ar trebui să le utilizați, cum ar fi:

• Modul numai pentru abonați : acest mod permite numai utilizatorilor conectați pe site-ul dvs. web să trimită formularul de contact. Acest lucru elimină mesajele spam și este doar pentru cei care doresc cu adevărat să vă contacteze.
• Acceptare ca validare : adăugați o funcție pentru a afișa notificări pentru caseta de validare Acceptare atunci când utilizatorii nu bifează această casetă, ci se deplasează la alt câmp. Deoarece, în mod implicit, dacă utilizatorii nu bifează caseta de validare Acceptare, mesajul de eroare se va afișa numai după ce trimit formularul. Această casetă de validare Acceptare este adesea folosită pentru a crea câmpuri precum „Sunt de acord cu termenii site-ului”, dar în cazul în care creați alte tipuri de conținut, poate fi necesar să adăugați Acceptare ca validare .

Pentru a afla mai multe despre celelalte funcții din fila Setări suplimentare , puteți citi mai multe aici.

Afișați formularul de contact pe site

Pasul final este afișarea formularului de contact pe care tocmai l-ați creat pe site.

Încă la interfață pentru a crea un formular nou, copiați shortcode-ul și lipiți-l pe pagina sau postarea dorită.

Iată rezultatele mele finale:

Cu toate acestea, formularul meu de contact nu arată foarte bine, așa că trebuie să-l modelez puțin.

Dacă doriți să modificați formularul de contact ca șablonul pe care l-am oferit la începutul acestui articol, va trebui să editați HTML-ul formularului după cum urmează, pentru a fi mai ușor de stilat:

 <div class="form__field form__full-width">
<label>Numele dvs. (obligatoriu)
[text* substituent pentru numele dvs. „introduceți numele dumneavoastră”]
</label>
</div>
<div class="form__field">
<label>Numărul dvs. de telefon
[substituent pentru numărul de telefon „introduceți numărul de telefon”]
</label>
</div>
<div class="form__field">
<label>Adresa de e-mail (obligatoriu)
[e-mail* substituent pentru e-mailul dvs. „introduceți adresa de e-mail”]
</label>
</div>
<div class="form__field">
<label>Major
[selectați* secțiunea „Informatică” „Lingvistică” „Agricultură” „Inginerie” „Comerț electronic”]
</label>
</div>
<div class="form__field">
<label>Locația de studiu
[selectați* Locație pentru studiu „New York” „Chicago” „Los Angeles” „Washington DC” „Houston” „Philadelphia”]
</label>
</div>
<div class="form__field form__full-width">
<label>Înregistrați-vă la
[checkbox* register use_label_element „Studiați” „Faceți un tur” „Consultați”]
</label>
</div>
<div class="form__field form__full-width">
[trimiteți „Trimiteți”]</div>

Apoi accesați Personalizatorul temei > CSS suplimentar și inserați următorul cod:

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

În cele din urmă, faceți clic pe Publicare pentru a salva.

Ultimele Cuvinte

Când utilizați pentru prima dată Formularul de contact 7, este posibil să găsiți că nu este familiarizat cu HTML dacă nu sunteți un programator. Totuși, după ce am citit acest tutorial, cred că totul a devenit mai ușor, nu?

Dacă doriți să încercați să creați un formular de contact cu alte instrumente, așteptați cu nerăbdare următorul meu articol din această serie. Ce plugin vrei să sugerezi? Lasă un comentariu sub acest articol!