Como desativar um campo de formulário para impedir a entrada do utilizador

Está interessado em impedir que os utilizadores introduzam dados num campo de formulário específico? Desativar um campo ou torná-lo apenas de leitura pode ser útil se quiser que os utilizadores vejam o valor do campo sem a opção de o editar. Neste tutorial, vamos guiá-lo sobre como desativar um campo de formulário, impedindo eficazmente qualquer entrada do utilizador.

Esta abordagem também pode ser valiosa quando quiser incluir este valor em a Etiqueta Inteligente {all_fields} para emails de notificação ou dentro de uma exportação CSV.

Criar o seu formulário

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

Se precisar de assistência com o processo de criação de formulários, consulte este tutorial para obter orientação passo a passo.

Após criar o seu formulário com sucesso, insira um campo de Texto de Parágrafo. Dentro do separador Avançadas do campo, inclua wpf-disable-field como o Nome da Classe CSS para ativar a funcionalidade de desativação do campo.

Desativar o campo de formulário

É agora hora de adicionar o trecho de código que juntará tudo isto.

Se precisar de ajuda para adicionar código ao seu site, veja 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 só desativará qualquer campo de formulário em qualquer formulário com a classe CSS wpf-disable-field, mas também ignorará esses campos enquanto o utilizador navega por cada campo.

E é tudo o que precisa para configurar os seus campos de formulário para serem apenas de leitura. Gostaria de alterar os subrótulos no campo Nome? O nosso artigo sobre Como Alterar Subrótulos para o Campo Nome irá guiá-lo através dos passos sobre como realizar isto.

Ação de Referência

wpforms_wp_footer_end

FAQ

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

R: Absolutamente! Desde que coloque o wpf-disable-field nos campos, cobrirá todos eles.

Como exemplo, este trecho desativará um campo de formulário Menu Suspenso.

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