Der Standardaufbau von Contact Form 7 ist eine vertikale Spalte mit Feldern. Name, E-Mail, Betreff, Nachricht, untereinander gestapelt, über die volle Breite gezogen. Das wirkt klobig und verbraucht Bildschirmfläche, besonders wenn Sie mehr als drei Felder haben.

Der entscheidende Punkt: Der CF7-Editor versteht HTML. Das bedeutet, Sie können Felder in div-Container verpacken, deren Breite festlegen und sie in einer Zeile ausrichten. Keine Plugins, keine Tricks, nur reines CSS.

Nachfolgend finden Sie zwei funktionierende Methoden, um Contact Form 7-Felder in 2, 3 oder 4 Spalten anzuordnen. Die erste ist universell (HTML + CSS), die zweite nutzt das Shortcode-System Ihres Themes. Beide wurden auf Live-Seiten getestet und zerstören keine mobilen Layouts.

💡 Kurzüberblick:

• Sehen Sie, wie ein Standard-CF7-Formular aussieht und warum das vertikale Layout problematisch ist
• Kopieren Sie das fertige CSS-Flexbox und fügen Sie es in Ihr Child-Theme ein (Methode 1, ohne Plugins)
• Falls Ihr Theme bereits Spalten-Shortcodes unterstützt, aktivieren Sie diese in CF7 und umschließen Sie Ihre Felder damit (Methode 2)
• Testen Sie das Ergebnis auf Desktop und Mobilgerät (Media Query ist enthalten)

Wie ein Standard-Contact-Form-7-Formular aussieht

Wenn Sie ein Formular über „Kontakt" → „Neu hinzufügen" erstellen, erhalten Sie Standard-Markup: Textfelder, E-Mail, Nachricht und einen Absende-Button, streng untereinander gestapelt. Im Editor sieht das so aus:

Im Frontend, mit TwentySeventeen oder einem anderen Theme ohne benutzerdefinierte Formulargestaltung, ist die Ausgabe vertikal:

Die Felder „Name" und „E-Mail" nehmen die gesamte verfügbare Breite ein, obwohl für jedes die Hälfte ausreichen würde. Das Ergebnis: Das Formular wirkt wuchtig, Nutzer scrollen mehr als nötig und die Conversion sinkt.

Der CF7-Editor ist darauf ausgelegt, HTML-Markup innerhalb der Formularvorlage zu akzeptieren. Genau das werden wir nutzen.

Methode 1: HTML + CSS Flexbox (empfohlen)

Der Ansatz: Umschließen Sie Formularfelder mit <div>-Elementen, die CSS-Spaltenklassen tragen, und definieren Sie diese Klassen einmalig in Ihrem Child-Theme oder über ein Custom-CSS-Plugin.

Keine zusätzlichen Spalten-Plugins nötig, nur CF7 und ein paar Zeilen CSS.

CSS-Grid für 2 und 3 Spalten

Nachfolgend finden Sie einsatzbereites CSS mit Flexbox. Anders als float-basierte Lösungen richtet Flex Spalten automatisch in der Höhe aus und benötigt keine 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
}

Platzieren Sie das CSS in Ihrem Child-Theme (Datei style.css) oder über das Plugin Simple Custom CSS, das im Admin-Bereich ein Stilfeld hinzufügt, ohne dass Sie Dateien bearbeiten müssen.

Markup innerhalb von CF7

Öffnen Sie den Formular-Editor (Kontakt → Ihr Formular) und umschließen Sie die Felder mit div-Containern, die die CSS-Klassen von oben tragen. Für 2 Spalten:

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

Auf der Website sieht das Ergebnis dann so aus:

Drei Spalten, gleiche Logik

Für drei Felder in einer Zeile ändern Sie die Klassen auf cf7-col-3 und fügen einen dritten Block hinzu:

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-Ausgabe:

Die Felder „Name", „E-Mail" und „Betreff" sind nun in einer einzigen Zeile angeordnet, während die Nachricht darunter die volle Breite einnimmt. Auf Bildschirmen mit weniger als 767 Pixeln Breite fallen alle Spalten in eine zusammen, sodass das Formular auf Mobiltelefonen lesbar bleibt.

Der Flexbox-Vorteil: Wenn Feldhöhen unterschiedlich ausfallen (etwa durch ein langes Label in einer Spalte), bricht die Zeile nicht auseinander. Flex richtet Spalten automatisch aus. Float-basierte Layouts können das nicht ohne clearfix- und margin-right-Workarounds leisten.

Methode 2: Theme-Shortcode-Spalten

Einige WordPress-Themes, insbesondere kommerzielle wie GeneratePress, Kadence und Astra, verfügen über ein eingebautes Shortcode-System für Spalten. Dies erscheint typischerweise als Schaltfläche im Editor, die Shortcodes wie [one_half]...[/one_half] oder [column grid="6"]...[/column] generiert.

Sofern Ihr Theme dies unterstützt, lassen sich CF7-Spalten ohne CSS erstellen. Allerdings müssen Sie CF7 erlauben, Shortcodes innerhalb des Formulars zu verarbeiten, da es diese standardmäßig ignoriert.

Schritt 1: Shortcodes im CF7-Editor aktivieren

Installieren Sie das Plugin Contact Form 7 Shortcode Enabler. Es ist minimal, wiegt nur wenige Kilobyte und erledigt genau eine Aufgabe: Es leitet Shortcodes durch CF7 hindurch.

