Du trenger et kontaktskjema som tilpasser seg brukerens valg: teknisk support viser ett sett med felter, salg viser et helt annet sett. Standard Contact Form 7 kan ikke gjøre dette. Uten betinget logikk viser siden en vegg av alle felter samtidig, hvor halvparten er unødvendige for den besøkende. Det ser rotete ut og skaper forvirring.

Conditional Fields** for Contact Form 7**-pluginen løser dette problemet: felter dukker opp og forsvinner basert på hva brukeren velger. Nedenfor følger en trinnvis guide til å bygge et ekte støtteskjema, fra plugin-installasjon til personlige e-postsvar. Samme tilnærming kan skaleres til kalkulatorer, spørreundersøkelser og flertrinns søknader.

💡 Rask oversikt:

• Installer CF7 og Conditional Fields, lag et grunnleggende skjema med en forespørselstype
• Pakk feltgrupper inn i [group]…[/group], konfigurer visningsbetingelser via fanen «Conditional fields»
• Bygg det endelige skjemaet med nestede grupper, dynamiske etiketter og en tilpasset «Annet»-gren
• Sett opp personlig e-post: ulik tekst og ulike feltsett for teknisk support og salg

Hva betingede felter gir deg

Contact Form 7 er den mest populære skjemabyggeren for WordPress: 10+ millioner aktive installasjoner, minimal overhead. Men ut av boksen er den statisk: alle felter er synlige hele tiden. Hvis skjemaet har tre logiske grener (teknisk support, salg, partnerskap), ser den besøkende ni ekstra felter som ikke har noe med deres forespørsel å gjøre.

Conditional Fields for Contact Form 7 legger til «hvis-så»-logikk direkte i skjemaredigereren. Pluginen er gratis, har en vurdering på 4,8 på WordPress.org og 100 000+ aktive installasjoner. Utvikleren, Jules Colle, lager også Pro-versjonen med repeterende felter, flertrinns skjemaer og kalkulerte verdier.

Viktig: pluginen fjerner ikke skjulte felter fra markeringen; den skjuler dem kun via JavaScript. Derfor sendes alle felter inne i skjulte grupper fortsatt til serveren. Feltnavn må være unike selv på tvers av ulike grupper, ellers vil verdier bli overskrevet. Dette er regel nummer én, og i praksis er det den vanligste fallgruven.

Installasjon og første skjema

Installer begge pluginene via Utvidelser → Legg til ny:

• Contact Form 7, selve skjemabyggeren
• Conditional Fields for Contact Form 7, motoren for betinget logikk

Etter aktivering, gå til Kontakt → Legg til ny og lim inn skjemamalen. Ingen betingede grupper ennå, bare alle felter samtidig:

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

Slik ser skjemaet ut uten logikk: operativsystemvalget og feltene for teknisk support er alltid synlige, selv om den besøkende valgte «Salg». Det finnes ikke noe «Annet OS»-alternativ i det hele tatt, og etiketten for versjonsfeltet endres ikke basert på valgt system. Vi fikser dette med grupper.

Opprette feltgrupper

En gruppe er et par med tagger [group group-name] ... [/group]. Alt mellom dem er skjult som standard og dukker kun opp når en betingelse utløses. Grupper kan nestes inni hverandre, noe som er nyttig for kaskadelogikk.

I skjemaredigereren klikker du på Conditional group-knappen over tekstområdet; den legger til taggene automatisk.

I vinduet som dukker opp, sett gruppenavn og alternativer:

• Clear on hide tømmer alle felter inne i gruppen når den blir skjult. Nyttig for at verdier fra usynlige felter ikke sendes med i e-posten.
• Inline viser gruppen som et inline-element. Nyttig når du trenger å bygge inn en tekstbit direkte i en setning (jeg vil vise dette senere).

Opprett den første gruppen technical-support-selected og flytt operativsystem- og versjonsfeltene inn i den:

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]

