Marc Hoffmann
-Anzeige-

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


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

[mh_replace].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;}[/mh_replace]

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

[mh_replace]%1$s[/mh_replace]

durch diese Codezeile:

[mh_replace]class=“mein_button_stil“ type=“submit“ value=“Dein Text“[/mh_replace]

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


PS: Um den Link zu dieser Seite Freunden zu schicken, kannst Du Dir mit nur einem Klick die...
Artikel-URL kopieren
Teilen per
Facebook
WhatsApp
Hinweis: Sollten wir in diesem Artikel Provisions-Links – auch Affiliate-Links genannt – verwendet haben, sind diese durch „(Provisions-Link)" gekennzeichnet. Erfolgt über diese Links eine Bestellung, erhält blogmonetarisieren.de eine Provision vom Verkäufer, für den Besteller entstehen keine Mehrkosten. Als Amazon-Partner verdienen wir an qualifizierten Käufen.
Sehr gefragt
Du willst mehr Geld mit Deinen gesponserten Posts verdienen?
Du willst mehr Geld mit Deinen gesponserten Posts verdienen?
Diese Website nutzt Cookies, um bestmögliche Funktionalität bieten zu können. Unter Datenschutz erfährst Du mehr dazu.
schließen