Contact Form 7: So werden Formulare einfach mehrspaltig

Mehrspaltige Formulare mit Contact Form 7 zu erstellen geht leichter als du denkst. In diesem Beitrag zeige ich dir Schritt für Schritt, wie du in nur fünf Minuten ein mobilfähiges Formular mit HTML und CSS erstellst.

Eingabefelder horizontal anordnen

Als erstes musst du dein Contact Form 7 Formular im WordPress Backend öffnen. Wenn du noch keine Änderungen vorgenommen hast, wird es in etwa wie folgt aussehen.

<label> Ihr Name (Pflichtfeld)
    [text* your-name] </label>

<label> Ihre E-Mail-Adresse (Pflichtfeld)
    [email* your-email] </label>

<label> Betreff
    [text your-subject] </label>

<label> Ihre Nachricht
    [textarea your-message] </label>

[submit "Senden"]

Container

Zunächst wird der gesamte Code mit einem Container umfasst, dem du die Klasse wps-form gibst. Über diese Klasse gibst du deiner Seite zu verstehen, dass mehrspaltiger Inhalt folgen wird.

<div class="wps-form">
    <!-- Contact Form 7 Code -->
</div>

Zeilen und Spalten

Danach werden die Formularfelder in Zeilen (waagerecht, wps-form-row) und Spalten (senkrecht, wps-form-column) gegliedert. Später werden wir sie grafisch aneinander ausgerichten.

Häufig gewünschte Anpassungen sind die Darstellung der Postleitzahl neben dem Ortsnamen oder wie nachfolgend, des Namens neben der E-Mail-Adresse.

<div class="wps-form">
    <div class="wps-form-row">
        <div class="wps-form-column">
            <label>Name</label>
            [text* your-name]
        </div>
        <div class="wps-form-column">
            <label>E-Mail-Adresse</label>
            [email* your-email]
        </div>
    </div>
</div>

Du kannst beliebig viele Spalten nebeneinander verwenden. Breite und Höhe werden dabei automatisch berechnet. Um das Nutzererlebnis so optimal wie möglich zu gestalten, möchte ich dir jedoch nahelegen mit maximal drei Spalten auszukommen.

Formular für Mobilgeräte optimieren

Zum Schluss kommt das Stylesheet, umgesetzt in CSS mit Hilfe des Flexbox-Modells.

Auf mobilen Endgeräten, wie Smartphones und einigen Tablets, werden die Formularfelder untereinander angeordnet. Größere Geräte zeigen das mehrspaltige Formular in voller Breite an.

.wps-form {
    width: 100%;
    margin: 0 auto;
}
.wps-form .wps-form-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.wps-form .wps-form-row .wpcf7-form-control {
    width: 100%;
}
.wps-form .wps-form-column {
    flex: 1;
    width: 100%;
    padding: .5rem 0;
}
/* Notebook / Desktop */
@media only screen and ( min-width: 48em ) { 
    .wps-form .wps-form-row {
        flex-direction: row;
    }
    .wps-form .wps-form-column {
        padding: .5rem 1rem;
    }
}

Wenn du dich ein wenig mit der Materie auskennst, solltest du das CSS in dein Theme Stylesheet auslagern. Bist du auf dem Gebiet nicht so bewandert, zeige ich im folgenden Abschnitt wie man das Stylesheet direkt im Contact Form 7 Editor einfügt.

Mehr Infos zur Funktionsweise des Flexbox-Modells findest du im Artikel Einführung in das Flexbox-Modell von CSS von Jonas Hellwig.

Das vollständige Snippet

So sieht der Code für mein zweispaltiges Kontaktformular aus.

<style>
.wps-form {
    width: 100%;
    margin: 0 auto;
}
.wps-form .wps-form-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.wps-form .wps-form-row .wpcf7-form-control {
    width: 100%;
}
.wps-form .wps-form-column {
    flex: 1;
    width: 100%;
    padding: .5rem 0;
}
/* Notebook / Desktop */
@media only screen and (min-width: 48em) { 
    .wps-form .wps-form-row {
        flex-direction: row;
    }
    .wps-form .wps-form-column {
        padding: .5rem 1rem;
    }
}
</style>
<div class="wps-form">
    <div class="wps-form-row">
        <div class="wps-form-column">
            <label>Name</label>
            [text* your-name]
        </div>
        <div class="wps-form-column">
            <label>E-Mail-Adresse</label>
            [email* your-email]
        </div>
    </div>

    <div class="wps-form-row">
        <div class="wps-form-column">
            <label>Betreff</label>
            [text your-subject]
        </div>
    </div>

    <div class="wps-form-row">
        <div class="wps-form-column">
            <label>Nachricht</label>
            [textarea your-message]
        </div>
    </div>

    <div class="wps-form-row">
        <div class="wps-form-column">
            [submit "Senden"]
        </div>
    </div>
</div>

Ansonsten bleibt mir nur noch, dir viel Spaß bei der Ausarbeitung deines CF7 Kontaktformulars zu wünschen. Denke immer daran, weniger ist mehr.

Problemlösung: Ungewünschte Absätze / Leerzeilen

Der Übersichtlichkeit halber habe ich die Zeilen (wps-form-row) im Beispielcode mit Leerzeilen voneinander getrennt.

Sollten diese Leerzeilen bei der Ausgabe auf deiner Seite ebenfalls erscheinen, kannst du sie entweder händisch im Code entfernen oder in der WordPress Konfiguration die automatischen Contact Form 7 Absätze deaktivieren.

Teile diesen Beitrag