Como Adicionar Autofoco ao Seu Formulário

Tem interesse em ativar o foco automático no seu formulário para melhorar a experiência do utilizador? Com o foco automático, o cursor ativa-se automaticamente dentro do primeiro campo do formulário quando a página termina de carregar, otimizando a interação do utilizador. Esta melhoria simples pode ser alcançada com um trecho de código JavaScript, e nós guiá-lo-emos através do processo.

Criar o seu formulário

Primeiro, terá de começar por criar o seu formulário e adicionar os seus campos. Se precisar de ajuda para criar um formulário, consulte esta documentação.

Criação do trecho para adicionar autofocus

Em seguida, terá de adicionar este trecho de código ao seu site.

Se precisar de ajuda para adicionar trechos 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 trecho de código só se aplicará ao WPForms porque apenas procura por forms.wpforms-form e procurará o primeiro campo do formulário no seu formulário e adicionará imediatamente o elemento :focus a este campo.

E é tudo! Implementou com sucesso a funcionalidade de foco automático em todos os seus formulários alimentados pelo WPForms. Gostaria de adicionar algum CSS que faça esse foco destacar-se mais? Consulte o nosso artigo sobre Como Adicionar CSS ao Foco do Campo do Formulário.

Ação de Referência

wpforms_wp_footer_end

FAQ

P: Como posso manter o foco automático ativo num formulário de várias páginas?

R: Se tiver um formulário de várias páginas, basta usar este trecho 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 );