Lesefortschritt:

Pflichtfelder im Kontaktformular-Modul des Divi-Themes automatisch mit Stern * markieren

11. August 2024 | Divi-Theme, Scripts

Dieser Beitrag beinhaltet 1548 Wörter. – Geschätzte Lesezeit: ca. 8 Minuten.

Das Divi-Theme enthält ein Kontaktformular-Modul, welches für einfache Formulare ganz praktisch ist. Es fehlt ihm aber beispielsweise bereits die übliche Option, Pflichtfelder des Formulars mit einem Asterisk oder Stern * anzuzeigen – so wie dies in anderen Formulartools völlig normal ist. Dies können Sie mit einem einfachen Script nachrüsten.

Das Kontaktformular sieht üblicherweise etwa so aus wie nebenan:

 

Name und Mailadresse sind in diesem Beispiel Pflichtfelder – bloss sieht man das nicht.

4 + 10 =

Die Formulare können aber automatisch mit dem üblichen *-Symbol ergänzt werden. Dafür bearbeiten Sie das betreffende Modul und wechseln auf den Tab «Erweitert». Dort wählen Sie «CSS-ID und Klassen» und geben im Textfeld «CSS-Klasse» den Begriff «contact-form-asterisks» ein.

Nun kopieren Sie das folgende Script und fügen es in den <head>-Bereich Ihrer Website ein. Das können Sie im Backend unter Divi/Theme-Optionen/Integration tun:

<script>
jQuery(document).ready(function(){
    jQuery(".contact-form-asterisks *").each(function(){
        if(jQuery(this).attr('data-required_mark') == 'required' && !jQuery(this).hasClass('et_pb_contact_captcha')){
            var x = jQuery(this).attr('placeholder');
            var x = jQuery(this).attr('placeholder',x + ' * ');
        }
    });
});
</script>

Nun wird der Asterisk im Beispielformular bei den Pflichtfelder (Name, E-Mail) automatisch angezeigt:

15 + 4 =

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