Formular-Standard-Button aus beliebigen Plugins mit dem Divi-Button ersetzen

9. Oktober 2022 | Divi-Theme, Plugins, Scripts |

Geschätzte Lesezeit für diesen Beitrag: 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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This