Contact Form 7 Quizfelder Platzhalter

Februar 15, 2020

Contact Form 7 ist das meistverwendetste Kontaktformular Plugin in WordPress. Nicht unberechtigt, da die Konfiguration doch sehr einfach ist. Doch die Fertiglösung hat Grenzen. So hat das CF7 Plugin leider keine Option vorgesehen, dass bei einem „Quiz-Feld“ der Labeltext innerhalb des Inputfeldes als Platzhalter angezeigt wird.

Labelposition für Quiz-Inputfeld nur oberhalb vom Feld möglich, nicht als Platzhalter.

Der folgende Code welcher im WordPresstheme unter functions.php platziert werden kann, platziert das Label der Quizfelder als Platzhalter.

// Start allowance of jQuery to $ shortcut
 jQuery(document).ready(function($){

// Contact Form Quiz Placeholder
$('.cf7_placeholder').each(function(){
    var $this = $(this),
        placeholderText = $this.text(),
        $parent = $this.parent(),
        $label = $parent.find('.wpcf7-quiz-label'),
        $input = $parent.find('.wpcf7-quiz');

    $input.attr('placeholder', placeholderText);
    $this.text('');
    $label.text('');
    $label.hide();
});

// Ends allowance of jQuery to $ shortcut
});

Im Contactform 7 Plugin muss das Quizfeld wie folgt eingegeben werden:

        [quiz quiz-648 placeholder "Welche Zahl ist grösser, 7 oder 3?|7"]
        <span class="cf7_placeholder">Welche Zahl ist grösser, 7 oder 3?</span>

Schlussendlich sieht das Quizfeld wie folgt aus:

Label als Platzhalter in Contact Form 7 Quizfelder