Du behöver ett kontaktformulär som anpassar sig efter användarens val: teknisk support visar en uppsättning fält, försäljning visar en helt annan uppsättning. Standard-Contact Form 7 klarar inte detta. Utan villkorslogik visar sidan en vägg av alla fält på en gång, varav hälften inte är relevanta för besökaren. Det ser rörigt ut och skapar förvirring.

Tillägget Conditional Fields** for Contact Form 7** löser problemet: fält visas och döljs baserat på vad användaren väljer. Nedan följer en steg-för-steg-guide för att bygga ett riktigt supportformulär, från installation av tillägget till personliga e-postsvar. Samma tillvägagångssätt kan skalas upp till kalkylatorer, enkäter och flerstegsansökningar.

💡 Snabb översikt:

• Installera CF7 och Conditional Fields, skapa ett grundformulär med en ärendetyp
• Omslut fältgrupper i [group]…[/group], konfigurera visningsvillkor via fliken "Conditional fields"
• Bygg det slutliga formuläret med nästlade grupper, dynamiska etiketter och en anpassad "Annat"-gren
• Sätt upp personlig e-post: olika text och olika fältuppsättningar för teknisk support och försäljning

Vad villkorsstyrda fält ger

Contact Form 7 är den mest populära formulärbyggaren för WordPress: 10+ miljoner aktiva installationer, minimal overhead. Men direkt ur lådan är det statiskt: alla fält är synliga hela tiden. Om formuläret har tre logikgrenar (teknisk support, försäljning, partnerskap) ser besökaren nio extra fält som inte har något med deras ärende att göra.

Conditional Fields for Contact Form 7 lägger till "om-så"-logik direkt i formulärredigeraren. Tillägget är gratis, har 4,8 i betyg på WordPress.org och 100 000+ aktiva installationer. Utvecklaren, Jules Colle, står också bakom Pro-versionen med repeterande fält, flerstegsformulär och beräknade värden.

Viktigt: tillägget tar inte bort dolda fält från koden, det döljer dem bara via JavaScript. Därför skickas alla fält inuti dolda grupper fortfarande till servern. Fältnamn måste vara unika även över olika grupper, annars skrivs värden över. Detta är regel nummer ett, och i praktiken den vanligaste stötestenen.

Installation och grundformulär

Installera båda tilläggen via Tillägg → Lägg till nytt:

• Contact Form 7, själva formulärbyggaren
• Conditional Fields for Contact Form 7, motorn för villkorslogik

Efter aktivering, gå till Kontakt → Lägg till ny och klistra in formulärmallen. Inga villkorsgrupper ännu, bara alla fält på en gång:

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

Så här ser formuläret ut utan logik: valet av operativsystem och fälten för teknisk support är alltid synliga, även om besökaren valde "Försäljning". Det finns inget "Annat OS"-alternativ alls, och etiketten för versionsfältet ändras inte baserat på valt system. Vi fixar detta med grupper.

Skapa fältgrupper

En grupp är ett par taggar [group group-name] ... [/group]. Allt mellan dem är dolt som standard och visas bara när ett villkor utlöses. Grupper kan nästlas inuti varandra, vilket är praktiskt för kaskadlogik.

I formulärredigeraren klickar du på knappen Conditional group ovanför textytan; den lägger till taggarna automatiskt.

I fönstret som visas anger du gruppnamn och alternativ:

• Clear on hide rensar alla fält inuti gruppen när den döljs. Användbart så att värden från osynliga fält inte skickas med i e-posten.
• Inline visar gruppen som ett inline-element. Hjälpsamt när du behöver bädda in en textbit direkt i en mening (jag visar detta senare).

Skapa den första gruppen technical-support-selected och flytta in operativsystem- och versionsfälten 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]

Här finns redan två grupper, en inuti den andra. Den yttre (technical-support-selected) representerar att teknisk support valdes. Den inre (os-selected) är förtydligandet av OS-version, som visas ENDAST när användaren väljer ett specifikt operativsystem. Utan ett villkor förblir båda grupperna osynliga tills vidare.

Samma sak för säljavdelningen:

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]

Spara formuläret, så försvinner grupperna från frontend. Detta är normalt: det finns inga villkor än.

Ställa in villkorslogik

När du har sparat formuläret går du till fliken Villkorsstyrda fält. Det finns två lägen: visuellt (rullgardinsmenyer) och text (du skriver regler manuellt). Textläget är snabbare för komplexa formulär, så vi använder det.

Klicka på Lägg till ny villkorsregel och ange den första regeln:

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

Syntaxen är enkel: show <group> if <field> equals "<value>". När du har sparat regeln blir gruppen technical-support-selected synlig så fort användaren väljer "Technical support" i rullgardinsmenyn.

Lägg till regeln för sälj:

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

Nu växlar formuläret mellan två grenar, men inuti teknisk support visas versionsfältet fortfarande hela tiden. Vi behöver att det bara visas efter att man har valt ett specifikt operativsystem:

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

Kontrollen not equals "" fungerar eftersom vi använder first_as_label; värdet -- Choose your operating system -- räknas inte som valt. Fältet operating-system är tomt tills besökaren faktiskt klickar på ett alternativ.

Vi går vidare: vi bör lägga till ett "Annat"-alternativ i OS-rullgardinsmenyn. Om användaren väljer "Annat" vet vi inte vilket operativsystem de har, så vi ger dem två textfält: systemnamn och version. Vi behöver en ny grupp os-other-selected och en regel med AND-operatorn:

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"

Två regler för en grupp: den första visar os-selected för alla operativsystem utom "Annat", den andra visar os-other-selected endast för "Annat". Logiken utesluter varandra, så det blir inga konflikter.

Slutgiltigt formulär: dynamiska etiketter och "Annat"-grenen

Nu sätter vi ihop allt. Vi lägger till inline-grupper som ändrar versionsfältets etikett beroende på valt operativsystem (Android, iOS, Linux eller Windows). Etiketttexten är "inbäddad" direkt i gruppen och visas bara när villkoret matchar:

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

Den viktiga punkten: inline-grupper med OS-namn ([group os-android inline]Android[/group]). Attributet inline gör gruppen till ett inline-element, så etiketttexten bryts inte upp i stycken. Villkoren för dessa grupper på fliken Villkorsstyrda fält:

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"

Klicka på Spara villkor och spara sedan formuläret. Kopiera shortcoden [contact-form-7 id="..." title="..."] till en sida och testa den på frontend. Växling mellan grenar bör ske direkt, utan sidomladdning.

Anpassa e-postsvaret

Villkorsstyrda grupper fungerar inte bara i formuläret utan även i e-postmallen. Det innebär att användaren kan få olika e-post beroende på vad de valde.

Öppna fliken E-post i formulärredigeraren. I fältet Meddelandetext omsluter du texten i samma grupper som du använde i formuläret:

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]

Sluttaggen [/technical-support-selected] och starttaggen [sales-support-selected] placeras direkt intill varandra, utan mellanslag; annars uppstår en extra radbrytning i e-posten.

Nu lägger vi till en tabell med de ifyllda fälten. Inuti varje grupp listar vi ENDAST de relevanta fälten:

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 formuläret skickas kommer tillägget att ta bort allt från e-posten som tillhör dolda grupper. Teknisk support får raderna med OS och version; sälj får bara kontinenten. Rent och tydligt.

Om du behöver bygga e-postmeddelanden manuellt och redigera koden har tilläggets skapare tagit fram en webbkonverterare för CF7-kod till e-postinnehåll. Klistra in formulärkoden och få en tabellmall för e-posten.

⁉️🤔 Vanliga frågor

Varför syns alla grupper? Villkoren fungerar inte.

Börja med att kolla webbläsarens konsol (F12) efter JavaScript-fel. Conditional Fields laddar sitt skript sist, och ett JS-fel innan dess bryter all logik. För det andra måste ditt tema anropa wp_footer() i footer.php. Utan denna hook laddas inte skriptet. Oftast är boven en plugin-konflikt: avaktivera allt utom CF7 och Conditional Fields och testa formuläret. Om det fungerar, aktivera plugins ett i taget tills du hittar boven.

Fält i mejlet kommer fram med felaktiga eller tomma värden.

Namnen på ALLA fält i formuläret måste vara unika, även om fälten ligger i olika grupper och aldrig syns samtidigt. Pluginet tar INTE bort dolda fält vid inskickning; det döljer dem bara visuellt. Två fält med namnet a i olika grupper = två värden för samma nyckel, och ett av dem kommer att vinna. Se till att varje fält har ett eget namn.

Hur skapar jag ett formulär med steg och upprepade fält?

Gratisversionen klarar inte detta; du behöver Conditional Fields Pro. Den tillför flerstegsformulär (dela upp formuläret i steg med "Nästa"-knappar), repeterbara fältblock (repeater) och beräknade fält. Kostnaden, på utvecklarens webbplats, beror på antalet sajter. Om ditt formulär är enkelt och inte har repeaters räcker gratisversionen mer än väl.

Vad ska jag göra om pluginet krockar med mitt tema?

Aktivera ett standardtema från WordPress (Twenty Twenty-Five) och testa formuläret i det. Om det fungerar ligger problemet i ditt tema. Oftast hjälper det att manuellt anropa wp_footer() eller att flytta formuläret till en annan sida utan tunga temaskript. Om temat är specialbyggt, be utvecklaren säkerställa att wp_footer()-hooken anropas på alla sidor med formulär.

Kan jag använda villkorsstyrda fält för en priskalkylator?

Ja, och det är ett av de vanligaste scenarierna. En uppsättning rullgardinsmenyer (tjänstetyp, volym, brådska) med villkorsstyrda grupper för varje alternativ. Pro-versionen tillför fullfjädrade beräknade fält; om du behöver multiplicera och summera värden direkt i formuläret, titta åt det hållet.

Nästa steg: från prototyp till produktionsformulär

Vi byggde ett supportformulär med två logikgrenar, nästlade grupper och ett personligt anpassat mejl. Samma tillvägagångssätt fungerar för alla scenarier med villkor: förgrenade enkäter, kalkylatorer, registreringar med olika roller.

Vad du ska tänka på innan publicering:

• Kontrollera att ALLA fältnamn är unika; återigen, detta är regel nummer ett.
• Testa formuläret i mobilen: långa alternativlistor och nästlade grupper kan göra svagare enheter långsamma.
• Sätt upp skräppostskydd; Contact Form 7 fungerar bra med reCAPTCHA v3, Akismet och Turnstile.

Om din formulärlogik går bortom "visa/dölj" och du behöver repeaters, beräkningar eller flera steg, ta en titt på Conditional Fields Pro. Men för de flesta uppgifter räcker gratisversionen: den är stabil, uppdateras med några veckors mellanrum och fungerar med Contact Form 7 version 6.1.6 och WordPress 7.0.

Se videodemonstrationen av hela processen från installation till färdigt formulär; den befäster varje steg med ett levande exempel: