Submit Button mit CSS gestalten

Das Design der Kontaktformulare ist standardmäßig immer vom verwendeten Theme abhängig. Man kann einzelne Komponenten eines Kontaktformulars aber auch mit einem eigenen Layout versehen. Dafür werden CSS Regeln verwendet. Mit den folgenden CSS Angaben kann man den Button zum Absenden des Formulars grafisch anpassen.

Um eigene CSS Regeln für sein Theme zu hinterlegen, bietet sich der „Zusätzliche CSS“ Bereich an. Diesen Bereich findet man im Dashboard unter „Design“ im Unterpunkt „Customizer“.

Man sollte sich hier aber auf einfache überschaubare Regeln begrenzen. Um Grundelemente des Themes anzupassen verwendet man lieber eine eigene Stylesheet Datei.

Um den Submit Button nun anzusprechen, benötigt man einen CSS Selektor. Ein CSS Selektor wird verwendet um ein bestimmtes Element oder Elemente eines bestimmten Typs anzusprechen. Die CSS Regeln, die nach dem CSS Selektor folgen, werden dann nur auf das gewünschte Element angewendet.

Wir sprechen den Button nun ganz allgemein an. Die einzige Bedingung die wir noch stellen ist, dass er sich innerhalb eines Contact Form 7 Formulars befinden muss:

Um die Klasse des Buttons festzustellen reicht ein Blick in den Quelltext:

Innerhalb der geschweiften Klammern folgen die Formatierungen. Schriftfarbe, Rahmen und Hintergrundfarbe sind nur ein Teil der Möglichkeiten.

Es folgen einige Beispiele. Das standard Aussehen des Buttons sieht so aus:

Textfarbe anpassen:

/*Submit Button Textfarbe*/
.wpcf7 .wpcf7-submit{
color: rgb(85, 195, 220);
}

Hintergrundfarbe anpassen:

/*Hintergrundfarbe anpassen*/
.wpcf7 .wpcf7-submit{
background-color: rgb(85, 195, 220);
}

Ecken abrunden:

/*Rahmen anpassen*/
.wpcf7 .wpcf7-submit{
border-radius:5px 20px;
}

Quellen:
https://contactform7.com/styling-contact-form/
https://www.w3schools.com/css/css3_borders.asp