Cum se configurează formularul de contact 7 în WordPress. Toate câmpurile (etichetele) formularului. Protecție împotriva spamului cu Really Simple CAPTCHA

Formularul de contact 7
  • Toate câmpurile formularului (etichete)
  • Cum se face obligatoriu unul dintre câmpuri: mail sau telefon
  • Câmpuri condiționate pentru suplimentul Formular de contact 7
  • Formular de contact 7 Supliment de validare personalizat

În articolul precedent, ne-am familiarizat cu pluginul Contact Form 7 și cu setările acestuia. Și aici, toate tipurile de câmp acceptate (etichete șablon de formular) și parametrii fiecăruia dintre ele, precum și stilurile (clasele CSS) ale elementelor de formular vor fi discutate în detaliu. Aceasta este o documentație neoficială pentru toate etichetele șablonului formularului Formular de contact 7.

Tipul câmpului determină tipul elementului de formular HTML: text, „radio”, „select”. Tipul câmpului este indicat în numele etichetei șablonului de formular.

Un exemplu de etichetă de câmp de text și codul HTML pe care îl va scoate:

De asemenea, fiecare etichetă (câmp) are propriile opțiuni (atribute de etichetă). Opțiunile de etichetă sunt specificate după titlu și numele câmpului. De exemplu, să adăugăm un atribut de clasă pentru câmpul de text anterior:

Sintaxa etichetei (câmpului) șablonului de formular:

Atributele etichetei (câmpului).

Puteți utiliza aceleași atribute (opțiuni) în diferite etichete de formular. Prin urmare, pentru a nu repeta descrierea fiecărui atribut pentru fiecare câmp de formular, vom plasa descrierea acestora într-o secțiune separată.

Atributele care pot fi aplicate numai unei anumite etichete de formular vor fi listate separat pentru fiecare etichetă.

* * imediat după tipul câmpului face câmpul obligatoriu.
Exemplu: id (linia) Nume de identificare. css attribute id, folosit pentru proiectarea câmpului.
Exemplu: id:clasa foo (linia) Numele clasei. Atribut de clasă css, folosit pentru proiectarea câmpului.
Exemplu: class:bar
Puteți specifica mai multe clase: minlength și maxlength (număr)

Acestea sunt atribute HTML5 care limitează introducerea caracterelor într-un câmp, atât printr-un prag inferior (minim), cât și printr-un prag superior (maxim). Utilizatorul nu va putea introduce mai puține caractere (minlength) sau mai multe caractere (maxlength) în câmp decât cele specificate de aceste valori.

Pentru minlength , dacă textul introdus este mai mic decât această valoare, utilizatorul va primi un avertisment „Câmpul este prea scurt”. Și invers pentru lungimea maximă.

Exemple:
lungime min: 10 -
lungime maxima: 90 -
ambele deodată -

În consecință, obținem un câmp de text care va emite un avertisment și scrisoarea nu va fi trimisă dacă în ea sunt introduse mai puțin de 10 sau mai mult de 140 de caractere.

Acești parametri acceptă următoarele tipuri de câmpuri: text, textarea, email, url, tel, quiz.

Există o intrare veche pentru acești parametri:

Parametrul maxlength are prioritate în mod explicit, deci dacă adăugați maxlength:150 , atunci 140 va fi rescris la 150.

mărimea (număr) Lățimea câmpului de text, care este determinată de numărul de caractere dintr-un font monospațiu. Poate fi suprascris în stilurile CSS folosind atributul width.
Exemplu: dimensiune: 50 -
Implicit: 40 implicit (șir/număr)

Valoarea implicită a câmpului.

Exemplu: default:value.

Dacă utilizatorul care completează formularul este autorizat, atunci în mod implicit puteți înlocui valoarea preluată din datele sale de profil. De exemplu, dacă specificați atributul default:user_email - , atunci câmpul va fi completat automat cu valoarea - „e-mailul utilizatorului curent” care vizualizează formularul...

