Kommen SIe auf uns zu
Sülldorfer Weg 18A
22869 Schenefeld
moin@reents-media.de
Back

Contact Form 7 | Mehrspaltig gestalten

Mehrspaltiges Contact Form 7 Formular erstellen mit Code Snippet - Reents Media

In manchen Designs wünscht man sich einfach und schnell ein mehrspaltiges Formular. Mit Contact Form 7 können Formulare schnell generiert werden. Mit etwas Anpassung schaffen wir es, das Formular auch mehrspaltig zu generieren.

Wir zeigen, wie ein Contact Form 7 Fomular in wenigen Minuten mehrspaltig wird.

Schritt für Schritt zum mehrspaltigen Formular

Schauen wir uns zunächst die Ausgangslage an. Nach der Installation von Contact Form 7 haben wir ein Formular als Beispiel direkt hinterlegt. In diesem sind alle Felder horizontal untereinander angeordnet.

<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 erzeugen

Um dem Formular nun mitzuteilen, dass folgend mehrspaltige Inhalte entstehen sollen, verpacken wir den vollständigen Code in einen Container. Diesem Container geben wir die Klasse rm-form über die wir per CSS die Style-Elemente für das Anzeigen mehrerer Spalten übergeben.

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

Zeilen und Spalten realisieren

Nun müssen wir unsere Input-Felderoder darzustellenden Elemente noch in Zeilen und Spalten einteilen. Die Zeilen (waagerecht, rm-form-row) und Spalten (senkrecht, rm-form-column) helfen uns dabei. Die beiden Klassen richten wir abschließend mit CSS aus.

Beipsiel:

<div class="rm-form">

    <!-- Zeile 1 -->
    <div class="rm-form-row">

        <!-- Spalte 1 -->
        <div class="rm-form-column">
            <label>Name</label>
            [text* your-name]
        </div>

        <!-- Spalte 2 -->
        <div class="rm-form-column">
            <label>E-Mail-Adresse</label>
            [email* your-email]
        </div>
    </div>
    <!-- Ende der Zeile 1 -->

</div>

Nun können beliebig viele Spalten und Reihen verwendet werden. Um das Styling kümmern wir uns im CSS Schritt. Die Breite und Höhe der einzelnen Elemente lassen wir dort automatisch berechnen.

Wir empfehlen hierbei, maximal 3 Spalten in einer Reihe zu verwenden. Aus Erfahrung heraus wird alles mehr für den Kunden als störend und unpassend empfunden.

CSS | Optimierung für mobile Geräte | Responsive

Nun kommen wir zum wichtigsten – das Stylesheet (CSS) wo wir mit der Flexbox das Formular mehrspaltig gestalten werden.

Auf mobilen Geräten wird der Inhalt automatisch untereinander dargestellt werden. Je nach Größe des Gerätes wird die Breite dabei mitskalieren.

.rm-form {
    width: 100%;
    margin: 0 auto;
}

.rm-form-row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.rm-form-row .wpcf7-form-control {
    width: 100%;
}

.rm-form-column {
    flex: 1;
    padding: 0.5rem 0;
    width: 100%;
}

/* Notebook / Desktop */
@media only screen and ( min-width: 48em ) { 
    .rm-form-row {
        flex-direction: row;
    }

    .rm-form-column {
        padding: 0.5rem 1rem;
    }
}

Das Stylesheet sollte, sofern die Skills dort vorhanden sind, aus dem Contact Form 7 Formular ausgelagert werden. Sollte das Know-How an der Stelle noch nicht soweit sein, keine Sorge, es kann auch direkt in Contact Form 7 mit einem Parameter direkt mit eingesetzt werden.

Code Snippet – Mehrspaltiges Formular

So sieht der Code vollständig aus – dieser kann 1:1 in Contact Form 7 übernommen und angepasst werden.

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

Damit wünschen wir mega große Erfolge mit dem mehrspaltigem Formular!

Problemlösung: Absätze / Leerzeichen

Zwecks Lesbarkeit sind im HTML Code die Zeilen voneinander getrennt. Sprich nach rm-form-row kommt ein Absatz, um die Struktu besser zu erkennen und den Code lesbarer zu gestalten.

Wenn das WordPress Theme diesen Umbruch mit auf die Anzeigeseite bringt, kann der Umbruch entweder händisch im Code oben entfern werden oder durch eine Anpassung in der wp-config.php automatisiert vorgenommen werden.

Folgender Code muss der wp-config.php hinzugefügt werden:

define(
    'WPCF7_AUTOP',
    false
);
Riko Reents
https://reents-media.de