Trick # 171 | Dieser Beitrag beinhaltet 1111 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Vermutlich verwenden Sie auf Ihrer WordPress-Website ein Formular-Plugin. Das System selber liefert ja nichts Schlaues mit, weswegen hier ein Plugin die richtige Wahl ist. Bloss sehen die Felder oft einigermassen ärmlich aus. Immerhin: Den «Senden»-Button können Sie auf einfache Weise und ganz automatisiert mit dem adretten Divi-Button ersetzen.
Wie sieht denn der Button des von Ihnen verwendeten Formular-Plugins aus?
So?
Oder so?
Meist kommt die schnöde Variante #1 aus dem Plugin raus. Durch reichlich CSS lässt sich das zwar verbessern. Es geht aber noch einfacher – mit einem kleinen Script, das Sie massgeschneidert einbinden können.
Das Script sucht nach dem Submit-Button und ersetzt diesen kurzerhand mit dem gestylten Divi-Button.
Alles was Sie tun müssen: Kopieren Sie einen der nachfolgenden Codes in ein Divi-Code-Modul auf der Formularseite und schon klappts. Alternativ könnten Sei den Code auch im <head> platzieren – etwa unter Divi/Theme-Optionen/Integration. Jedoch würde das Script dann unnötigerweise auf allen Seiten (und nicht bloss auf den Formularseiten) geladen.
Einige der folgenden Formular-Plugins wenden ihr eigenes Styling für die Schaltfläche «Senden». Alle haben jedoch die Möglichkeit, das eingebaute CSS-Styling zu deaktivieren. Wir empfehlen, dies zu tun, da das Snippet sonst nicht richtig funktionieren könnte.
Die Codes sind bereits angepasst für die wichtigsten Formular-Plugins. Suchen Sie Ihres heraus und bedienen Sie sich:
Contact Form 7
<script>
jQuery(document).ready(function($){
$('.wpcf7-submit').addClass("et_pb_button");
});
</script>Gravity Forms
<script>
jQuery(document).ready(function($){
$('.gform_button').addClass("et_pb_button");
});
</script>Formidable Forms
<script>
jQuery(document).ready(function($){
$('.frm_button_submit').addClass("et_pb_button");
});
</script>Forminator
<script>
jQuery(document).ready(function($){
$('.forminator-button').addClass("et_pb_button");
});
</script>WP Forms
<script>
jQuery(document).ready(function($){
$('.wpforms-submit').addClass("et_pb_button");
});
</script>Caldera Forms *
<script>
jQuery(document).ready(function($){
$('.btn-default').addClass("et_pb_button");
});
</script>Nun, das ist doch ziemlich simpel. Oder?
*) Zum Plugin «Caldera Forms» ist noch zu sagen, dass dieses eingestellt wurde und seit Frühjahr 2022 nicht mehr weiterentwickelt wird. Siehe auch unser Beitrag «Formular-Plugin «Caldera-Forms» quittiert den Dienst». Da Caldera Forms aber kostenlos war, wird es nach wie vor recht häufig genutzt.
Falls Sie auch zur Caldera-Gemeinde gehören, sollten Sie sich nach einer anderen Lösung umsehen. Die meisten Formularplugins sind allerdings kostenpflichtig. Die grosse Ausnahme ist da «Contact Forms 7». Dieses ist zwar deutlich weniger benutzerfreundlich – dafür aber kostenlos.
Werbung
Werbung
