Introdução
Gostaria de capitalizar as entradas do campo de formulário em seu WPForms? Você pode usar facilmente o CSS e a transformação de texto para formatar os valores de entrada, mas a entrada será salva exatamente como foi digitada. Usando um pequeno trecho de JavaScript, você pode, em tempo real, garantir que esses valores sejam exibidos e armazenados com letras maiúsculas.
Neste tutorial, vamos orientá-lo em cada etapa de como fazer isso.
Criando o formulário
Primeiro, você precisará criar seu formulário. Para fins deste tutorial, adicionamos um campo de formulário Texto de parágrafo e Texto de linha única ao nosso formulário.
Se precisar de ajuda para criar um formulário, consulte esta documentação.
Adição do nome da classe CSS
Em seguida, usaremos uma classe CSS para cada um desses campos de formulário a fim de acionar o CSS para usar a regra CSS de transformação de texto que adicionaremos em outra etapa. Para adicionar a classe CSS necessária, clique no campo Texto de linha única no construtor de formulários e, em seguida, clique para abrir a opção Avançado.
Em Classes CSS, adicione capitalize e repita essas etapas também para o campo Texto do parágrafo.
Opções de implementação
Usando apenas CSS (opcional)
Esse CSS personalizado fará com que o campo do formulário seja exibido em maiúsculas, mas a entrada ainda mostrará os valores do campo exatamente como foram digitados.
Se você precisar de ajuda para saber como e onde adicionar CSS personalizado, consulte este tutorial.
Basta copiar e colar esse CSS em seu site.
.capitalize {
text-transform: capitalize;
}
Usando apenas JavaScript (recomendado)
Para capitalizar os valores de entrada do campo de formulário durante o preenchimento do formulário e garantir que as informações de entrada sejam armazenadas com a capitalização, adicionaremos um pequeno script que capitaliza imediatamente o campo à medida que o texto é digitado.
Para obter ajuda sobre como adicionar JavaScript ao seu site, dê uma olhada neste tutorial.
/*
* Capitalize form field text
*
* @link https://wpforms.com/developers/how-to-capitalize-form-field-inputs/
*/
function wpf_dev_capitalize() {
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery( '.wpforms-field.capitalize input' ).keyup(function() {
jQuery(this).val(jQuery(this).val().substr(0, 1).toUpperCase() + jQuery(this).val().substr(1).toLowerCase());
});
jQuery( '.wpforms-field.capitalize textarea' ).keyup(function() {
jQuery(this).val(jQuery(this).val().substr(0, 1).toUpperCase() + jQuery(this).val().substr(1).toLowerCase());
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_capitalize', 30 );
Esse snippet procurará qualquer campo de formulário que tenha não apenas a classe CSS padrão de wpforms-field, mas que também tenha a classe CSS de capitalize, de modo que, à medida que o usuário digitar, o texto será automaticamente capitalizado e, quando o formulário for enviado, a entrada armazenará esses campos com letras maiúsculas.
PERGUNTAS FREQUENTES
E se eu quiser colocar todo o texto em letras maiúsculas, não apenas a primeira letra?
Se você precisar que o texto seja totalmente em maiúsculas (por exemplo, "hello" é exibido como "HELLO"), use text-transform: uppercase em vez de text-transform: capitalize. Para obter mais detalhes sobre as propriedades CSS para transformação de texto, você pode consultar Documentação do Mozilla sobre transformação de texto.
E isso é tudo o que você precisa! Gostaria de impedir que os usuários insiram URLs nos campos do formulário? Dê uma olhada em nosso artigo sobre Como bloquear URLs dentro dos campos do formulário.
Relacionado
Referência da ação: wpforms_wp_footer_end