Lesefortschritt:

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

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

Trick # 171 | Dieser Beitrag beinhaltet 1111 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.

Vermutlich verwenden Sie auf Ihrer Word­Press-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

Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.