Her er det allerede to grupper, én inni den andre. Den ytre (technical-support-selected) representerer at teknisk support ble valgt. Den indre (os-selected) er avklaringen av OS-versjon, som KUN vil dukke opp når brukeren velger et spesifikt operativsystem. Uten en betingelse forblir begge gruppene usynlige foreløpig.

Det samme for salgsavdelingen:

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]

Lagre skjemaet, så forsvinner gruppene fra frontend. Dette er normalt: det finnes ingen betingelser ennå.

Sette opp betinget logikk

Etter at du har lagret skjemaet, går du til fanen Betingede felt. Det finnes to moduser: visuell (nedtrekksmenyer) og tekst (du skriver reglene manuelt). Tekstmodus er raskere for komplekse skjemaer, så vi bruker den.

Klikk på Legg til ny betinget regel og skriv inn den første regelen:

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

Syntaksen er enkel: show <group> if <field> equals "<value>". Etter at du har lagret regelen, blir gruppen technical-support-selected synlig så snart brukeren velger «Technical support» fra nedtrekksmenyen.

Legg til regelen for salg:

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

Nå veksler skjemaet mellom to grener, men inne i teknisk support vises versjonsfeltet fortsatt hele tiden. Vi trenger at det bare vises etter at man har valgt et spesifikt operativsystem:

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

Sjekken not equals "" fungerer fordi vi bruker first_as_label; verdien -- Choose your operating system -- regnes ikke som valgt. Feltet operating-system er tomt helt til den besøkende faktisk klikker på et alternativ.

Vi går videre: vi bør legge til et «Annet»-alternativ i OS-nedtrekksmenyen. Hvis brukeren velger «Annet», vet vi ikke hvilket operativsystem de har, så vi gir dem to tekstfelt: systemnavn og versjon. Vi trenger en ny gruppe os-other-selected og en regel med OG-operatoren:

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"

To regler for én gruppe: den første viser os-selected for alle OS unntatt «Annet», den andre viser os-other-selected bare for «Annet». Logikken er gjensidig utelukkende, så det oppstår ingen konflikter.

Endelig skjema: dynamiske etiketter og «Annet»-grenen

La oss nå sette alt sammen. Vi legger til innebygde grupper som endrer etiketten på versjonsfeltet avhengig av valgt operativsystem (Android, iOS, Linux eller Windows). Etiketteksten er «innebygd» direkte i gruppen og vises bare når betingelsen er oppfylt:

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

Hovedpoenget: innebygde grupper med OS-navn ([group os-android inline]Android[/group]). Attributtet inline gjør gruppen til et innebygd element, slik at etiketteksten ikke brytes opp i avsnitt. Betingelsene for disse gruppene i fanen Betingede felt:

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"

Klikk på Lagre betingelser, og lagre deretter skjemaet. Kopier kortkoden [contact-form-7 id="..." title="..."] til en side og test den i frontend. Veksling mellom grener skal fungere umiddelbart, uten sidelasting.

Tilpasse e-postsvar

Betingede grupper fungerer ikke bare i skjemaet, men også i e-postmalen. Dette betyr at brukeren kan motta en annen e-post avhengig av hva de valgte.

Åpne fanen E-post i skjemaredigereren. I feltet Meldingstekst pakker du inn teksten i de samme gruppene du brukte i skjemaet:

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]

Avslutningstaggen [/technical-support-selected] og åpningstaggen [sales-support-selected] plasseres rett ved siden av hverandre, uten mellomrom; ellers vil det oppstå et ekstra linjeskift i e-posten.

La oss nå legge til en tabell med de utfylte feltene. Inne i hver gruppe lister vi KUN de relevante feltene:

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>

Når skjemaet sendes inn, vil programtillegget fjerne alt fra e-posten som tilhører skjulte grupper. Teknisk support mottar radene med OS og versjon; salg mottar kun kontinentet. Rent og oversiktlig.

