Contact Form 7 zweispaltig? So einfach geht es!

10. Februar 2024
Contact Form 7 ist als Kontaktformular auf der einen Seite super beliebt, aber auch 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.

Contact Form 7: So wird es zweispaltig

				
					<div class="clearfix">
  <div id="left">
    Vorname [text first-name]<br>
    Nachname [text last-name]
  </div>
  <div id="right">
    Email [email* your-email]<br>
    Rufnummer [text your-phone]
  </div>
</div>
Betreff [text* your-subject]<br>
Nachricht [textarea* your-message]<br>
[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.

Benötigte CSS-Klasse ergänzen

Damit es nun auch funktioniert und vernünftig aussieht, müssen wir in der Custom.css oder den Customizer (was auch nichts anderes als eine Custom.css ist) eine kleine Änderung vornehmen. Je nach Design gibt es auch in den Einstellungen des Themes selbst einen solchen Punkt.
  1. In WordPress einloggen und unter “Design” auf “Customizer” gehen
  2. Ganz unten nun auf “Zusätzliches CSS” klicken
  3. 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;
}

/*--- 2 Column Form Styles End ---*/

				
			

Die originale Quelle des zweispaltigen CF7

Die originale Variante haben wir bei WPSnippet.com gesehen, haben die Variante jedoch ein wenig angepassst 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.