Contact Form 7 ist als Kontaktformular auf der eigenen WordPress-Seite super beliebt, aber für Anfänger teilweise etwas kompliziert.
Die erste Herausforderung dürfte es sein, ein zweispaltiges Layout aufzubauen. Mit diesen einfachen Code kann man das Formular ganz einfach zweispaltig gestalten.
Voraussetzungen für mehrere Spalten in CF7
- Installation von Contact Form 7
- Das wars!
Contact Form 7: So wird es zweispaltig
Vorname [text first-name]
Nachname [text last-name]
Email [email* your-email]
Rufnummer [text your-phone]
Betreff [text* your-subject]
Nachricht [textarea* your-message]
[submit "Senden"]
Damit das Formular zweispaltig wird, erstellen wir zwei einfache DIV-Klassen. In diesen Klassen bestimmen wir den Inhalt links und rechts, der kann natürlich nach belieben ergänzt werden.
In diesem Beispiel wird der Inhalt für den Betreff und die Nachricht unter den beiden Spalten dargestellt.
CSS-Klasse für zweispaltiges Layout in Contact Form 7 ergänzen
Nun müssen wir in der Custom.css oder den Customizer (was auch nichts anderes als eine Custom.css ist) eine kleine Ergänzung vornehmen. Je nach Design gibt es auch in den Einstellungen des Themes selbst einen solchen Punkt.
- In WordPress einloggen und unter “Design” auf “Customizer” gehen
- Ganz unten nun auf “Zusätzliches CSS” klicken
- Folgenden Code einfügen:
/*--- Zweispaltiges CF7 Layout ---*/
#left {
width: 47%;
float: left;
margin-right: 6%;
}
#right {
width: 47%;
float: left;
}
.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
overflow: hidden;
margin-bottom: 10px;
}
.clearfix {
display: block;
}
/*--- Ende ---*/
Alternativ kannst Du es auch direkt in das Formular integrieren. Ergänze dafür einfach die CSS in Deinem Formular, in dem du es über den eigentlichen Formular in <style>[…]</style> überträgst.
Der vollständige Code sieht dann wie folgt aus und kann so 1:1 in Contact Form 7 übernommen werden:
Vorname [text first-name]
Nachname [text last-name]
Email [email* your-email]
Rufnummer [text your-phone]
Betreff [text* your-subject]
Nachricht [textarea* your-message]
[submit "Senden"]
Zweispaltiges Design anpassen
Wenn Du die Breite anpassen willst, kannst Du in den Bereichen #left & #right den Punkt width anpassen. Du kannst in der CSS theoretisch auch weitere Formatierungen einbauen, die den Look innerhalb des Bereiches anpassen.
So kannst Du beispielsweise für die Kästen auf der rechten Seite einen anderen Hintergrund bestimmen, um den Fokus auf den Bereich zu setzen.
Die originale Quelle des zweispaltigen CF7
Die originale Variante haben wir bei WPSnippet.com gesehen, haben die Variante jedoch ein wenig angepasst und vor allem responsive gemacht. Dennoch möchten wir die Quelle nicht vorenthalten.
Wir hoffen, der kleine Tipp hat schnell geholfen. Sollten mal größere Anpassungen an einer Seite gemacht werden müssen, können wir natürlich gerne helfen. Einfach kurz Kontakt zu uns aufnehmen, Anliegen schildern und auf schnelle Rückmeldung warten.