Hvis du trenger å bygge e-poster manuelt og redigere markeringen, har forfatteren av programtillegget laget en nettbasert konverterer for CF7-kode til e-postinnhold. Lim inn skjemakoden og få en tabellmal for e-posten.

⁉️🤔 Ofte stilte spørsmål

Hvorfor er alle grupper synlige? Betingelsene fungerer ikke.

Sjekk først nettleserkonsollen (F12) for JavaScript-feil. Conditional Fields laster inn skriptet sitt til slutt, og enhver JS-feil før det ødelegger all logikken. For det andre må temaet ditt kalle wp_footer() i footer.php. Uten denne kroken vil ikke skriptet lastes. Oftest er synderen en plugin-konflikt: deaktiver alt unntatt CF7 og Conditional Fields og test skjemaet. Hvis det fungerer, aktiver pluginene én etter én til du finner synderen.

Felter i e-posten kommer med feil eller tomme verdier.

Navnene på ALLE felter i skjemaet må være unike, selv om feltene er i forskjellige grupper og aldri er synlige samtidig. Pluginen fjerner IKKE skjulte felter ved innsending; den skjuler dem bare visuelt. To felter med navnet a i forskjellige grupper = to verdier for samme nøkkel, og én av dem vil vinne. Sørg for at hvert felt har sitt eget navn.

Hvordan lager jeg et skjema med trinn og repeterende felter?

Gratisversjonen kan ikke gjøre dette; du trenger Conditional Fields Pro. Den legger til flertrinns (deler skjemaet inn i trinn med «Neste»-knapper), repeterende feltblokker (repeater) og beregnede felter. Kostnaden, på utviklerens nettside, avhenger av antall nettsteder. Hvis skjemaet ditt er enkelt og ikke har repeatere, er gratisversjonen mer enn nok.

Hva bør jeg gjøre hvis pluginen kommer i konflikt med temaet mitt?

Aktiver et standard WordPress-tema (Twenty Twenty-Five) og test skjemaet på det. Hvis det fungerer, ligger problemet i temaet ditt. Vanligvis hjelper det å kalle wp_footer() manuelt eller flytte skjemaet til en annen side uten tunge temaskript. Hvis temaet er skreddersydd, be utvikleren sørge for at wp_footer()-kroken kalles på alle sider med skjemaer.

Kan jeg bruke betingede felter til en priskalkulator?

Ja, og dette er et av de vanligste scenarioene. Et sett med nedtrekksmenyer (tjenestetype, volum, hastegrad) med betingede grupper for hvert alternativ. Pro-versjonen legger til fullverdige beregnede felter; hvis du trenger å multiplisere og summere verdier direkte i skjemaet, se i den retningen.

Hva du gjør videre: fra prototype til produksjonsskjema

Vi bygde et støtteskjema med to logikkgrener, nestede grupper og personalisert e-post. Samme tilnærming fungerer for ethvert scenario med betingelser: forgrenede spørreundersøkelser, kalkulatorer, registreringer med ulike roller.

Hva du bør være oppmerksom på før lansering:

• Sjekk at ALLE feltnavn er unike; igjen, dette er regel nummer én.
• Test skjemaet på mobil: lange alternativlister og nestede grupper kan gjøre svake enheter trege.
• Sett opp søppelpostbeskyttelse; Contact Form 7 fungerer godt med reCAPTCHA v3, Akismet og Turnstile.

Hvis skjemalogikken din går utover «vis/skjul» og du trenger repeatere, beregninger eller flere trinn, ta en titt på Conditional Fields Pro. Men for de fleste oppgaver er gratisversjonen tilstrekkelig: den er stabil, oppdateres med få ukers mellomrom og fungerer med Contact Form 7 versjon 6.1.6 og WordPress 7.0.

Se videodemonstrasjonen av hele prosessen fra installasjon til ferdig skjema; den vil forsterke hvert trinn med et levende eksempel: