Autofokus auf Ihr Formular anwenden

Möchten Sie Autofokus für Ihr Formular aktivieren, um die Benutzererfahrung zu verbessern? Mit Autofokus wird der Cursor automatisch im ersten Formularfeld aktiviert, sobald die Seite geladen ist, was die Benutzerinteraktion vereinfacht. Diese einfache Verbesserung kann mit einem JavaScript-Code-Snippet erreicht werden, und wir führen Sie durch den Prozess.

Erstellen Ihres Formulars

Erstellen Sie zunächst Ihr Formular und fügen Sie Ihre Formularfelder hinzu. Wenn Sie Hilfe beim Erstellen eines Formulars benötigen, sehen Sie bitte diese Dokumentation.

Erstellen des Snippets zum Hinzufügen von Autofokus

Fügen Sie als Nächstes dieses Code-Snippet zu Ihrer Website hinzu.

Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, sehen Sie bitte dieses Tutorial an.

/**
 * Add autofocus to the first form field of the form
 *
 * @link https://wpforms.com/developers/how-to-add-autofocus-on-your-form/
 */

function wpf_dev_autofocus() {
?>
<script type="text/javascript">
    jQuery(document).ready(function() {
        
        var first_input = jQuery( 'form.wpforms-form input[type=text]:visible:enabled:first, textarea:visible:enabled:first' )[0];
        
        if (first_input != undefined) {
            first_input.focus();
        }
        
    });
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_autofocus', 10 );

Dieses Code-Snippet gilt nur für WPForms, da es nur nach forms.wpforms-form sucht und das erste Formularfeld in Ihrem Formular findet und diesem Feld sofort das :focus-Element hinzufügt.

Und das ist alles! Sie haben die Autofokus-Funktionalität für alle Ihre WPForms-gestützten Formulare erfolgreich implementiert. Möchten Sie etwas CSS hinzufügen, um den Fokus hervorzuheben? Lesen Sie unseren Artikel über CSS zum Formularfeld-Fokus hinzufügen.

Referenzaktion

wpforms_wp_footer_end

FAQ

F: Wie kann ich den Autofokus bei einem mehrseitigen Formular beibehalten?

A: Wenn Sie ein mehrseitiges Formular haben, verwenden Sie einfach dieses Code-Snippet.

/**
 * Add autofocus to first form field of form
 *
 * @link https://wpforms.com/developers/how-to-add-autofocus-on-your-form/
 */

function wpf_dev_autofocus() {
?>
<script type="text/javascript">
    jQuery(document).ready(function() {
        
        var first_input = jQuery( 'form.wpforms-form input[type=text]:visible:enabled:first, textarea:visible:enabled:first' )[0];
        
        if (first_input != undefined) {
            first_input.focus();
        }
        
        jQuery( '.wpforms-page-next' ).on("click", function() {
            var page_first_input = jQuery(this).closest( '.wpforms-page' ).next().find( 'input, textarea' ).first();
            
            if (page_first_input != undefined) {
                setTimeout(function() {
                    page_first_input.focus();
                }, 100);
            }
        });
        
    });
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_autofocus', 10 );