Alternative ohne Plugin: Fügen Sie einen Filter in die functions.php Ihres Child-Themes ein:

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

Schritt 2: Felder mit Spalten-Shortcodes umschließen

Das Prinzip ist dasselbe wie bei Div-Klassen, nur dass Sie anstelle von CSS-Klassen Theme-Shortcodes verwenden. Die Schaltfläche zum Generieren findet sich üblicherweise im visuellen Editor von WordPress:

Generieren Sie Shortcodes für die gewünschte Spaltenanzahl und fügen Sie den Inhalt ein:

Seitenausgabe:

Übertragen Sie nun die Shortcodes in den CF7-Editor. Für 2 Felder in einer Zeile:

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

Das Frontend-Ergebnis zeigt dieselben zwei Spalten wie bei Methode 1. Dieser Ansatz ist praktisch, wenn Ihr Theme bereits Shortcodes für Raster bereitstellt: kein CSS nötig, und die Responsivität funktioniert sofort.

Der Nachteil: Sie binden sich an Ihr Theme. Wechseln Sie das Theme, verschwinden die Shortcode-Spalten und Ihr Formular geht kaputt. Methode 1 mit CSS funktioniert mit jedem Theme.

Video: Schritt-für-Schritt-Anleitung für mehrspaltige Formulare

Eine ausführliche Video-Anleitung auf Englisch, in der der Autor beide Ansätze demonstriert, inklusive Flexbox-Einrichtung und mobiler Anpassung:

⁉️🤔 Häufig gestellte Fragen

Funktioniert Flexbox-Markup in älteren Browsern?

Flexbox wird seit über zehn Jahren von allen modernen Browsern unterstützt: Chrome, Firefox, Safari und Edge bieten vollständige Kompatibilität ohne Präfixe ab Versionen, die 2015-2016 veröffentlicht wurden. Die einzige Ausnahme ist Internet Explorer 11, wo Flexbox mit kleineren Fehlern funktioniert und das Präfix -ms- erfordert, aber der Anteil von IE11 am weltweiten Traffic ist unter die statistische Signifikanz gefallen. Für Produktivseiten ist Flexbox ohne Präfixe sicher einsetzbar.

Kann ich in verschiedenen Formularzeilen unterschiedlich viele Spalten haben?

Ja. Der Flexbox-Container .cf7-row isoliert jede Zeile: Er kann 2, 3 oder 4 Spalten enthalten, während die nächste Zeile eine andere Kombination aufweist. Beispielsweise enthält die erste Zeile Name + E-Mail (2 Spalten), die zweite Firma + Telefon + Stadt (3 Spalten) und die dritte eine Nachricht über die volle Breite. Achten Sie nur darauf, einen .cf7-row zu schließen, bevor Sie den nächsten öffnen.

Was tun, wenn Feldbezeichnungen unterschiedlich lang sind und Spalten verrutschen?

In einer Flexbox-Zeile dehnen sich Spalten standardmäßig auf die Höhe der höchsten aus. Dies wird explizit mit align-items: stretch aktiviert (im obigen Code standardmäßig aktiv). Falls Bezeichnungen optisch trotzdem versetzt erscheinen, setzen Sie eine feste Höhe mit label { min-height: 48px; display: block; } innerhalb des Formulars.

Muss ich Shortcodes für Methode 1 mit CSS aktivieren?

Nein. Methode 1 verwendet reines HTML (div-Container mit Klassen), und CF7 leitet HTML-Markup ohne zusätzliche Plugins durch. Das Shortcode-Enabler-Plugin wird nur für Methode 2 benötigt, wenn Theme-Shortcode-Spalten innerhalb des Formulars verwendet werden.

Was, wenn mein Theme Gutenberg statt Shortcodes verwendet?

Gutenberg-Spalten funktionieren auf Seiten- und Beitragsebene, aber nicht innerhalb des CF7-Editors. Das CF7-Formular selbst wird über den Shortcode [contact-form-7 id="..." title="..."] auf einer Seite eingefügt, und Gutenberg steuert das Feldlayout darin nicht. Für Spalten innerhalb des Formulars nutzen Sie Methode 1 (CSS Flexbox), die mit jedem Editor kompatibel ist.

Lohnt sich der Aufwand für die Spalteneinrichtung?

Ein einspaltiges Formular funktioniert. Ein zweispaltiges Formular funktioniert und sammelt mehr Einsendungen, weil es ordentlicher aussieht und weniger Scrollen erfordert. Der Conversion-Unterschied mag auf den ersten Blick geringfügig erscheinen, summiert sich aber mit der Zeit zu Dutzenden von Leads.

Die Flexbox-Methode löst das Problem vollständig: 15 Zeilen CSS, 5 Minuten Einrichtung, null Plugins. Sie ist an kein Theme gebunden, geht bei CMS-Updates nicht kaputt und erzeugt keine Abhängigkeiten. Wenn Ihr Theme bereits die Aufteilung von Inhalten in Spalten unterstützt, funktioniert auch der Shortcode-Ansatz, denken Sie nur an das Shortcode-Enabler-Plugin und daran, dass die Spalten bei einem Theme-Wechsel verschwinden.

Beide Methoden wurden mit CF7 Version 6.1 und höher sowie WordPress 6.5+ getestet. Sie funktionieren im Produktivbetrieb ohne Überraschungen.