cf7-zweispaltig

Contact Form 7 zweispaltig? So einfach geht es!

12. August 2024
FM-Masteradmin
Das beliebte Kontaktformular Contact Form 7 hat auch in 2024 keine eingebaute Variante für zweispaltige Formulare, doch es gibt eine einfache Lösung.

Contact Form 7 zweispaltig? So einfach geht es!

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

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

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.

  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;
}

/*--- 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:

 
				
					<style>
/*--- 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 ---*/
</style>


<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"]


				
			

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.

Uns gefunden?

Jetzt drehen wir den Spieß um:

Du wirst gefunden!

Du hast den Weg hierher geschafft. Ab jetzt sind wir am Zug wir und zeigen anderen den Weg zu Dir!

…don’t be a fool