Tarvitset yhteydenottolomakkeen, joka mukautuu käyttäjän valintoihin: tekninen tuki näyttää yhden kenttäsarjan, myynti täysin erilaisen. Tavallinen Contact Form 7 ei tähän pysty. Ilman ehdollista logiikkaa sivu näyttää kaikki kentät kerralla valtavana seinänä, josta puolet on kävijälle tarpeettomia. Se näyttää sotkuiselta ja aiheuttaa hämmennystä.

Conditional Fields** for Contact Form 7** -lisäosa ratkaisee tämän ongelman: kentät ilmestyvät ja katoavat sen mukaan, mitä käyttäjä valitsee. Alla on vaiheittainen opas oikean tukilomakkeen rakentamiseen lisäosan asennuksesta personoituihin sähköpostivastauksiin. Sama lähestymistapa skaalautuu laskureihin, kyselyihin ja monivaiheisiin hakemuksiin.

💡 Pikaopas:

• Asenna CF7 ja Conditional Fields, luo peruslomake, jossa on pyyntötyyppi
• Kääri kenttäryhmät [group]…[/group]-tageihin, määritä näyttöehdot "Conditional fields" -välilehdellä
• Rakenna lopullinen lomake, jossa on sisäkkäisiä ryhmiä, dynaamisia nimilappuja ja mukautettu "Muu"-haara
• Määritä personoitu sähköposti: eri teksti ja eri kenttäsarjat tekniselle tuelle ja myynnille

Mitä ehdolliset kentät tarjoavat

Contact Form 7 on suosituin lomakerakentaja WordPressille: yli 10 miljoonaa aktiivista asennusta, minimaalinen kuorma. Mutta sellaisenaan se on staattinen: kaikki kentät ovat koko ajan näkyvissä. Jos lomakkeessa on kolme logiikkahaaraa (tekninen tuki, myynti, kumppanuudet), kävijä näkee yhdeksän ylimääräistä kenttää, joilla ei ole mitään tekemistä hänen pyyntönsä kanssa.

Conditional Fields for Contact Form 7 lisää "jos-niin"-logiikan suoraan lomake-editoriin. Lisäosa on ilmainen, sillä on 4,8 arvosana WordPress.orgissa ja yli 100 000 aktiivista asennusta. Sen tekijä Jules Colle kehittää myös Pro-versiota, jossa on toistuvat kentät, monivaiheiset lomakkeet ja lasketut arvot.

Tärkeää: lisäosa ei poista piilotettuja kenttiä merkinnöistä, vaan piilottaa ne ainoastaan JavaScriptin avulla. Siksi kaikki piilotettujen ryhmien sisällä olevat kentät lähetetään silti palvelimelle. Kenttien nimien on oltava yksilöllisiä myös eri ryhmien välillä, muuten arvot ylikirjoittuvat. Tämä on sääntö numero yksi, ja käytännössä se on yleisin kompastuskivi.

Asennus ja alustava lomake

Asenna molemmat lisäosat kohdasta Lisäosat → Lisää uusi:

• Contact Form 7, itse lomakerakentaja
• Conditional Fields for Contact Form 7, ehdollisen logiikan moottori

Aktivoinnin jälkeen mene kohtaan Yhteydenotto → Lisää uusi ja liitä lomakepohja. Ei vielä ehdollisia ryhmiä, vain kaikki kentät kerralla:

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"]

Tältä lomake näyttää ilman logiikkaa: käyttöjärjestelmän valinta ja teknisen tuen kentät ovat aina näkyvissä, vaikka kävijä olisi valinnut "Myynti". "Muu käyttöjärjestelmä" -vaihtoehtoa ei ole lainkaan, eikä versiokentän nimilappu muutu valitun järjestelmän mukaan. Korjaamme tämän ryhmillä.

Kenttäryhmien luominen

Ryhmä on tagipari [group group-name] ... [/group]. Kaikki niiden välissä on oletuksena piilotettua ja tulee näkyviin vain, kun ehto täyttyy. Ryhmiä voi asettaa sisäkkäin, mikä on kätevää porrastetussa logiikassa.

Klikkaa lomake-editorissa tekstialueen yläpuolella olevaa Conditional group -painiketta; se lisää tagit automaattisesti.

Avautuvassa ikkunassa määritä ryhmän nimi ja asetukset:

• Clear on hide tyhjentää kaikki ryhmän sisällä olevat kentät, kun ryhmä piilotetaan. Hyödyllinen, jotta näkymättömien kenttien arvoja ei lähetetä sähköpostissa.
• Inline näyttää ryhmän rivinsisäisenä elementtinä. Kätevää, kun haluat upottaa tekstinpätkän suoraan lauseeseen (näytän tämän myöhemmin).

Luo ensimmäinen ryhmä technical-support-selected ja siirrä käyttöjärjestelmä- ja versiokentät sen sisään:

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]

Tässä on jo kaksi ryhmää, toinen toisensa sisällä. Ulompi (technical-support-selected) edustaa sitä, että tekninen tuki on valittu. Sisempi (os-selected) on käyttöjärjestelmäversion tarkennus, joka tulee näkyviin VAIN, kun käyttäjä valitsee tietyn käyttöjärjestelmän. Ilman ehtoa molemmat ryhmät pysyvät toistaiseksi näkymättöminä.

Sama myyntiosastolle:

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]

Tallenna lomake, niin ryhmät katoavat etusivulta. Tämä on normaalia: ehtoja ei ole vielä asetettu.

Ehtologiikan määrittäminen

Kun olet tallentanut lomakkeen, siirry Ehdolliset kentät -välilehdelle. Käytössä on kaksi tilaa: visuaalinen (pudotusvalikot) ja tekstimuotoinen (kirjoitat säännöt käsin). Tekstimuoto on nopeampi monimutkaisissa lomakkeissa, joten käytämme sitä.

Klikkaa Lisää uusi ehtosääntö ja syötä ensimmäinen sääntö:

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

Syntaksi on suoraviivainen: show <group> if <field> equals "<value>". Kun sääntö on tallennettu, technical-support-selected-ryhmä tulee näkyviin heti, kun käyttäjä valitsee pudotusvalikosta "Technical support".

Lisää myyntiä koskeva sääntö:

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

Nyt lomake vaihtaa kahden haaran välillä, mutta teknisen tuen sisällä versiokenttä näkyy edelleen koko ajan. Haluamme sen ilmestyvän vasta, kun tietty käyttöjärjestelmä on valittu:

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

not equals "" -tarkistus toimii, koska käytämme first_as_label-asetusta; arvoa -- Choose your operating system -- ei katsota valituksi. operating-system-kenttä on tyhjä, kunnes kävijä klikkaa jotakin vaihtoehtoa.

Jatketaan: lisäämme käyttöjärjestelmän pudotusvalikkoon "Muu"-vaihtoehdon. Jos käyttäjä valitsee "Muu", emme tiedä, mikä käyttöjärjestelmä hänellä on, joten annamme hänelle kaksi tekstikenttää: järjestelmän nimi ja versio. Tarvitsemme uuden ryhmän os-other-selected ja säännön, jossa käytetään AND-operaattoria:

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"

Kaksi sääntöä yhdelle ryhmälle: ensimmäinen näyttää os-selected-ryhmän mille tahansa käyttöjärjestelmälle paitsi "Muu", toinen näyttää os-other-selected-ryhmän vain "Muu"-vaihtoehdolle. Logiikka on toisensa poissulkeva, joten ristiriitoja ei synny.

Valmis lomake: dynaamiset nimilaput ja "Muu"-haara

Kootaan nyt kaikki yhteen. Lisäämme inline-ryhmiä, jotka vaihtavat versiokentän nimilapun valitun käyttöjärjestelmän mukaan (Android, iOS, Linux tai Windows). Nimilapun teksti on "upotettu" suoraan ryhmään ja tulee näkyviin vain, kun ehto täyttyy:

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"]

Avainkohta: inline-ryhmät, joissa on käyttöjärjestelmien nimet ([group os-android inline]Android[/group]). inline-attribuutti tekee ryhmästä rivielementin, joten nimilapun teksti ei jakaudu kappaleisiin. Näiden ryhmien ehdot Ehdolliset kentät -välilehdellä:

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"

Klikkaa Tallenna ehdot ja tallenna sitten lomake. Kopioi shortcode [contact-form-7 id="..." title="..."] sivulle ja testaa sitä etusivulla. Haarojen välillä vaihtamisen pitäisi toimia välittömästi, ilman sivun uudelleenlatausta.

Sähköpostivastauksen personointi

Ehdolliset ryhmät toimivat paitsi lomakkeessa myös sähköpostipohjassa. Tämä tarkoittaa, että käyttäjä voi saada erilaisen sähköpostin sen mukaan, mitä hän valitsi.

Avaa Mail-välilehti lomake-editorissa. Kääri Message body -kentässä teksti samoihin ryhmiin, joita käytit lomakkeessa:

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]

Sulkutunniste [/technical-support-selected] ja avaustunniste [sales-support-selected] tulevat aivan peräkkäin, ilman välilyöntiä; muuten sähköpostiin ilmestyy ylimääräinen rivinvaihto.

Lisätään nyt taulukko täytetyistä kentistä. Kunkin ryhmän sisällä luettelemme VAIN kyseiseen haaraan kuuluvat kentät:

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>

Kun lomake lähetetään, lisäosa poistaa sähköpostista kaiken, mikä kuuluu piilotettuihin ryhmiin. Tekninen tuki saa rivit, joissa on käyttöjärjestelmä ja versio; myynti saa vain maanosan. Selkeää ja siistiä.

