0351 16056061 | info@stachowitz-medien.de
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.
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.
Hallo Herr Stachowitz
„Das fertige Formular kannst du jetzt anklicken“ https://stachowitz-medien.de/kontakt/ und ich gehe davon aus es soll zweispaltig sein, wie hier beschrieben: https://stachowitz-medien.de/zweispaltige-kontaktformulare-mit-contactform-7/.
Doch es sind alle Felder in einer spalte wie bei allen anderen tutorials die ich bis jetzt gefunden habe. Wie bekommen wird die Zweispaltigkeit in deinem und meinem Formular?
LG Tobias Conrad
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