Vajate kontaktivormi, mis kohandub kasutaja valikutega: tehniline tugi näitab üht väljade komplekti, müük hoopis teistsugust. Tavaline Contact Form 7 ei suuda seda teha. Ilma tingimusliku loogikata kuvab leht korraga kõik väljad, millest pooli külastaja ei vaja. See näeb segane välja ja tekitab segadust.

Conditional Fields** for Contact Form 7** plugin lahendab selle probleemi: väljad ilmuvad ja kaovad sõltuvalt sellest, mida kasutaja valib. Allpool on samm-sammuline juhend päris tugivormi loomiseks, alates pluginast kuni personaliseeritud e-kirja vastusteni. Sama lähenemine skaleerub kalkulaatoritele, küsitlustele ja mitmeetapilistele taotlustele.

💡 Kiirülevaade:

• Paigalda CF7 ja Conditional Fields, loo põhivorm koos päringu tüübiga
• Paki väljagrupid [group]…[/group] sisse, seadista kuvamistingimused vahekaardi „Conditional fields" kaudu
• Ehita lõplik vorm pesastatud gruppide, dünaamiliste siltide ja kohandatud „Muu" haruga
• Seadista personaliseeritud e-kiri: erinev tekst ja erinevad väljakomplektid tehnilisele toele ja müügile

Mida tingimuslikud väljad pakuvad

Contact Form 7 on kõige populaarsem vormiehitaja WordPressile: 10+ miljonit aktiivset paigaldust, minimaalne ülekoormus. Kuid vaikimisi on see staatiline: kõik väljad on kogu aeg nähtaval. Kui vormil on kolm loogikaharu (tehniline tugi, müük, partnerlus), näeb külastaja üheksat lisavälja, millel pole nende päringuga mingit pistmist.

Conditional Fields for Contact Form 7 lisab „kui-siis" loogika otse vormiredaktorisse. Plugin on tasuta, sellel on WordPress.org-is hinnang 4,8 ja 100 000+ aktiivset paigaldust. Autor Jules Colle arendab ka Pro versiooni, millel on korduvad väljad, mitmeetapilised vormid ja arvutatud väärtused.

Oluline: plugin ei eemalda peidetud välju märgendist; see peidab need ainult JavaScripti abil. Seetõttu saadetakse kõik peidetud gruppide sees olevad väljad ikkagi serverisse. Väljanimed peavad olema unikaalsed isegi erinevates gruppides, vastasel juhul kirjutatakse väärtused üle. See on reegel number üks ja praktikas on see kõige levinum komistuskivi.

Paigaldamine ja esialgne vorm

Paigalda mõlemad pluginad läbi Plugins → Add New:

• Contact Form 7, vormiehitaja ise
• Conditional Fields for Contact Form 7, tingimusloogika mootor

Pärast aktiveerimist mine Contact → Add New ja kleebi vormi mall. Veel ei ole tingimuslikke gruppe, lihtsalt kõik väljad korraga:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
8
 
9
In case you selected Technical support:
10
Please specify your OS version: [text version]
11
 
12
In case you selected Sales:
13
Where is your business located? [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
14
 
15
[textarea comments]
16
 
17
[submit "Send"]

Selline näeb vorm välja ilma loogikata: operatsioonisüsteemi valik ja tehnilise toe väljad on alati nähtavad, isegi kui külastaja valis „Müük". Valikut „Muu OS" pole üldse ja versioonivälja silt ei muutu valitud süsteemist sõltuvalt. Parandame selle gruppidega.

Väljagruppide loomine

Grupp on siltide paar [group group-name] ... [/group]. Kõik nende vahel on vaikimisi peidetud ja ilmub ainult siis, kui tingimus käivitub. Grupid võivad olla üksteise sees pesastatud, mis tuleb kasuks kaskaadloogika puhul.

Vormiredaktoris klõpsa tekstiala kohal nuppu Conditional group; see lisab sildid automaatselt.

Ilmuvas aknas määra grupi nimi ja valikud:

• Clear on hide tühjendab kõik grupisisesed väljad, kui see muutub peidetuks. Kasulik selleks, et nähtamatute väljade väärtusi ei saadetaks e-kirjas.
• Inline kuvab grupi reasisese elemendina. Abiks, kui on vaja tekstitükk otse lausesse põimida (näitan seda hiljem).

Loo esimene grupp technical-support-selected ja liiguta operatsioonisüsteemi ja versiooni väljad sinna sisse:

1
[group technical-support-selected]
2
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
3
  [group os-selected]
4
    Please specify your OS version: [text version]
5
  [/group]
6
[/group]

Siin on juba kaks gruppi, üks teise sees. Välimine (technical-support-selected) tähistab fakti, et tehniline tugi valiti. Sisemine (os-selected) on OS-i versiooni täpsustus, mis ilmub AINULT siis, kui kasutaja valib konkreetse operatsioonisüsteemi. Ilma tingimuseta jäävad mõlemad grupid praegu nähtamatuks.

Sama müügiosakonna jaoks:

1
[group sales-support-selected]
2
  Where is your business located?
3
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
4
[/group]

Salvesta vorm ja grupid kaovad esiküljelt. See on normaalne: tingimusi pole veel seatud.

Tingimusloogika seadistamine

Pärast vormi salvestamist ava Tingimusväljade vahekaart. Seal on kaks režiimi: visuaalne (rippmenüüd) ja tekstirežiim (kirjutad reeglid käsitsi). Tekstirežiim on keerukate vormide puhul kiirem, seega kasutame seda.

Klõpsa Lisa uus tingimusreegel ja sisesta esimene reegel:

1
show [technical-support-selected] if [support-type] equals "Technical support"

Süntaks on lihtne: show <group> if <field> equals "<value>". Pärast reegli salvestamist muutub grupp technical-support-selected nähtavaks kohe, kui kasutaja valib rippmenüüst „Technical support".

Lisa müügiosakonna reegel:

1
show [sales-support-selected] if [support-type] equals "Sales"

Nüüd lülitub vorm kahe haru vahel, kuid tehnilise toe sees kuvatakse versiooniväli endiselt kogu aeg. Peame selle nähtavale tooma alles pärast konkreetse OS-i valimist:

1
show [os-selected] if [operating-system] not equals ""

Kontroll not equals "" töötab, sest kasutame first_as_label atribuuti; väärtust -- Choose your operating system -- ei loeta valituks. Väli operating-system on tühi seni, kuni külastaja mõnel valikul klikib.

Edasi: lisame OS-i rippmenüüsse valiku „Muu". Kui kasutaja valib „Muu", ei tea me, mis OS tal on, seega anname talle kaks tekstivälja: süsteemi nimi ja versioon. Vajame uut gruppi os-other-selected ja reeglit AND-operaatoriga:

1
show [os-selected] if [operating-system] not equals ""
2
               and if [operating-system] not equals "Other"
3
show [os-other-selected] if [operating-system] equals "Other"

Kaks reeglit ühe grupi jaoks: esimene kuvab os-selected iga OS-i puhul, välja arvatud „Muu", teine kuvab os-other-selected ainult „Muu" korral. Loogika on teineteist välistav, seega konflikte ei teki.

Lõplik vorm: dünaamilised sildid ja „Muu" haru

Nüüd paneme kõik kokku. Lisame reasisesed grupid, mis muudavad versioonivälja silti sõltuvalt valitud OS-ist (Android, iOS, Linux või Windows). Sildi tekst on gruppi otse sisse kirjutatud ja ilmub ainult siis, kui tingimus on täidetud:

1
Your name: [text your-name]
2
Your email address: [email your-email]
3
 
4
What kind of support do you want?
5
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]
6
 
7
[group technical-support-selected]
8
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows" "Other"]
9
 
10
  [group os-selected]