Jos sinun täytyy rakentaa sähköpostit käsin ja muokata merkintäkieltä, lisäosan tekijä on luonut web-muuntimen CF7-koodista sähköpostin rungoksi. Liitä lomakkeen koodi, niin saat taulukkopohjan sähköpostia varten.

⁉️🤔 Usein kysytyt kysymykset

Miksi kaikki ryhmät näkyvät? Ehdot eivät toimi.

Tarkista ensin selaimen konsoli (F12) JavaScript-virheiden varalta. Conditional Fields lataa oman skriptinsä viimeisenä, ja mikä tahansa JS-virhe ennen sitä rikkoo koko logiikan. Toiseksi, teemasi täytyy kutsua wp_footer()-funktiota footer.php-tiedostossa. Ilman tätä koukkua skripti ei lataudu. Useimmiten syyllinen on liitännäisristiriita: ota kaikki paitsi CF7 ja Conditional Fields pois käytöstä ja testaa lomaketta. Jos se toimii, ota liitännäisiä käyttöön yksi kerrallaan, kunnes löydät syyllisen.

Sähköpostiin saapuvissa kentissä on vääriä tai tyhjiä arvoja.

KAIKKIEN lomakkeen kenttien nimien on oltava yksilöllisiä, vaikka kentät olisivat eri ryhmissä eivätkä koskaan näkyisi samanaikaisesti. Liitännäinen EI poista piilotettuja kenttiä lähetyksen yhteydessä; se vain piilottaa ne visuaalisesti. Kaksi a-nimistä kenttää eri ryhmissä = kaksi arvoa samalle avaimelle, ja toinen niistä voittaa. Varmista, että jokaisella kentällä on oma nimensä.

Miten luon lomakkeen, jossa on vaiheita ja toistuvia kenttiä?

Ilmaisversio ei pysty tähän; tarvitset Conditional Fields Pron. Se lisää monivaiheisuuden (lomakkeen jakaminen vaiheisiin "Seuraava"-painikkeilla), toistuvat kenttälohkot (repeater) ja laskentakentät. Hinta kehittäjän verkkosivustolla riippuu sivustojen määrästä. Jos lomakkeesi on yksinkertainen eikä siinä ole toistuvia kenttiä, ilmaisversio on enemmän kuin riittävä.

Mitä teen, jos liitännäinen on ristiriidassa teemani kanssa?

Ota käyttöön tavallinen WordPress-teema (Twenty Twenty-Five) ja testaa lomaketta sillä. Jos se toimii, ongelma on teemassasi. Yleensä wp_footer()-funktion kutsuminen manuaalisesti tai lomakkeen siirtäminen eri sivulle ilman raskaita teemaskriptejä auttaa. Jos teema on räätälöity, pyydä kehittäjää varmistamaan, että wp_footer()-koukkua kutsutaan kaikilla lomakkeen sisältävillä sivuilla.

Voinko käyttää ehdollisia kenttiä hintalaskuriin?

Kyllä, ja tämä on yksi yleisimmistä käyttötapauksista. Joukko pudotusvalikoita (palvelutyyppi, volyymi, kiireellisyys) ja ehdollisia ryhmiä kullekin vaihtoehdolle. Pro-versio lisää täysimittaiset laskentakentät; jos sinun täytyy kertoa ja laskea yhteen arvoja suoraan lomakkeessa, katso siihen suuntaan.

Mitä seuraavaksi: prototyypistä tuotantolomakkeeksi

Rakensimme tukilomakkeen, jossa on kaksi logiikkahaaraa, sisäkkäisiä ryhmiä ja personoitu sähköposti. Sama lähestymistapa toimii mihin tahansa ehtoja sisältävään skenaarioon: haarautuviin kyselyihin, laskureihin, rekisteröitymisiin eri rooleilla.

Mihin kiinnittää huomiota ennen julkaisua:

• Tarkista KAIKKIEN kenttänimien yksilöllisyys; tämä on edelleen sääntö numero yksi.
• Testaa lomake mobiilissa: pitkät valintalistat ja sisäkkäiset ryhmät voivat hidastaa heikkoja laitteita.
• Määritä roskapostisuojaus; Contact Form 7 toimii hyvin reCAPTCHA v3:n, Akismetin ja Turnstilen kanssa.

Jos lomakelogiikkasi menee "näytä/piilota"-toimintoa pidemmälle ja tarvitset toistuvia kenttiä, laskelmia tai useita vaiheita, tutustu Conditional Fields Prohon. Mutta useimpiin tehtäviin ilmaisversio on riittävä: se on vakaa, päivittyy muutaman viikon välein ja toimii Contact Form 7:n version 6.1.6 ja WordPress 7.0:n kanssa.

Katso videodemonstraatio koko prosessista asennuksesta valmiiseen lomakkeeseen; se vahvistaa jokaisen vaiheen elävällä esimerkillä: