Standarden för Contact Form 7 är en vertikal kolumn med fält. Namn, e-post, ämne, meddelande, staplade under varandra och utsträckta i full bredd. Det ser klumpigt ut och tar upp skärmutrymme, särskilt när du har fler än tre fält.

Men här är grejen: CF7-editorn förstår HTML. Det betyder att du kan slå in fält i div-behållare, sätta deras bredd och placera dem i rad. Inga tillägg, inga hacks, bara ren CSS.

Här är två fungerande metoder för att ordna Contact Form 7-fält i 2, 3 eller 4 kolumner. Den första är universell (HTML + CSS), den andra använder ditt temas shortcode-system. Båda har testats på skarpa sajter och förstör inte mobillayouter.

💡 Snabb översikt:

• Se hur ett standard-CF7-formulär ser ut och varför vertikal layout är problematisk
• Kopiera den färdiga CSS-flexboxen och klistra in den i ditt barntema (metod 1, inga tillägg)
• Om ditt tema redan stöder kolumn-shortcodes, aktivera dem i CF7 och slå in dina fält (metod 2)
• Testa resultatet på dator och mobil (media query ingår)

Hur ett standardformulär från Contact Form 7 ser ut

När du skapar ett formulär via "Kontakt" → "Lägg till nytt" får du standardmärkning: textfält, e-post, meddelande och en skicka-knapp, strikt staplade under varandra. I editorn ser det ut så här:

På frontend, med TwentySeventeen eller något annat tema utan anpassad formulärstil, blir resultatet vertikalt:

Fälten "Namn" och "E-post" tar upp hela den tillgängliga bredden, trots att hälften skulle räcka för varje. Resultatet: formuläret ser klumpigt ut, användare scrollar mer än nödvändigt och konverteringarna sjunker.

CF7-editorn är utformad för att acceptera HTML-märkning inuti formulärmallen. Det är precis det vi ska använda.

Metod 1: HTML + CSS flexbox (rekommenderas)

Tillvägagångssättet: slå in formulärfält i <div>-element med CSS-kolumnklasser, definiera sedan klasserna en gång i ditt barntema eller via ett tillägg för anpassad CSS.

Inga extra kolumntillägg behövs, bara CF7 och några rader CSS.

CSS-grid för 2 och 3 kolumner

Här är färdig CSS med flexbox. Till skillnad från float-baserade lösningar justerar flex automatiskt kolumner i höjdled och kräver inga clearfix-hacks:

1
/* Column row */
2
.cf7-row {
3
    display: flex;
4
    flex-wrap: wrap;
5
    gap: 4%;
6
    margin-bottom: 16px;
7
}
8
 
9
/* 2 columns */
10
.cf7-col-2 {
11
    flex: 0 0 48%;
12
}
13
 
14
/* 3 columns */
15
.cf7-col-3 {
16
    flex: 0 0 30.66%;
17
}
18
 
19
/* Mobile: columns stack vertically */
20
@media only screen and (max-width: 767px) {
21
    .cf7-col-2,
22
    .cf7-col-3 {
23
        flex: 0 0 100%;
24
    }
25
}

Placera CSS:en i ditt barntema (style.css-filen) eller via tillägget Simple Custom CSS, som lägger till ett stilfält i adminpanelen utan att du behöver redigera filer.

Märkning inuti CF7

Öppna formulärredigeraren (Kontakt → ditt formulär) och slå in fält i div-behållare med CSS-klasserna ovan. För 2 kolumner:

1
<div class="cf7-row">
2
  <div class="cf7-col-2">
3
    <label>Your name (required)
4
      [text* your-name]
5
    </label>
6
  </div>
7
  <div class="cf7-col-2">
8
    <label>Your Email (required)
9
      [email* your-email]
10
    </label>
11
  </div>
12
</div>
13
 
14
<label>Your message
15
  [textarea your-message]
16
</label>
17
 
18
[submit "Send"]

På sajten kommer resultatet att se ut så här:

Tre kolumner, samma logik

För tre fält i rad ändrar du klasserna till cf7-col-3 och lägger till ett tredje block:

1
<div class="cf7-row">
2
  <div class="cf7-col-3">
3
    <label>Your name (required)
4
      [text* your-name]
5
    </label>
6
  </div>
7
  <div class="cf7-col-3">
8
    <label>Your Email (required)
9
      [email* your-email]
10
    </label>
11
  </div>
12
  <div class="cf7-col-3">
13
    <label>Subject
14
      [text your-subject]
15
    </label>
16
  </div>
17
</div>
18
 
19
<label>Your message
20
  [textarea your-message]
21
</label>
22
 
23
[submit "Send"]

Frontend-utdata:

Fälten "Namn", "E-post" och "Ämne" ligger nu i en enda rad, medan meddelandet sträcker sig över hela bredden under dem. På skärmar smalare än 767px faller alla kolumner ihop till en, vilket gör formuläret läsbart på mobiler.

Flexbox-fördelen: om fälthöjderna skiljer sig (till exempel en lång etikett i en kolumn) så bryts inte raden. Flexbox justerar kolumnerna automatiskt. Float-baserade layouter klarar inte detta utan clearfix och margin-right-workarounds.

Metod 2: temats shortcode-kolumner

Vissa WordPress-teman, särskilt kommersiella som GeneratePress, Kadence och Astra, har ett inbyggt shortcode-system för kolumner. Detta visas vanligtvis som en knapp i editorn som genererar shortcodes som [one_half]...[/one_half] eller [column grid="6"]...[/column].

Om ditt tema stöder detta kan CF7-kolumner skapas utan CSS. Du måste dock tillåta CF7 att bearbeta shortcodes inuti formuläret, eftersom det ignorerar dem som standard.

Steg 1: aktivera shortcodes i CF7-editorn

Installera tillägget Contact Form 7 Shortcode Enabler. Det är minimalt, väger några kilobyte och gör exakt en sak: skickar shortcodes genom CF7.

Alternativ utan tillägg: lägg till ett filter i ditt barntemas functions.php:

1
add_filter('wpcf7_form_elements', 'cf7_do_shortcode');
2
 
3
function cf7_do_shortcode($form) {
4
    return do_shortcode($form);
5
}

Steg 2: omslut fält med kolumn-shortcodes

Principen är densamma som med div-klasser, men istället för CSS-klasser använder du temats shortcodes. Genereringsknappen finns vanligtvis i WordPress visuella editor:

Generera shortcodes för önskat antal kolumner och infoga innehåll:

Sidutdata:

Överför nu shortcodes till CF7-redigeraren. För 2 fält i rad:

1
[one_half]
2
<label>Your name (required)
3
  [text* your-name]
4
</label>
5
[/one_half]
6
 
7
[one_half_last]
8
<label>Your Email (required)
9
  [email* your-email]
10
</label>
11
[/one_half_last]
12
 
13
<label>Your message
14
  [textarea your-message]
15
</label>
16
 
17
[submit "Send"]

Resultatet i frontend blir samma två kolumner som i metod 1. Det här tillvägagångssättet är praktiskt när ditt tema redan har shortcodes för grid: ingen CSS behövs, och responsiviteten fungerar direkt.

Nackdelen: du är bunden till ditt tema. Byter du tema försvinner shortcode-kolumnerna, och ditt formulär går sönder. Metod 1 med CSS fungerar oavsett tema.

Video: steg-för-steg-guide för formulär med flera kolumner

En detaljerad videogenomgång på engelska där författaren demonstrerar båda tillvägagångssätten, inklusive flexbox-uppsättning och mobilanpassning:

⁉️🤔 Vanliga frågor

Fungerar flexbox-uppmärkning i äldre webbläsare?

Flexbox har stöd i alla moderna webbläsare sedan över tio år: Chrome, Firefox, Safari och Edge har full kompatibilitet utan prefix från versioner som släpptes 2015-2016. Enda undantaget är Internet Explorer 11, där flexbox fungerar med mindre buggar och kräver prefixet -ms-, men IE11:s andel av den globala trafiken har sjunkit under statistisk signifikans. För produktionssajter är flexbox säkert att använda utan prefix.

Kan jag ha olika antal kolumner i olika formulärrader?

Ja. Flexbox-containern .cf7-row isolerar varje rad: den kan innehålla 2, 3 eller 4 kolumner, medan nästa rad har en annan kombination. Exempel: första raden har namn + e-post (2 kolumner), andra har företag + telefon + ort (3 kolumner), och tredje har ett meddelande i full bredd. Se bara till att stänga en .cf7-row innan du öppnar nästa.

Vad händer om fältetiketter har olika längd och kolumner förskjuts?

I en flexbox-rad sträcker sig kolumner som standard till höjden av den högsta. Detta aktiveras uttryckligen med align-items: stretch (aktivt som standard i koden ovan). Om etiketter fortfarande ser visuellt feljusterade ut, sätt en fast etiketthöjd med label { min-height: 48px; display: block; } inuti formuläret.

Behöver jag aktivera shortcodes för metod 1 med CSS?

Nej. Metod 1 använder ren HTML (div-containrar med klasser), och CF7 skickar HTML-uppmärkning vidare utan extra tillägg. Shortcode Enabler-tillägget behövs bara för metod 2, där tema-shortcodes för kolumner används inuti formuläret.

Vad gör jag om mitt tema använder Gutenberg istället för shortcodes?

Gutenberg-kolumner fungerar på sid-/inläggsnivå, men inte inuti CF7-redigeraren. Själva CF7-formuläret infogas via shortcoden [contact-form-7 id="..." title="..."] på en sida, och Gutenberg styr inte fältlayouten inuti det. För kolumner inuti formuläret, använd metod 1 (CSS flexbox), som är kompatibel med alla redigerare.

Är det värt besväret att sätta upp kolumner?

Ett enkolumnsformulär fungerar. Ett tvåkolumnsformulär fungerar och samlar in fler inskick eftersom det ser prydligare ut och kräver mindre skrollande. Konverteringsskillnaden kan verka obetydlig vid första anblicken, men över tid blir det dussintals fler leads.

Flexbox-metoden löser problemet fullt ut: 15 rader CSS, 5 minuters setup, noll tillägg. Den är inte bunden till något tema, går inte sönder när CMS:et uppdateras och skapar inga beroenden. Om ditt tema redan stöder att dela in innehåll i kolumner fungerar shortcode-metoden också, kom bara ihåg shortcode-enabler-tillägget och att kolumnerna försvinner om du byter tema.

Båda metoderna har testats på CF7 version 6.1 och senare, med WordPress 6.5+. De fungerar i produktion utan överraskningar.