Mehrspaltige Kontaktformulare mit Contact Form 7

In vielen Themes werden Eingabefelder mit einer Breite von 100% ausgegeben. Das hat zur Folge, dass die Eingabefelder des Kontaktformulars untereinander angezeigt werden. Durch etwas CSS hat man die Möglichkeit individuelle zu bestimmen, welche Felder ein einer Reihe angezeigt werden sollen. Dadurch kann man sich zum Beispiel zweispaltige Kontaktformulare bauen.

In diesem Beispiel verwenden wir ein einfaches Kontaktformular mit zwei Eingabefeldern. Die Standardkonfiguration ohne Anpassungen würde so aussehen:

Kontaktformular Beispiel
Unsere Vorlage zum Demonstrieren mehrspaltiger Layouts.

Dieser Code ergibt folgendes Formular:

Felder untereinander
Eingabefelder werden untereinander angezeigt.

Wie bereits erwartet, werden die Eingabefelder untereinander angezeigt. Durch die Darstellung von Eingabefeldern in einer Zeile kann man die Übersichtlichkeit deutlich vereinfachen und die Länge des Formulars verringern.

Folgendes Beispiel zeigt ein Contact Form 7 Formular mit Eingabefeldern, welche nebeneinander angezeigt werden:

<div class="form-table-row">
<div class="form-table-cell">
<label> Ihr Name
    [text* your-name] </label>
</div>
<div class="form-table-cell">
<label> Ihr Nachname
    [text* your-name] </label>
</div>
</div>
[submit "Senden"]

Felder, welche in einer Reihe angezeigt werden sollen, werden von der Klasse „form-table-row“ umgeben. Jedes einzelne Eingabefeld wird dann noch einmal mit einer weiteren CSS Klasse „form-table-cell“ als einzelne Zelle definiert.

Für das Beispiel ist noch folgender CSS Code notwendig:

.form-table{
display: table;
}

.form-table-cell{
display: table-cell;
}

Ergebnis:

Felder nebeneinander
Eingabefelder werden nebeneinander angezeigt.

Mit diesem Weg sind nicht nur 2-spaltige Kontaktformulare möglich. Alle Elemente, welche in einer Reihe angezeigt werden sollen, müssen nur von den jeweiligen Klassen umgeben werden.

Mehrspaltiges Kontaktformular
Mehrspaltiges Kontaktformular

2 Gedanken zu „Mehrspaltige Kontaktformulare mit Contact Form 7“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.