Jedes Feld mehr im Kontaktformular vermindert die Akzeptanzrate. Dennoch kommen schnell mehr als drei Felder zusammen. In einer Spalte nehmen diese viel Platz weg, wodurch der Wunsch nach einem Grid- bzw. Spalten-Layout aufkommt. Wie bekommst du diese Felder nun nebeneinander?
Plugin-Lösung: Ultimate Addons for Contact Form 7
Die einfachste Möglichkeit ist die Installation von UACF7. Schon in der kostenlosen Version bietet dieses Plugin einige spannende Funktionserweiterungen. So auch die Möglichkeit des Spalten-Layouts.
WordPress.org UAFCF7 & Plugin-Seite
In den allgemeinen Einstellungen des Plugins musst du anschließend deine Wunsch-Erweiterungen aktivieren. Im jetzigen Fall somit „Column or Grid“.
Nun kannst du innerhalb deines Kontaktformulars mit dem Shortcode [uacf7-row] eine Zeile erzeugen und mit [uacf7-col col:4] eine Spalte. Geschlossen wird der Shortcode ebenfalls entsprechend mit [/uacf7-row] & [/uacf7-col] .
Die Angabe col:4 teilt die Zeile in 1/3, da von 12 ausgegangen wird. Möchtest du keine Spalte erzeugen, wie es im Textfeld der Fall ist, entspricht dies somit: [uacf7-col col:12][/uacf7-col]
Hier noch das komplette Kontaktformular mit mehreren Spalten:
[uacf7-row][uacf7-col col:4]<p><label> Dein Name [text* your-name] </label></p>[/uacf7-col]
[uacf7-col col:4]<p><label> Deine E-Mail-Adresse [email* your-email] </label></p>[/uacf7-col]
[uacf7-col col:4]<p><label> Betreff [text* your-subject] </label></p>[/uacf7-col]
[/uacf7-row]
[uacf7-row][uacf7-col col:12]<p><label> Deine Nachricht (optional)[textarea your-message] </label></p>[/uacf7-col][/uacf7-row]
[submit "Senden"]
CSS-Lösung (ohne Plugin)
Hier findest du eine weitere einfache Möglichkeit, deine vorhandenen Felder innerhalb von Contact Form 7 in Spalten zu unterteilen. Dazu musst du um deine ContactForm7 Felder entsprechendes HTML setzen.
Damit es nicht unübersichtlich wird, solltest du deine HTML-Spalten am besten in einem Code-Editor aufbauen. Gerade bei umfangreichen Verschachtelungen kann das schnell wichtig werden. So siehst du deutlich besser als im Editor von CF7, wo deine Tags wieder geschlossen werden müssen. Falls hier Fehler passieren, kann es sein, dass deine Seite möglicherweise ungewollt anders aussehen kann. Aber kein Grund zur Sorge, du kannst es jederzeit korrigieren. Eine finale Prüfung ist dennoch wichtig. Wenn du mit dem HTML-Aufbau fertig bist, kannst du es direkt in dein CF7 Formular einfügen. Und das sieht in unserem Beispiel wie folgt aus.
Beispiel 1 – automatische Spaltenbreite
Hier erstellen wir einen einfachen Aufbau von zwei Spalten (dwp-form-column), welche sich in einer Zeile (dwp-form-row) befinden und einer Gruppe (dwp-form) angehören. Jede Zeile innerhalb dieser Gruppe kann bis zu 100% breit werden und unterteilt sich automatisch mit der Anzahl der hinzugefügten Spalten. Innerhalb der Gruppe können beliebig viele Zeilen gebildet werden.
<div class="dwp-form"> /*Gruppe*/
<div class="dwp-form-row"> /*Zeile*/
<div class="dwp-form-column"> /*Spalte*/
Inhalt Spalte 1
</div>
<div class="dwp-form-column"> /*Spalte*/
Inhalt Spalte 2
</div>
</div>
</div>
Die Spaltenzahl sollte je nach Inhalt nicht zu üppig werden, da deine Besucher sonst nichts mehr erkennen können. Eröffne dazu einfach eine weitere Zeile nachdem die erste geschlossen wurde. In unserem Beispiel ist es der vorletzte Div-Container und du könntest den gesamten Bereich zw. Zeile 2 und 13 direkt duplizieren.
Die genannten Tags und Klassen müssen nun noch gestylt werden. Neben den Grundeinstellungen findest du am Ende noch die responsiven Teil. Hier wird mittels „flex-direction: row;“ jede Spalte innerhalt einer Zeile zu gleichen Teilen nebeneinander gesetzt. Dazu ist folgendes CSS nötig.
/* Contact Form 7 - Column Grid */
.dwp-form {
width: 100%;
margin: 0 auto;
}
.dwp-form-row {
display: flex;
flex-direction: column;
width: 100%;
}
.dwp-form-row .wpcf7-form-control,
.wpcf7-form label {
width: 100%;
}
.dwp-form-column {
flex: 1;
padding: 0.5rem 0;
width: 100%;
}
.dwp-form-column:first-of-type {
padding-left: 0;
}
.dwp-form-column:last-of-type {
padding-right: 0;
}
/* CF7 Grid - Desktop Ansicht */
@media only screen and ( min-width: 48em ) {
.dwp-form-row {
flex-direction: row;
}
.dwp-form-column {
padding: 0.5rem 1rem;
}
}
Beispiel 2 – Spaltenbreite selbst bestimmen
Wenn du deine jeweilige Spaltenbreite selbst bestimmen möchtest, schaue dir das folgende Beispiel an. Hier legen wir ein eigenes Grid fest und bestimmen die einzelnen der 1-12 Spalten über die prozentuale Breite. So kannst du dein eigenes Raster
<div class="dwp-form">
<div class="dwp-form-row">
<div class="dwp-form-column col-4">
Inhalt Spalte 1
</div>
<div class="dwp-form-column col-8">
Inhalt Spalte 2
</div>
</div>
</div>
/* Contact Form 7 - Column Grid */
.dwp-form {
width: 100%;
margin: 0 auto;
}
.dwp-form-row {
display: flex;
flex-direction: column;
width: 100%;
}
.dwp-form-row .wpcf7-form-control,
.wpcf7-form label {
width: 100%;
}
.dwp-form-column {
flex: 1;
padding: 0.5rem 0;
width: 100%;
}
.dwp-form-column:first-of-type {
padding-left: 0;
}
.dwp-form-column:last-of-type {
padding-right: 0;
}
/* CF7 Grid - Desktop Ansicht */
@media only screen and ( min-width: 48em ) {
.dwp-form-row {
flex-direction: row;
}
.dwp-form-column {
padding: 0.5rem 1rem;
}
.dwp-form-column.col-12 {
width: 100%;
flex: inherit;
}
.dwp-form-column.col-11 {
width: 91.66666667%;
flex: inherit;
}
.dwp-form-column.col-10 {
width: 83.33333333%;
flex: inherit;
}
.dwp-form-column.col-9 {
width: 75%;
flex: inherit;
}
.dwp-form-column.col-8 {
width: 66.66666667%;
flex: inherit;
}
.dwp-form-column.col-7 {
width: 58.33333333%;
flex: inherit;
}
.dwp-form-column.col-6 {
width: 50%;
flex: inherit;
}
.dwp-form-column.col-5 {
width: 41.66666667%;
flex: inherit;
}
.dwp-form-column.col-4 {
width: 33.33333333%;
flex: inherit;
}
.dwp-form-column.col-3 {
width: 25%;
flex: inherit;
}
.dwp-form-column.col-2 {
width: 16.66666667%;
flex: inherit;
}
.dwp-form-column.col-1 {
width: 8.33333333%;
flex: inherit;
}
}