Submit Button Rahmen Header

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“.

Theme Customizer
Nicht jedes Theme hat einen eigenen Customizer Bereich.

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:

Ein CSS Element über die Klasse ansprechen.

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

Klassenname Submit Button
Die verwendeten Klassen des Buttons sieht man im 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:

Standard CSS
Submit Button ohne individuelle Anpassungen.

Textfarbe anpassen:

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

Hintergrundfarbe anpassen:

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

Ecken abrunden:

/*Rahmen anpassen*/
.wpcf7 .wpcf7-submit{
border-radius:5px 20px;
}
CSS Runde Ecken
Button mit runden Ecken.

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

Ein Gedanke zu „Submit Button mit CSS gestalten“

Schreibe einen Kommentar zu Christian Antworten abbrechen

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