Contact Form 7 Senden-Button : Farbe / Design ändern - so geht´s! | BlogMonetarisieren.de
"Mit meinen Tipps möchte ich Dir dabei helfen, mit Deinem Blog noch mehr Geld zu verdienen." - Coach Hoffmann

Contact Form 7 Senden-Button : Farbe / Design ändern – so geht´s!

Contact Form 7 Senden-Button : Farbe / Design ändern – so geht´s!
5 (100%) 2 Bewertung[en]

Contact Form 7 zählt zu den beliebtesten und meistgenutzten WordPress-Plugins, um ein E-mail-Kontaktformular in auf dem Blog einzubinden. Leider bietet es in der Dashboard-Ansicht keine Möglichkeit, mal eben das Design des Senden-Button anzupassen.

Contact Form 7 Submit Button ändern

1. Schritt:
Im ersten Schritt, loggt Ihr Euch auf dem WordPress Dashboard ein klickt auf [Design] -> [Editor] und öffnet im Editor die Datei (style.css).

wordpress-style-css

Dort fügt Ihr die folgenden Zeilen

.mein_button_stil{border:2px solid #FF8C00;border-radius: 6px;padding: 20px;text-decoration:none;color: #fff;font-size: 18px;background-color: #FFA500;cursor:pointer;}.mein_button_stil:hover{background-color: #FF8C00;}

ein und klickt auf den Button [Datei aktualisieren].

Damit habt Ihr eine CSS-Klasse „mein_button_stil“ angelegt, welche dem Senden-Button später den Orangen-Stil geben wird. Ihr könnt die Werte entweder so lassen oder je nach Geschmack anpassen.

Die Optik des eingefügten Code-Snippets lassen wir jetzt mal außen vor. 🙂

2. Schritt:

Jetzt startet Ihr Euer FTP-Programm und navigiert auf der Serverseite (Rechtes-Fenter bei Filezilla) in den Ordner [modules].

/wp-content/plugins/contact-form-7/modules/

filezilla-wordpress-ftp-programm

Darin befindet sich die Datei submit.php. Ladet diese auf Euren Desktop herunter.

3. Schritt:

Nun öffnet Ihr die submit.php Datei mit einem Texteditor und ersetzt in der folgende Codezeile:

codezeile

%1$s

durch diese Codezeile:

class=“mein_button_stil“ type=“submit“ value=“Dein Text“

Die korrekte Codezeile sieht dann so aus.

codezeile-wordpress

Um den Text auf dem Button zu ändern, schreibt Ihr einfach einen anderen Text anstelle von „Dein Text“ zwischen die Gänsefüsschen nach dem value=““.

Jetzt speichert Ihr die Datei ab.

4. Schritt:

An dieser Stelle öffnet Ihr wieder Euer FTP-Programm, verbindet Euch mit dem Server und ersetzt die submit.php durch die von Euch eben bearbeitete und gespeicherte submit.php .

ftp-programm

Fertig!

Anstelle des standard *knirrz knirrz* Senden-Buttons in Eurem E-Email-Formular.

contact-form-7-send-button

Erscheint jetzt dieses schöne Stück!

contact-form-7-senden-button

Da macht das Klicken doch gleich viel mehr Spass. 😉


Hat Dir der Artikel geholfen?

Artikel teilen:

Schreibe Deine Meinung

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