Como Capitalizar as Entradas dos Campos do Formulário

Introdução

Gostaria de capitalizar as entradas dos campos do formulário no seu WPForms? Pode facilmente usar CSS e text-transform para formatar os valores de entrada, mas a entrada será guardada exatamente como foi digitada. Usando um pequeno trecho de JavaScript, pode, em tempo real, garantir que estes valores são apresentados e armazenados com capitalização.

Neste tutorial, vamos guiá-lo através de cada passo sobre como conseguir isto.

Criação do formulário

Primeiro, terá de criar o seu formulário. Para efeitos deste tutorial, adicionámos um campo de formulário Texto de Parágrafo e um campo Texto de Linha Única ao nosso formulário.

Se precisar de ajuda para criar um formulário, reveja esta documentação.

Adicionar o nome da classe CSS

Em seguida, vamos usar uma classe CSS para cada um destes campos de formulário para acionar o CSS para usar a regra CSS text-transform que adicionaremos noutro passo. Para adicionar a classe CSS necessária, clique no campo Texto de Linha Única no seu construtor de formulários e, em seguida, clique para abrir Avançado.

Em Classes CSS, adicione capitalize e repita estes passos para o campo Texto de Parágrafo também.

Opções de Implementação

Usar apenas CSS (opcional)

Este 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 precisar de ajuda sobre como e onde adicionar CSS personalizado, reveja este tutorial.

Apenas copie e cole este CSS no seu site.

.capitalize {
    text-transform: capitalize;
}

Usar apenas JavaScript (recomendado)

Para capitalizar os valores de entrada dos campos do formulário à medida que o formulário é preenchido, bem como para garantir que a informação da entrada é armazenada com a capitalização, vamos adicionar um pequeno script que capitaliza imediatamente o campo à medida que o texto está a ser digitado.

Para obter ajuda sobre como adicionar JavaScript ao seu site, dê uma vista de olhos 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 );

Este trecho procurará qualquer campo de formulário que tenha não só a classe CSS padrão de wpforms-field, mas que também tenha a classe CSS de capitalize, de modo que, à medida que o utilizador digita, o texto será automaticamente capitalizado e, quando o formulário for submetido, a entrada armazenará esses campos com letras maiúsculas.

FAQ

E se eu quiser capitalizar todo o texto, não apenas a primeira letra?

Se precisar que o texto seja totalmente em maiúsculas (por exemplo, "olá" exibe-se como "OLÁ"), use text-transform: uppercase em vez de text-transform: capitalize. Para mais detalhes sobre as propriedades CSS para transformação de texto, pode consultar a documentação da Mozilla sobre text-transform.

E é tudo o que precisa! Gostaria de impedir que os utilizadores introduzam URLs nos campos do seu formulário? Dê uma vista de olhos ao nosso artigo sobre Como Bloquear URLs Dentro dos Campos do Formulário.

Relacionado

Referência de Ação: wpforms_wp_footer_end