Alte câmpuri speciale ale atributului implicit:

    implicit:post_meta- va obține valoarea metacâmpului a cărui cheie va fi egală cu numele câmpului. De exemplu: va afișa un câmp de formular a cărui valoare va fi setată la valoarea metacâmpului post mymeta_key

    implicit:get- va seta valoarea parametrului GET cu cheia egală cu numele câmpului: - http://example.com/?mykey=value

    implicit:post- va seta valoarea parametrului POST cu cheia egala cu numele campului: - in POST trecem datele mykey=value.

    implicit:shortcode_attr- va seta valoarea atributului shortcode cu cheia egală cu numele câmpului. De exemplu, eticheta șablonului de formular este: , apoi în codul scurt al formularului în sine, atunci când este apelat în conținutul postării, specificăm atributul mykey: . Citiți mai multe mai jos.

    De asemenea, trebuie să adăugați numele atributului codului scurt wordpress la lista albă (deoarece wordpress elimină toate atributele codului scurt necunoscut...). Acest lucru se face printr-un filtru:

    Add_filter("shortcode_atts_wpcf7", "my_shortcode_atts_wpcf7", 10, 3); funcția my_shortcode_atts_wpcf7($out, $pairs, $atts)( if(isset($atts["mykey"])) $out["mykey"] = $atts["mykey"]; return $out; )

Pentru caseta de selectare, radio și selectați:

  • implicit:număr - implicit:2- selectează al doilea element al listei...
  • implicit:numar_numar - implicit:2_3- selectează al doilea și al treilea element al listei (pentru selecții multiple și casete de selectare)...

Citiți mai multe despre Mod implicitși opțiunile sale, citiți la sfârșitul articolului.

Substituent sau filigran (linia)

Textul care va fi afișat în atributul substituent.

Această opțiune trebuie utilizată la sfârșitul tuturor opțiunilor de etichetă șablon: și nu

Poate fi folosit filigranîn loc de substituent, acesta este un sinonim (alias) al atributului.

Akismet (linia)

Protectie spam. Necesită instalarea și activarea pluginului Akismet.

  • akismet:autor -
  • akismet:author_email -
  • akismet:author_url -

Cum functioneaza? La trimiterea datelor, valorile câmpurilor specificate vor fi procesate pe serverul akismet și dacă nu trec verificarea, scrisoarea nu va fi trimisă, iar utilizatorul va vedea eroarea:

Mesajul va dispărea când vă concentrați pe oricare dintre câmpuri.

Etichete de șablon de formular (câmpuri)

Mai jos sunt toate etichetele de plugin pe care le puteți utiliza în șablonul de formular. Aceste etichete vor deveni elemente de intrare HTML, zona de text și elemente selectate.

Câmpurile de text includ următoarele tipuri: text, e-mail, url, tel, textarea, iar eticheta de numărare este strâns legată de câmpurile de text.

Există două tipuri de câmpuri numerice: număr și interval. Acestea sunt câmpuri HTML5, așa că browserele mai vechi nu le acceptă, afișând în schimb un câmp text.

text

Câmp text pe o linie.

Opțiuni acceptate (atribute):

  • clasă
  • minlengthȘi lungime maxima
  • mărimea
  • substituent
  • Mod implicit- puteți utiliza: user_login, user_first_name, user_last_name, user_nickname, user_display_name
  • akismet:autor

e-mail

Câmpul este destinat introducerii e-mailului.

Atribute acceptate:

  • clasă
  • minlengthȘi lungime maxima
  • mărimea
  • substituent
  • akismet:author_email
  • implicit:user_email sau implicit: [email protected]

url

Câmp pentru introducerea adresei de internet (URL).

Atribute acceptate:

  • clasă
  • minlengthȘi lungime maxima
  • mărimea
  • substituent
  • akismet:author_url
  • default:user_url sau valoare implicită

tel

Câmp pentru introducerea unui număr de telefon.

Atribute acceptate:

  • clasă
  • minlengthȘi lungime maxima
  • mărimea
  • substituent

zona textului

Câmp pentru introducerea textului pe mai multe rânduri.

Atribute acceptate:

  • clasă
  • minlengthȘi lungime maxima
  • substituent
  • (cols)x(rânduri)- unde cols este lățimea câmpului în caractere, iar rândurile este înălțimea câmpului în rânduri de text. Are 3 formate: (cols)x(rows) , (cols)x și x(rows) .

