Como Adicionar Autocuso em Seu Formulário

Você tem interesse em habilitar o foco automático em seu formulário para melhorar a experiência do usuário? Com o foco automático, o cursor é ativado automaticamente no primeiro campo do formulário quando a página termina de carregar, otimizando a interação do usuário. Essa melhoria simples pode ser alcançada com um trecho de código JavaScript, e nós o guiaremos pelo processo.

Criando seu formulário

Primeiro, você precisará começar criando seu formulário e adicionando seus campos. Se precisar de ajuda para criar um formulário, consulte esta documentação.

Criando o snippet para adicionar autofocus

Em seguida, você precisará adicionar este snippet de código ao seu site.

Se precisar de ajuda para adicionar snippets ao seu site, consulte este tutorial.

/**
 * 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 );

Este snippet de código só se aplicará ao WPForms porque ele procura apenas por forms.wpforms-form e buscará o primeiro campo do formulário em seu formulário e adicionará imediatamente o elemento :focus a este campo.

E é isso! Você implementou com sucesso a funcionalidade de autofocus em todos os seus formulários alimentados pelo WPForms. Gostaria de adicionar algum CSS para destacar mais esse foco? Confira nosso artigo sobre Como Adicionar CSS ao Foco do Campo do Formulário.

Ação de Referência

wpforms_wp_footer_end

Perguntas Frequentes

P: Como posso manter o autofocus ativo em um formulário de várias páginas?

R: Se você tem um formulário de várias páginas, basta usar este snippet de código.

/**
 * 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 );