Como Desativar um Campo de Formulário para Impedir a Entrada do Usuário

Você tem interesse em impedir que os usuários insiram dados em um campo específico do formulário? Desabilitar um campo ou torná-lo somente leitura pode ser útil se você quiser que os usuários visualizem o valor do campo sem a opção de editá-lo. Neste tutorial, orientaremos você sobre como desabilitar um campo de formulário, impedindo efetivamente qualquer entrada do usuário.

Essa abordagem também pode ser valiosa quando você deseja incluir esse valor em a Tag Inteligente {all_fields} para e-mails de notificação ou dentro de uma exportação CSV.

Criando seu formulário

Para começar, crie um novo formulário. Neste tutorial, demonstraremos o uso de um campo de Texto de Parágrafo que incluirá uma mensagem com uma Tag Inteligente representando a data atual como um carimbo de data/hora para o envio do formulário.

Se precisar de ajuda com o processo de criação do formulário, consulte este tutorial para obter orientação passo a passo.

Após criar seu formulário com sucesso, insira um campo de Texto de Parágrafo nele. Na aba Avançado do campo, inclua wpf-disable-field como o Nome da Classe CSS para habilitar a funcionalidade de desabilitação do campo.

Desabilitando o campo do formulário

É hora de adicionar o trecho de código que unirá tudo isso.

Se precisar de ajuda para adicionar código ao seu site, consulte este tutorial.

/**
 * Make standard form fields to make read-only
 * To apply, add CSS class 'wpf-disable-field' (no quotes) to field in form builder
 *
 * @link https://wpforms.com/developers/disable-a-form-field-to-prevent-user-input/
 */
 
function wpf_dev_disable_field() {
    <script type="text/javascript">
 
    jQuery(function($) {
 
        $( '.wpf-disable-field input, .wpf-disable-field textarea' ).attr({
             readonly: "readonly",
             tabindex: "-1"
        });
         
    });
 
    </script>
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );

O código acima não apenas desabilitará qualquer campo de formulário em qualquer formulário com a classe CSS wpf-disable-field, mas também pulará esses campos enquanto o usuário navega por cada campo.

E é tudo o que você precisa para configurar seus campos de formulário para serem somente leitura. Gostaria de alterar os subrótulos no campo Nome? Nosso artigo sobre Como Alterar Subrótulos para o Campo Nome o guiará pelas etapas de como realizar isso.

Ação de Referência

wpforms_wp_footer_end

Perguntas Frequentes

P: Posso usar isso para outros campos também?

R: Com certeza! Desde que você aplique o wpf-disable-field aos campos, ele cobrirá todos eles.

Como exemplo, este trecho desabilitará um campo de formulário Dropdown.

/**
 * Make standard form fields read-only
 * To apply, add CSS class 'wpf-disable-field' (no quotes) to the field in the form builder
 *
 * @link https://wpforms.com/developers/disable-a-form-field-to-prevent-user-input/
 */
function wpf_dev_disable_field() {
    <script type="text/javascript">
      jQuery(function($) {
        $('.wpf-disable-field input, .wpf-disable-field textarea, .wpf-disable-field select').attr({
          disabled: true,
          tabindex: '-1'
        });

        $('.wpforms-form').on('wpformsBeforeFormSubmit', function(){
          $('.wpf-disable-field input, .wpf-disable-field textarea, .wpf-disable-field select')
            .removeAttr('disabled');
        });
      });
    </script>
}
add_action('wpforms_wp_footer_end', 'wpf_dev_disable_field', 30);