Está interessado em impedir que os utilizadores introduzam dados num campo de formulário específico? Desativar um campo ou torná-lo só de leitura pode ser útil se pretender que os utilizadores visualizem o valor do campo sem a opção de o editar. Neste tutorial, vamos orientá-lo sobre como desativar um campo de formulário, impedindo efetivamente qualquer entrada do utilizador.
Esta abordagem também pode ser útil quando se pretende incluir este valor na etiqueta inteligente {all_fields} para e-mails de notificação ou numa exportação CSV.
Criar o seu formulário
Para começar, comece por criar um novo formulário. Neste tutorial, vamos demonstrar a utilização de um campo Texto de parágrafo que incluirá uma mensagem com uma Smart Tag que representa 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 de formulários, consulte este tutorial para obter orientações passo a passo.
Depois de criar o seu formulário com sucesso, insira um Texto do parágrafo para dentro dele. No campo Avançado incluir wpf-disable-field como o Nome da classe CSS para ativar a funcionalidade de desativação do campo.
Se utilizar mais do que uma classe CSS para um campo de formulário, certifique-se de que coloca um espaço entre cada nome de classe.
Desativar o campo de formulário
É agora altura de adicionar o fragmento de código que vai juntar tudo isto.
Se precisar de ajuda para adicionar código ao seu sítio, 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 só desactivará qualquer campo de formulário em qualquer formulário com a classe CSS wpf-disable-field, como também passará por cima desses campos à medida que o utilizador percorre cada campo.
A melhor forma de impedir a introdução de dados noutros campos, como o menu pendente, as caixas de verificação ou a escolha múltipla, seria fornecer apenas uma única opção ao utilizador.
E é tudo o que precisa para configurar os seus campos de formulário para serem apenas de leitura. Gostaria de alterar os subtítulos do campo Nome? O nosso artigo sobre Como alterar os subtítulos do campo Nome irá guiá-lo através dos passos para o conseguir.
Ação de referência
FAQ
P: Posso utilizar isto para outros campos também?
A: Com certeza! Desde que coloque o wpf-disable-field para os campos, cobrirá cada um deles.
Como exemplo, este snippet irá 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 );