11
    Please specify your [group os-android inline]Android[/group][group os-ios inline]iOS[/group][group os-linux inline]Linux[/group][group os-windows inline]Windows[/group] version:
12
    [text version]
13
  [/group]
14
 
15
  [group os-other-selected]
16
    Please specify your OS and version.
17
    [text other-os "Operating System"][text other-version "Version"]
18
  [/group]
19
[/group]
20
 
21
[group sales-support-selected]
22
  Where is your business located?
23
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]
24
[/group]
25
 
26
[textarea comments]
27
 
28
[submit "Send"]

Võtmepunkt: reasisesed grupid OS-i nimedega ([group os-android inline]Android[/group]). Atribuut inline muudab grupi reasiseseks elemendiks, nii et sildi tekst ei murdu lõikudeks. Nende gruppide tingimused vahekaardil Tingimusväljad:

1
show [technical-support-selected] if [support-type] equals "Technical support"
2
show [sales-support-selected] if [support-type] equals "Sales"
3
show [os-selected] if [operating-system] not equals ""
4
               and if [operating-system] not equals "Other"
5
show [os-android] if [operating-system] equals "Android"
6
show [os-ios] if [operating-system] equals "iOS"
7
show [os-linux] if [operating-system] equals "Linux"
8
show [os-windows] if [operating-system] equals "Windows"
9
show [os-other-selected] if [operating-system] equals "Other"

Klõpsa Salvesta tingimused, seejärel salvesta vorm. Kopeeri lühikood [contact-form-7 id="..." title="..."] lehele ja testi seda esiküljel. Harude vahel vahetamine peaks toimuma koheselt, ilma lehe uuesti laadimiseta.

E-kirja vastuse isikupärastamine

Tingimusgrupid ei tööta mitte ainult vormis, vaid ka e-kirja mallis. See tähendab, et kasutaja võib saada erineva e-kirja sõltuvalt sellest, mille ta valis.

Ava vormiredaktoris E-kirja vahekaart. Väljal Sõnumi sisu mähi tekst samadesse gruppidesse, mida kasutasid vormis:

1
[technical-support-selected]
2
Thank you for submitting your technical support question
3
[/technical-support-selected][sales-support-selected]
4
Thank you for your sales question
5
[/sales-support-selected]

Sulgev silt [/technical-support-selected] ja avav silt [sales-support-selected] lähevad otse teineteise kõrvale, ilma tühikuta; vastasel juhul tekib e-kirja täiendav reavahetus.

Lisame nüüd tabeli täidetud väljadega. Igas grupis loetleme AINULT asjakohased väljad:

1
<table>
2
<tr><td>your-name</td><td>[your-name]</td></tr>
3
<tr><td>your-email</td><td>[your-email]</td></tr>
4
<tr><td>support-type</td><td>[support-type]</td></tr>
5
[technical-support-selected]
6
  <tr><td>operating-system</td><td>[operating-system]</td></tr>
7
  [os-selected]
8
    <tr><td>version</td><td>[version]</td></tr>
9
  [/os-selected]
10
  [os-other-selected]
11
    <tr><td>other-os</td><td>[other-os]</td></tr>
12
    <tr><td>other-version</td><td>[other-version]</td></tr>
13
  [/os-other-selected]
14
[/technical-support-selected]
15
[sales-support-selected]
16
  <tr><td>continent</td><td>[continent]</td></tr>
17
[/sales-support-selected]
18
<tr><td>comments</td><td>[comments]</td></tr>
19
</table>

Kui vorm saadetakse, eemaldab plugin e-kirjast kõik, mis kuulub peidetud gruppidesse. Tehniline tugi saab read OS-i ja versiooniga; müük saab ainult kontinendi. Puhas ja selge.

Kui sul on vaja e-kirju käsitsi koostada ja märgendit redigeerida, on plugina autor loonud veebikonverteri CF7 koodist e-kirja sisuks. Kleebi vormi kood ja saad e-kirja jaoks tabeli malli.

⁉️🤔 Korduma kippuvad küsimused

