Contact Form 7 Gestaltung

Contact Form 7
13. November 2016
Bestellungen manuell hinzufügen
13. November 2016

Das WordPress Plugin Contact Form 7 ermöglicht es, schnell und ohne viel Aufwand Kontaktformulare zu erstellen und in die eigene Internetseite einzubinden. Das Plugin ist leicht zu bedienen, bietet aber von Hause aus keine Funktion, das eigene Formular optisch zu verändert. Mit einigen Anpassungen an der CSS lässt sich diese Optik aber anpassen. Standardmäßig werden in Contact Form 7 alle Felder in einer Liste untereinander dargestellt. Die Abbildung zeigt die Darstellung eines normalen Formulars. Das Tutorial soll bei der Contact Form 7 Gestaltung unterstützen.

Contact Form 7 Live Version mediaagentur in berlin

Um Anpassungen an der CSS ohne weiteren Aufwand vornehmen zu können, bietet es sich an, ein Custom CSS Plugin zu installieren. Welches dabei gewählt wird, spielt keine Rolle. Es bietet jedoch den Vorteil, keine Änderungen an der CSS des Plugins vornehmen zu müssen und dennoch das Layout zu verändern.

In unserem Beispiel ist das Ziel ein Kontaktformular, dass die Felder Vorname, Nachname und E-Mail Adresse in eine Zeile bringt.

Wordpress Contact Form 7 Live Version

Der folgende CSS Code bietet die Möglichkeit, die Zeilen in Contact Form 7 als ganze Zeile, zweispaltig oder dreispaltig anzulegen. Dieser Abschnitt muss in das zuvor in WordPress installierte Custom CSS Plugin kopiert werden.

#responsive-form{
max-width:800px /*-- change this to get your desired form width --*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.column-half{
float: left;
position: relative;
padding: 0.65rem;
width:50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}

.column-third{
float: left;
position: relative;
padding: 0.65rem;
width:33%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}</code>

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}

 

Danach wird im Feld Formular von Contact Form 7 der folgende Abschnitt eingefügt.

<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-third">Vorname* [text* Vorname]</div>
<div class="column-third">Nachname* [text* Nachname]</div>
<div class="column-third">Email* [email* email]</div>
</div>

<div class="form-row">
<div class="column-full">Betreff [text betreff]</div>
</div>

<div class="form-row">
<div class="column-full">Nachricht [textarea your-message]</div>
</div>

<div class="form-row">
<div class="column-full">[submit "Senden"]</div>
</div>

Bei allen mit einem * gekennzeichneten Feldern handelt es sich um Pflichtfelder.
</div><!--end responsive-form-->

 

Dieser Abschnitt, in Kombination mit dem zuvor gezeigten CSS Code erzeugt ein Formular mit drei Spalten für Vorname, Nachname und E-Mail.

  • Über .column-full werden Felder angesprochen, die über eine ganze Zeile gehen
  • Über .column-half werden Felder angesprochen, die über eine halbe Zeile gehen sollen
  • Über .column-third wird eine Drittel Teilung einer Zeile erzeugt

Wordpress Contact Form 7 Live Version

Wie schon beschrieben, ist im CSS der Code für alle drei Variationen enthalten, allerdings muss dafür der Code in Contact Form 7 noch einmal angepasst werden. Auf diese Weise lässt sich schnell das Layout eines WordPress Kontaktformulares anpassen.

Ähnliche Einträge