Standardoppsettet for Contact Form 7 er en vertikal kolonne med felt. Navn, e-post, emne, melding, stablet under hverandre, strukket til full bredde. Det ser klumpete ut og tar opp skjermplass, spesielt når du har mer enn tre felt.

Men her er poenget: CF7-editoren forstår HTML. Dette betyr at du kan pakke felt inn i div-containere, angi bredden deres og justere dem på en rad. Ingen utvidelser, ingen hacks, bare ren CSS.

Nedenfor finner du to fungerende metoder for å ordne Contact Form 7-felt i 2, 3 eller 4 kolonner. Den første er universell (HTML + CSS), den andre bruker temaets shortcode-system. Begge er testet på live nettsteder og ødelegger ikke mobillayout.

💡 Rask oversikt:

• Se hvordan et standard CF7-skjema ser ut og hvorfor vertikal layout er problematisk
• Kopier den ferdige CSS-flexboxen og lim den inn i child-temaet ditt (metode 1, ingen utvidelser)
• Hvis temaet ditt allerede støtter kolonne-shortcoder, aktiver dem i CF7 og pakk inn feltene dine (metode 2)
• Test resultatet på desktop og mobil (media query inkludert)

Slik ser et standard Contact Form 7-skjema ut

Etter å ha opprettet et skjema via «Kontakt» → «Legg til nytt», får du standard markup: tekstfelt, e-post, melding og en send-knapp, strengt stablet under hverandre. I editoren ser det slik ut:

På frontenden, med TwentySeventeen eller et hvilket som helst annet tema uten tilpasset skjemastyling, vil resultatet være vertikalt:

«Navn»- og «E-post»-feltene tar opp hele den tilgjengelige bredden, selv om halvparten ville vært nok for hvert. Resultatet: skjemaet ser massivt ut, brukere scroller mer enn nødvendig, og konverteringer faller.

CF7-editoren er designet for å akseptere HTML-markup inne i skjemamalen. Det er akkurat det vi skal bruke.

Metode 1: HTML + CSS flexbox (anbefalt)

Tilnærmingen: pakk skjemafeltene inn i <div>-elementer med CSS-kolonneklasser, og definer deretter disse klassene én gang i child-temaet ditt eller via en tilpasset CSS-utvidelse.

Ingen ekstra kolonneutvidelser nødvendig, bare CF7 og noen få linjer med CSS.

CSS-grid for 2 og 3 kolonner

Nedenfor finner du ferdig CSS med flexbox. I motsetning til float-baserte løsninger, justerer flex automatisk kolonner etter høyde og krever ikke 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
}

Plasser CSS-en i child-temaet ditt (style.css-fil) eller via Simple Custom CSS-utvidelsen, som legger til et stilfelt i adminpanelet uten å redigere filer.

Markup inne i CF7

Åpne skjemaeditoren (Kontakt → ditt skjema) og pakk felt inn i div-containere med CSS-klassene ovenfra. For 2 kolonner:

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å nettstedet vil resultatet se slik ut:

Tre kolonner, samme logikk

For tre felt på rad, endre klassene til cf7-col-3 og legg til en tredje blokk:

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:

Feltene «Name», «Email» og «Subject» er nå justert i én enkelt rad, mens meldingen spenner over full bredde under dem. På skjermer smalere enn 767px kollapser alle kolonnene til én, noe som holder skjemaet lesbart på telefoner.

Flexbox-fordelen: hvis felthøydene varierer (for eksempel en lang etikett i én kolonne), bryter ikke raden sammen. Flex justerer kolonnene automatisk. Float-baserte oppsett kan ikke gjøre dette uten clearfix- og margin-right-løsninger.

Metode 2: temakortkoder for kolonner

Noen WordPress-temaer, spesielt kommersielle som GeneratePress, Kadence og Astra, leveres med et innebygd kortkodesystem for kolonner. Dette vises vanligvis som en knapp i redigeringsverktøyet som genererer kortkoder som [one_half]...[/one_half] eller [column grid="6"]...[/column].

Hvis temaet ditt støtter dette, kan CF7-kolonner opprettes uten CSS. Du må imidlertid tillate at CF7 behandler kortkoder inne i skjemaet, siden det ignorerer dem som standard.

Trinn 1: aktiver kortkoder i CF7-redigeringsverktøyet

Installer utvidelsen Contact Form 7 Shortcode Enabler. Den er minimal, veier noen få kilobyte og gjør nøyaktig én ting: sender kortkoder gjennom CF7.

Alternativ uten utvidelse: legg til et filter i barnetemaets functions.php:

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

Trinn 2: pakk inn felt med kolonnekortkoder

Prinsippet er det samme som med div-klasser, men i stedet for CSS-klasser bruker du temakortkoder. Genereringsknappen finnes vanligvis i det visuelle redigeringsverktøyet i WordPress:

Generer kortkoder for ønsket antall kolonner og sett inn innhold:

Sideutdata:

Overfør nå kortkodene til CF7-redigeringsfeltet. For 2 felt på én 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 er de samme to kolonnene som i metode 1. Denne tilnærmingen er praktisk når temaet ditt allerede har kortkoder for rutenett: du trenger ingen CSS, og responsiviteten fungerer rett ut av boksen.

Ulempen er at du er låst til temaet ditt. Bytt tema, så forsvinner kortkodekolonnene og ødelegger skjemaet. Metode 1 med CSS kan overføres mellom alle temaer.

Video: trinnvis oppsett av flerkolonne-skjema

En detaljert videogjennomgang på engelsk der forfatteren demonstrerer begge tilnærmingene, inkludert flexbox-oppsett og mobiltilpasning:

⁉️🤔 Ofte stilte spørsmål

Fungerer flexbox-markup i eldre nettlesere?

Flexbox har vært støttet av alle moderne nettlesere i over ti år: Chrome, Firefox, Safari og Edge har full kompatibilitet uten prefikser fra versjoner utgitt i 2015-2016. Det eneste unntaket er Internet Explorer 11, der flexbox fungerer med mindre feil og krever -ms--prefikset, men IE11s andel av global trafikk har falt under statistisk signifikans. For produksjonsnettsteder er flexbox trygt å bruke uten prefikser.

Kan jeg ha ulikt antall kolonner i forskjellige skjemarader?

Ja. Flexbox-beholderen .cf7-row isolerer hver rad: den kan inneholde 2, 3 eller 4 kolonner, mens neste rad har en annen kombinasjon. For eksempel har første rad navn + e-post (2 kolonner), andre rad har firma + telefon + by (3 kolonner), og tredje rad har en melding i full bredde. Bare pass på å lukke én .cf7-row før du åpner den neste.

Hva om feltetiketter har ulik lengde og kolonner forskyver seg?

I en flexbox-rad strekker kolonner seg til høyden av den høyeste som standard. Dette er eksplisitt aktivert med align-items: stretch (aktivt som standard i koden over). Hvis etiketter fortsatt ser feiljusterte ut visuelt, sett en fast etiketthøyde med label { min-height: 48px; display: block; } inne i skjemaet.

Må jeg aktivere kortkoder for metode 1 med CSS?

Nei. Metode 1 bruker ren HTML (div-beholdere med klasser), og CF7 sender HTML-markup gjennom uten ekstra plugins. Shortcode Enabler-pluginen er bare nødvendig for metode 2, der temakortkodekolonner brukes inne i skjemaet.

Hva om temaet mitt bruker Gutenberg i stedet for kortkoder?

Gutenberg-kolonner fungerer på side-/innleggsnivå, men ikke inne i CF7-redigeringsfeltet. Selve CF7-skjemaet settes inn via [contact-form-7 id="..." title="..."]-kortkoden på en side, og Gutenberg styrer ikke feltlayout inne i det. For kolonner inne i skjemaet, bruk metode 1 (CSS flexbox), som er kompatibel med alle editorer.

Er det verdt innsatsen å sette opp kolonner?

Et enkeltkolonne-skjema fungerer. Et tokolonne-skjema fungerer og samler inn flere henvendelser fordi det ser ryddigere ut og krever mindre rulling. Konverteringsforskjellen kan virke ubetydelig ved første øyekast, men over tid summerer den seg til dusinvis av leads.

Flexbox-metoden løser problemet fullstendig: 15 linjer med CSS, 5 minutters oppsett, null plugins. Den er ikke knyttet til noe tema, ødelegges ikke når CMS-et oppdateres, og skaper ingen avhengigheter. Hvis temaet ditt allerede støtter inndeling av innhold i kolonner, fungerer kortkodetilnærmingen også, bare husk shortcode enabler-pluginen og at kolonner vil forsvinne hvis du bytter tema.

Begge metodene er testet på CF7 versjon 6.1 og nyere, med WordPress 6.5+. De fungerer i produksjon uten overraskelser.