Você tem interesse em impedir que os usuários insiram dados em um campo de formulário específico? Desativar 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, vamos orientá-lo sobre como desativar um campo de formulário, impedindo efetivamente qualquer entrada do usuário.
Essa abordagem também pode ser útil quando você quiser incluir esse valor na {all_fields} Smart Tag para e-mails de notificação ou em uma exportação CSV.
Criando seu formulário
Para começar, crie um novo formulário. Neste tutorial, demonstraremos o uso de um campo Texto de parágrafo que incluirá uma mensagem com uma Smart Tag representando a data atual como um registro de data e hora para o envio do formulário.
Se você precisar de ajuda com o processo de criação de formulários, consulte este tutorial para obter orientação passo a passo.
Depois de criar seu formulário com sucesso, insira um Texto do parágrafo para dentro dele. Dentro do campo Avançado inclua wpf-disable-field como o Nome da classe CSS para ativar a funcionalidade de desativação do campo.
Se estiver usando mais de uma classe CSS para um campo de formulário, certifique-se de colocar um espaço entre cada nome de classe.
Desativar o campo de formulário
Agora é hora de adicionar o snippet de código que vai 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>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );
O código acima não apenas desativará qualquer campo de formulário em qualquer formulário com a classe CSS wpf-disable-field, mas também ignorará esses campos à medida que o usuário percorre cada campo.
A melhor maneira de impedir a entrada de dados em outros campos, como dropdown, caixas de seleção ou múltipla escolha, seria fornecer apenas uma única opção ao usuário.
E isso é tudo o que você precisa para configurar seus campos de formulário para serem somente leitura. Você gostaria de alterar os subtítulos no campo Nome? Nosso artigo sobre Como alterar os subtítulos do campo Name o orientará nas etapas para fazer isso.
Ação de referência
PERGUNTAS FREQUENTES
P: Posso usar isso para outros campos também?
A: Com certeza! Desde que você coloque o wpf-disable-field para os campos, ele cobrirá cada um deles.
Como exemplo, este snippet desativará um campo de formulário Dropdown.
/**
* 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, .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>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_field', 30 );