Zweispaltige Kontaktformulare mit ContactForm 7

11. September 2018 | 0Kommentare
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">
            
        </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">
          
            
        </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.

Schreibe einen Kommentar

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

Redaktionsplan downloaden

Drucksachen-Freebies


Kostenlose Druckvorlagen zum Mitnehmen
JETZT DOWNLOADEN!

Auf dem Laufenden bleiben

Hinweise zum Versand