Anzeige der Gesamtwortzahl unter einem Formularfeld

Möchten Sie die Gesamtzahl der Wörter unter Ihrem Formularfeld " Absatztext" anzeigen? Standardmäßig können Sie mit der Funktion "Länge begrenzen" in den Formularfeldern " Einzeiliger Text" oder " Absatztext" die Anzahl der 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 den Zweck dieses Tutorials wollen wir jedoch nicht die Wörter oder Zeichen begrenzen, sondern stattdessen eine Gesamtzahl anzeigen. In diesem Tutorial führen wir Sie durch die einzelnen Schritte, wie Sie dies erreichen können.

Ihr Formular erstellen

Zu Beginn müssen Sie ein neues Formular erstellen und Ihre Felder hinzufügen. In diesem Tutorial erstellen wir ein Formular, das Anfragen für gravierte Artikel annimmt. Daher fügen wir dem Formular auch ein Absatztext-Formularfeld für die eingravierte Nachricht hinzu. Sie müssen sich die Feld-ID notieren, 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 Anzahl der Wörter gefüllt, die Ihre Besucher in das Feld Absatztext eingeben. Sie müssen sich auch die ID dieses Feldes merken.

Anzeige der Gesamtwortzahl

Nun, da das Formular erstellt wurde, ist es an der Zeit, dieses Snippet in Ihre Website einzufügen, um das Ganze zu vervollständigen.

Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, lesen Sie bitte diese Anleitung.

/**
 * 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 die ID des Formulars 1480, die ID des Absatztextfeldes ist _6 und die ID des HTML-Feldes ist _8. Bitte denken Sie daran, diese drei Elemente zu aktualisieren, damit sie mit Ihrer eigenen Formular-ID und der Feld-ID Ihres Formulars übereinstimmen.

Wenn Sie Hilfe beim Auffinden Ihrer Formular- und Feld-IDs benötigen, lesen Sie bitte dieses Tutorial.

Wenn unser Formular erstellt und unser Codeschnipsel implementiert ist, werden Sie sehen, dass bei der Eingabe in das Feld die Anzahl der Wörter unter dem Feld aktualisiert wird.

Und das war's! Sie haben erfolgreich eine Wortzahl hinzugefügt, die unter Ihrem Formularfeld angezeigt wird. Möchten Sie Smart Tags innerhalb eines HTML-Formularfelds verarbeiten? Sehen Sie sich unser Tutorial an
Wie man Smart Tags in HTML-Feldern verarbeitet.

Referenz Aktion

wpforms_wp_footer_end

FAQ

F: Kann ich die Zeichen anstelle der Wörter zählen?

A: Auf jeden Fall! Um nur die Zeichen zu zählen, verwenden Sie stattdessen dieses Codeschnipsel.

/**
 * 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, in das der Benutzer eine Antwort eintippen kann, funktioniert mit diesem Codeschnipsel. Achten Sie nur darauf, dass Sie die Feld-ID im Keyup und Keydown angeben, damit der Code weiß, welches Feld er zählen soll.