Pentru textarea, valoarea câmpului poate fi specificată în două moduri:

  1. Text implicit...

Dacă textarea conține etichete html, atunci după trimiterea formularului este posibil să primiți o eroare de server 500!

numărare (contor de caractere)

Eticheta de numărare vă permite să setați un contor atunci când doriți să arătați utilizatorului câte caractere au fost introduse sau câte caractere au rămas până la valoarea maximă (dacă parametrul este lungimea maximă).

Pentru a activa contorul, trebuie să inserați o etichetă de contor în șablonul de formular care indică numele câmpului de text pentru care va număra caracterele.

Eticheta de contor poate fi folosită oriunde în șablonul de formular.

De exemplu, avem un câmp text pentru un mesaj:

Apoi facem asta:

Câmpul este limitat la minimum 10 și maximum 140 de caractere. În acest caz, contorul va arăta câte caractere au fost introduse.

Uneori este mai convenabil să arăți câte caractere mai sunt de introdus, deoarece utilizatorul nu știe despre limita maximă. Pentru a face acest lucru, trebuie să specificați opțiunea jos - în etichetă.

număr

Câmp pentru introducerea unui număr. Când câmpul are focalizare, valorile pot fi modificate prin rotirea rotiței mouse-ului.

Suporta atribute:

  • clasă
  • substituent
  • min
  • max

gamă

Glisor pentru a selecta numerele din intervalul specificat.

Suporta atribute:

  • clasă
  • substituent- sunt afișate doar în browserele care nu acceptă acest tip de câmp și afișează în schimb un câmp text.
  • min- Setează valoarea inferioară pentru introducerea unui număr: min:20
  • max- Setează valoarea superioară pentru introducerea unui număr: min:100
  • Etapa- Setează pasul de schimbare a numărului pentru glisoare și câmpurile de introducere a numărului: min:5

casetă de selectare și radio

  • Butoane radio- Acestea sunt comutatoare care vă permit să selectați o singură opțiune din mai multe.
  • Casete de selectare- Acestea sunt casete de selectare care vă permit să selectați mai multe opțiuni simultan.

Atribute acceptate:

  • Mod implicit- Valoarea implicită a câmpului, de exemplu implicit:2, înseamnă că atunci când câmpul este afișat, a doua opțiune de răspuns va fi deja selectată. Pentru casetele de selectare puteți specifica mai multe valori ca aceasta implicită:1_2_3

    first_as_label- În mod implicit, caseta de selectare (butonul radio) este mai întâi, iar apoi inscripția (ea). Trecând acest parametru, le veți schimba.

    use_label_element- Include o casetă de selectare sau un buton radio într-o etichetă, care vă permite să selectați un element făcând clic pe numele acestuia.

    exclusiv- Prin specificarea acestui parametru, doar 1 element poate fi selectat din caseta de selectare. Această funcționalitate se bazează pe JavaScript. Butoanele radio nu acceptă această opțiune din cauza naturii lor specifice.

    text_liber- Vă permite să adăugați un câmp de text la ultimul element. Acesta devine disponibil pentru completare atunci când ultimul element este selectat și utilizatorul își poate completa răspunsul.

  • date- Obține o valoare dintr-o foaie cu țări din lume, de exemplu data:countries .

China India San Marino

Selectați

Vă permite să selectați opțiunile de răspuns dintr-o listă derulantă. Poate fi folosit în două moduri:

Atribute:

  • clasă
  • Mod implicit- implicit:2 sau implicit:2_3_4
  • multiplu- Vă permite să selectați mai multe opțiuni de răspuns
  • include_blank- Adăugați linia „- - -” ca primă opțiune de răspuns
  • first_as_label
  • date
  • articole- opțiuni de răspuns

Data

Câmp pentru selectarea unei date calendaristice. Acesta este un tip HTML5 și nu este acceptat de browserele mai vechi.