Miks on kõik grupid nähtavad? Tingimused ei tööta.

Esmalt kontrolli brauseri konsooli (F12) JavaScripti vigade suhtes. Conditional Fields laeb oma skripti viimasena ja iga sellele eelnev JS-i viga lõhub kogu loogika. Teiseks peab sinu teema failis footer.php välja kutsuma wp_footer(). Ilma selle konksuta skript ei lae. Kõige sagedasem süüdlane on pluginakonflikt: deaktiveeri kõik peale CF7 ja Conditional Fieldsi ning testi vormi. Kui see töötab, hakka pluginaid ükshaaval uuesti sisse lülitama, kuni leiad süüdlase.

E-kirja saabuvad väljad on valede või tühjade väärtustega.

KÕIKIDE vormiväljade nimed peavad olema unikaalsed, isegi kui väljad asuvad erinevates gruppides ega ole kunagi korraga nähtaval. Plugin EI eemalda peidetud välju vormi saatmisel, see peidab need ainult visuaalselt. Kaks välja nimega a erinevates gruppides = kaks väärtust sama võtme jaoks ja üks neist võidab. Veendu, et igal väljal oleks omaenda nimi.

Kuidas luua sammude ja korduvate väljadega vormi?

Tasuta versioon ei võimalda seda teha; sul on vaja Conditional Fields Pro-d. See lisab mitmeastmelisuse (vormi jagamine sammudeks „Edasi" nuppudega), korduvate väljade plokid (kordaja) ja arvutatavad väljad. Hind arendaja veebisaidil sõltub saitide arvust. Kui sinu vorm on lihtne ja selles pole kordajaid, on tasuta versioon enam kui piisav.

Mida teha, kui plugin läheb minu teemaga konflikti?

Lülita sisse standardne WordPressi teema (Twenty Twenty-Five) ja testi vormi sellel. Kui see töötab, on probleem sinu teemas. Tavaliselt aitab wp_footer() käsitsi väljakutsumine või vormi viimine teisele lehele, kus pole raskeid teemaskripte. Kui teema on eritellimusel valmistatud, palu arendajal veenduda, et wp_footer() konks kutsutakse välja kõigil vormidega lehtedel.

Kas ma saan tingimuslikke välju kasutada hinnakalkulaatori jaoks?

Jah, ja see on üks levinumaid stsenaariume. Rippmenüüde komplekt (teenuse tüüp, maht, kiireloomulisus) koos iga valiku tingimuslike gruppidega. Pro versioon lisab täisväärtuslikud arvutatavad väljad; kui sul on vaja väärtusi otse vormis korrutada ja liita, vaata selles suunas.

Mida edasi teha: prototüübist tootmisvormini

Ehitasime tugivormi kahe loogikaharuga, pesastatud gruppidega ja personaliseeritud e-kirjaga. Sama lähenemine töötab iga tingimustega stsenaariumi puhul: hargnevad küsitlused, kalkulaatorid, erinevate rollidega registreerimised.

Millele enne avaldamist tähelepanu pöörata:

• Kontrolli KÕIKIDE väljanimede unikaalsust; see on reegel number üks.
• Testi vormi mobiilis: pikad valikute loendid ja pesastatud grupid võivad nõrgemaid seadmeid aeglustada.
• Seadista rämpspostikaitse; Contact Form 7 töötab hästi koos reCAPTCHA v3, Akismeti ja Turnstile'iga.

Kui sinu vormiloogika läheb kaugemale „näita/peida" funktsionaalsusest ja sul on vaja kordajaid, arvutusi või mitut sammu, heida pilk Conditional Fields Pro-le. Kuid enamiku ülesannete jaoks on tasuta versioon piisav: see on stabiilne, uuendatakse iga paari nädala tagant ning töötab Contact Form 7 versiooniga 6.1.6 ja WordPress 7.0-ga.

Vaata kogu protsessi videoesitlust installimisest kuni valmis vormini; see kinnistab iga sammu elava näite abil: