Como Capitalizar Entradas de Campos de Formulário

Introdução

Você gostaria de capitalizar as entradas dos campos do formulário em seu WPForms? Você pode facilmente usar CSS e text-transform 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 capitalização.

Neste tutorial, vamos guiá-lo por cada etapa de como conseguir 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 um Texto de Linha Única ao nosso formulário.

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

Adicionando o nome da classe CSS

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

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

Opções de Implementação

Usando 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, revise este tutorial.

Basta copiar e colar este CSS em seu site.

.capitalize {
    text-transform: capitalize;
}

Usando apenas JavaScript (recomendado)

Para capitalizar os valores de entrada dos campos do formulário enquanto o formulário é preenchido, bem como para garantir que as informações da 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 );

Este trecho 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, para que, enquanto o usuário digita, o texto seja automaticamente capitalizado e, quando o formulário for enviado, a entrada armazenará esses campos com letras maiúsculas.

Perguntas Frequentes

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

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

E é só isso que você precisa! Gostaria de impedir que os usuários insiram URLs nos campos do seu formulário? Dê uma olhada em nosso artigo sobre Como Bloquear URLs Dentro dos Campos do Formulário.

Relacionado

Referência de Ação: wpforms_wp_footer_end