Atribute:

  • clasă
  • substituent
  • min- Valoarea mai mică a unei date posibile, de exemplu min:2016-01-01 . Formatul de dată relativă este acceptat, de exemplu astăzi+10 zile, astăzi-2 săptămâni și așa mai departe.
  • max- Valoarea superioară a unei date posibile, de exemplu min:2017-01-01 . Formatul de dată relativă este acceptat, la fel ca min .
  • Etapa- Pasul de schimbare a datei în zile, de exemplu pasul:3. Dacă valoarea inferioară este 2016-01-01 și pasul 3, atunci pasul următor va afișa data 2016-01-04 și așa mai departe.

Când introduceți o etichetă într-un șablon de scrisoare, veți primi o dată pe e-mail în formatul AAAA-LL-ZZ (25-12-2016) - acest lucru nu este clar. Prin urmare, puteți specifica un șablon mai vizual; pentru a face acest lucru, utilizați construcția [_format_(nume câmp) "(format dată)"]

[_format_data-ta „D, d M y”]

reCAPTCHA (protecție împotriva spamului)

Formularul de contact 7, începând cu versiunea 4.3, împreună cu serviciul reCAPTCHA, vă permite să luptați împotriva spam-ului. Pentru a utiliza reCAPTCHA trebuie să aveți un cont Google, de unde puteți obține chei pentru a utiliza API-ul serviciului.

Pentru a obține aceste chei aveți nevoie de:

  1. Mergi la panoul de administrare reCAPTCHA.
  2. Înregistrați un site.
  3. Obțineți o cheie de site și o cheie secretă (acestea sunt două chei diferite: poate exista o cheie de site, dar există multe chei secrete).

Atribute:

  • clasă
  • temă- Schema de culori widget. Poate fi întunecat sau deschis (implicit).
  • mărimea- Dimensiunea widget-ului. Poate fi compact (compact) sau normal (implicit).

Acum, în șablonul de formular, utilizați eticheta.

Test (întrebare-răspuns)

În acest câmp, utilizatorului i se pune o întrebare și trebuie să îi răspundă, altfel scrisoarea nu va fi trimisă. Câmpul a apărut când a fost luptat împotriva spamului folosind litere captcha (încă nu a existat reCAPTCHA). Utilizarea literelor captcha a impus restricții atât pe server (erau necesare biblioteci grafice), cât și asupra persoanei (erori de percepție vizuală). Această metodă a rezolvat aceste neajunsuri.

Atribute:

  • clasă
  • mărimea- Dimensiunea și lungimea câmpului. Una dintre valori poate fi omisă.

Exemplul arată că întrebarea și răspunsul sunt separate prin semnul | . Întrebarea și răspunsul pot fi scrise în absolut orice mod, de exemplu matematic:

Puteți specifica mai multe perechi întrebare-răspuns; întrebarea va fi selectată aleatoriu de fiecare dată când este afișat formularul:

Pentru acest câmp, puteți specifica parametrii minlength și maxlength:

Când creați o etichetă de test cu mai multe întrebări folosind un generator, scrieți fiecare pereche întrebare-răspuns pe un rând nou.

ascuns

Câmp ascuns - nu este vizibil pentru utilizator. Poate stoca informații valoroase. Informațiile pot fi adăugate folosind Javascript sau create folosind opțiunea implicită.

Atribute:

  • clasă
  • Mod implicit- Puteți trece aici un parametru care va fi convertit conform unei anumite reguli. Citiți mai multe în descrierea atributului (opțiuni de la începutul articolului).

Trimite

Buton pentru trimiterea datelor formularului (trimitere). Când faceți clic pe acest buton, toate datele formularului sunt trimise la server.

Atribute:

  • clasă

Puteți specifica textul butonului:

Un exemplu de utilizare a tuturor parametrilor acceptați:

ajax-loader

Vă rugăm să rețineți că eticheta în care se încarcă pictograma de descărcare dacă dai clic pe trimite formularul, se adaugă împreună cu butonul de trimitere, sau mai degrabă după el.

Deci, de exemplu, dacă înlocuiți eticheta cu un buton HTML gata făcut. Acest lucru este uneori necesar atunci când aspectul butoanelor nu este adecvat. De exemplu, dacă doriți ca butonul de trimitere să arate astfel: