Zweispaltige Kontaktformulare mit ContactForm 7

Mit Contact Form lassen sich auf schnelle und einfache Weise Kontaktformulare in WordPress umsetzen. Doch diese sehen oftmals, je nach genutztem Theme, nicht wirklich schön aus. Denn die Formularfelder sind alle untereinander angeordnet.

Kontaktformular mit Contact-Form

ContactForm 7 Formulare anpassen

Es bedarf keiner großen Hexerei, wenn du dich mit CSS auskennst, um dein Formular aufzufrischen. Mit wenigen Zeilen Code kannst du dein Formular zweispaltig gestalten. Gestalte zuerst das Formular selbst. Lege alle Felder an, die du brauchst. Das kann z.B. so aussehen:

</style>
<div class="wps-form">
    <div class="wps-form-row">
        <div class="wps-form-column">
            [text* your-name placeholder "Dein Name"]
        </div>
        
<div class="wps-form-column">
         
            [email* your-email placeholder "Deine E-Mail-Adresse"]
        </div>
    </div>

    <div class="wps-form-row">
        <div class="wps-form-column">
          
            [text your-subject placeholder "Dein Grund zur Anfrage"]
        </div>
    </div>

    <div class="wps-form-row">
        <div class="wps-form-column">
            [textarea your-message placeholder"Deine Mitteilung an Stachowitz Medien"]
        </div>
    </div>

    <div class="wps-form-row">
        <div class="wps-form-column">
            [submit "NACHRICHT ABSCHICKEN"]

        </div>
    </div>
</div>

Jetzt kommt der zweite Teil, um dein Kontaktformular aufzuwerten. Im Customizer von WordPress kannst du zusätzliches CSS hinterlegen. Da kopierst du dann folgenden Code rein oder direkt in die style.css deines Themes.


.wps-form {
    width: 100%;
    margin: 0 auto;

}
.wps-form .wps-form-row {
    display: flex;
    flex-direction: column;
    width: 100%;
font-size:15px;
	
}
.wps-form .wps-form-row .wpcf7-form-control {
    width: 100%;
font-family: arial;

}
.wps-form .wps-form-column {
    flex: 1;
    width: 100%;
	  padding: .5rem 0;

	}

/* Notebook / Desktop */
@media only screen and (min-width: 48em) { 
    .wps-form .wps-form-row {
        flex-direction: row;
    }
    .wps-form .wps-form-column {
        padding: .5rem 1rem;
    }
}

Das fertige Formular mit ContactForm 7 und CSS

Das fertige Formular kannst du jetzt anklicken.

ContactForm 7 mit einem Plugin anpassen

Wenn du keine Kenntnisse in CSS hast, du aber dennoch ein ansprechendes Formular auf deiner Homepage nutzen willst, dann geht es auch mit Hilfe eines Plugins. Contact-Form-7-Style hilft dir dabei, dein Formular mit frischen Farben zu versehen.

LASS UNS IN VERBINDUNG BLEIBEN!

Ich möchte dir gerne die neuesten Neuigkeiten und Angebote zukommen lassen 😎

Hinweise zum Newsletter-Versand

2 Kommentare

    • Hallo Tobias,
      vielen Dank für deinen Beitrag.
      Du hast recht, mein Formular ist nicht zweispaltig, das liegt daran, dass die CSS-Anweisungen von der eigentlichen CSS-Datei überschrieben werden. Die Container sind nicht vererbbar, wie es heißt.
      Ich nehme mich dem Thema nochmals an. Also bleib gespannt 🙂

      Viele Grüße
      Frank

Schreibe einen Kommentar

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