So zeigen Sie eine Gesamtwortanzahl unter Ihrem Formularfeld an

Möchten Sie eine Gesamtzahl der Wörter unter Ihrem Formularfeld Absatztext anzeigen? Standardmäßig können Sie mit der Längenbegrenzung für die Formularfelder Einzeiliger Text oder Absatztext ganz einfach Zeichen oder Wörter für diese Felder begrenzen. Wenn Sie mehr über diese Einstellung erfahren möchten, lesen Sie bitte diese Dokumentation.

Für dieses Tutorial möchten wir jedoch weder die Wörter noch die Zeichen begrenzen, sondern stattdessen eine Gesamtzahl anzeigen. In diesem Tutorial führen wir Sie Schritt für Schritt durch, wie Sie dies erreichen.

Erstellen Ihres Formulars

Zuerst müssen Sie ein neues Formular erstellen und Ihre Felder hinzufügen. In diesem Tutorial erstellen wir ein Formular, das Anfragen für Gravurartikel annimmt. Daher fügen wir dem Formular auch ein Formularfeld Absatztext für die gravierte Nachricht hinzu. Sie müssen sich die Feld-ID merken, da wir diese in einem späteren Schritt verwenden werden.

Als Nächstes fügen wir dem Formular auch ein HTML-Formularfeld hinzu. Dieses wird dynamisch mit der Wortanzahl gefüllt, während Ihre Besucher in das Feld Absatztext tippen. Sie müssen sich auch diese Feld-ID merken.

Anzeigen der Gesamtzahl der Wörter

Nachdem das Formular erstellt wurde, ist es an der Zeit, diesen Codeausschnitt auf Ihrer Website hinzuzufügen, um alles zusammenzuführen.

Wenn Sie Hilfe beim Hinzufügen von Codeausschnitten zu Ihrer Website benötigen, lesen Sie bitte dieses Tutorial.

/**
 * Add a word count under the form field.
 *
 * @link  https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/
 */

function wpf_dev_count_words_only() {
?>

<script type="text/javascript">
    
    // Look at the form ID 1480 only and the count each keyup or keydown on field ID 6
    jQuery( '#wpforms-1480-field_6' ).keyup(updateCount);
    jQuery( '#wpforms-1480-field_6' ).keydown(updateCount);

    function updateCount() {
        var cs = jQuery.trim(this.value).length ? this.value.match(/\S+/g).length + " words total" : 0;
        // Update the word count inside the HTML form field (field ID 8)
        jQuery( '#wpforms-1480-field_8' ).text(cs);
    }
    
</script>

<?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_count_words_only', 30 );

Im obigen Codebeispiel gibt es drei Elemente, die Sie aktualisieren müssen. In unserem Beispiel ist unsere Formular-ID 1480, die Feld-ID für Absatztext ist _6 und die Feld-ID für HTML ist _8. Bitte denken Sie daran, diese drei Elemente zu aktualisieren, damit sie mit Ihrer eigenen Formular-ID und Feld-ID aus Ihrem Formular übereinstimmen.

Für Hilfe beim Auffinden Ihrer Formular- und Feld-IDs lesen Sie bitte dieses Tutorial.

Mit unserem erstellten Formular und unserem platzierten Codeausschnitt sehen Sie, dass beim Tippen in das Feld eine Live-Wortanzahl unter dem Feld aktualisiert wird.

Und das ist alles! Sie haben erfolgreich eine Wortanzahl hinzugefügt, die unter Ihrem Formularfeld angezeigt wird. Möchten Sie Smart Tags in einem HTML-Formularfeld verarbeiten? Schauen Sie sich unser Tutorial an
Verarbeitung von Smart Tags in HTML-Feldern.

Referenzaktion

wpforms_wp_footer_end

FAQ

F: Kann ich stattdessen Zeichen zählen?

A: Absolut! Um nur Zeichen zu zählen, verwenden Sie stattdessen diesen Codeausschnitt.

/**
 * Add a character count under the form field.
 *
 * @link  https://wpforms.com/developers/how-to-display-a-total-word-count-under-your-form-field/
 */

function wpf_dev_count_characters_only() {
?>

<script type="text/javascript">
    
    // Look at the form ID 1480 only and the count each keyup or keydown on field ID 6
    jQuery('#wpforms-1480-field_6').keyup(updateCount);
    jQuery('#wpforms-1480-field_6').keydown(updateCount);

    function updateCount() {
        var cs = jQuery(this).val().length + " Characters";
        // Update the word count inside the HTML form field (field ID 9)
        jQuery('#wpforms-1480-field_9').text(cs);
    }
    
</script>

<?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_count_characters_only', 30 );

F: Funktioniert das auch für andere Formularfelder?

A: Ja! Jedes Formularfeld, das die Eingabe einer Antwort durch den Benutzer akzeptiert, funktioniert mit diesem Codeausschnitt. Denken Sie nur daran, sicherzustellen, dass Sie die Feld-ID in keyup und keydown haben, damit der Code weiß, welches Feld er zählen soll.