Wie kann ich den Button eines Kontaktformulars gestalterisch anpassen?

Den "Absenden" Button findest du u.a. bei einem Kontaktformular.

Standardmäßig ist die Hintergrundfarbe des Buttons ein helles Grau. Fährt man mit der Maus über den Button ändert sich die Hintergrundfarbe in einen dunkleren Grauton.

ACHTUNG: Ein Kontaktformular dient zur reinen Kontaktaufnahme eines Webseiten-Besuchers zu dir und ist nicht mit einem Opt-In Formular (= E-Mail Eintrag in eine Liste) zu verwechseln.

Dieser Standard-Button kann nur über einen individuellen CSS-Code angepasst werden. Aber keine Sorge – auch wenn du dich nicht mit CSS-Code auskennen solltest, führen wir dich hier Schritt für Schritt durch die Anpassung durch, versprochen.

CSS-Code hinzufügen

Bitte kopiere den folgenden CSS-Code und füge ihn im Backend unter "Design" > "Theme Optionen" am der Seite unter "Benutzerdefiniertes Design" ein:

 .gform_footer .gform_button { background-color: #f2f2f2 !important; border: 1px solid #cccccc !important; border-radius: 3px !important; color: #515151 !important; }

HINWEIS: Dieser CSS-Code greift für alle Buttons deiner (Kontakt-) Formulare, welche du im Backend unter "Webseite" > "Formulare" findest.

Nachfolgend werden wir den CSS-Code und dessen Eigenschaften sowie gestalterischen Auswirkungen ganz genau erklären. Für eine bessere Übersicht kannst du die einzelnen Eigenschaften jeweils in eine neue Zeile setzen, wie im Bild oben zu sehen.

background-color

Hier legst du die Hintergrundfarbe des Buttons über einen HEX-Code fest. Standardmäßig ist die Hintergrundfarbe auf #f2f2f2 gesetzt. Das ist ein helles Grau.

Besuche am besten diese Seite hier, um über den Farbwähler einen eigenen HEX-Code zu bekommen: https://html-color-codes.info/webfarben_hexcodes/

Für einen orangenen Button-Hintergrund ändern wir in diesem Beispiel den HEX-Code auf #ffbb00 ab.

border

Hier definieren wir die Rahmenlinie des Buttons. Derzeit ist diese eine 1px dicke, durchgezogene Linie mit einem etwas dunklerem Grau-Farbton als der Button-Hintergrund.

Auch hier kannst du einen eigenen HEX-Code für die Rahmenfarbe abgeben. In unserem Beispiel verstärken wir die Rahmenlinie auf 2px und verwenden einen etwas dunkleren Orange-Farbton.

border-radius

Dies beschreibt den Eckenradius des Buttons. Hier kannst du gerne einen eingenen Wert eintragen. Wir empfehlen Werte zwischen 3 und 15 px.

color

Über diese Eigenschaft bestimmen wir die Schriftfarbe des Buttons. Auch hier kannst du einen eigenen HEX-Code angeben.

Da in unserem Beispiel der Button einen orangenen Hintergrund hat, färben wir die Schrift weiß ein.

So sieht der angepasste Code (rot markiert) nun aus:

Und so das Design des Absenden-Buttons im Frontend:

Button Hintergrundfarbe bei MouseOver

Sobald du mit der Maus über den Button fährst, ändert sich die Hintergrundfarbe des Buttons. Diesen Zustand nennt man “hover” oder auch “MouseOver”. Wir haben auch hier die Möglichkeit, die Hintergrundfarbe über den folgenden CSS-Code anzupassen:

.gform_footer .gform_button:hover { background-color: #e2e2e2 !important; }

Kopiere diesen Code und füge ihn einfach eine Zeile unterhalb des oberen Codes ein. Ändere den HEX-Wert nach deinen Wünschen. In unserem Beispiel auf dunkel-orange:

Anpassungen speichern

Hast du den Button nach deinen Vorstellungen angepasst, dann klicke bitte auf den Button “Änderungen speichern”, damit die Anpassungen auch im Frontend zu sehen sind: