Como Alterar o Indicador de Campo Obrigatório

Você quer alterar o indicador de campo obrigatório no seu WPForms? Se você quiser usar uma string de texto diferente ou até mesmo um símbolo, você pode fazer isso facilmente com PHP. Este artigo mostrará como usar PHP para alterar este texto para os campos obrigatórios do seu formulário.

Quando um campo é marcado como obrigatório no WPForms, por padrão, um asterisco vermelho será exibido no final do rótulo do campo, como você pode ver nesta captura de tela abaixo.

Criando seu formulário

Para começar, vamos criar um novo formulário e adicionar nossos campos. Pelo menos um desses campos precisará ser definido como um campo obrigatório.

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

Personalizando o Indicador de Campo Obrigatório

Em seguida, vamos adicionar este snippet ao nosso site.

Se precisar de ajuda sobre como adicionar snippets ao seu site, veja este tutorial.

/**
 * Modify the required field indicator
 *
 * @link https://wpforms.com/developers/how-to-change-required-field-indicator/
 */

function wpf_dev_required_indicator( $text ) {

	return ' <span class="wpforms-required-label">' . __( '(Required)', 'wpforms' ) . '</span>';
}

add_filter( 'wpforms_get_field_required_label', 'wpf_dev_required_indicator', 10, 1 );

Você apenas mudará o texto (Obrigatório) para corresponder ao texto que deseja exibir.

E é isso! Você alterou com sucesso a aparência dos seus campos obrigatórios! Gostaria de estilizar o texto do placeholder nos seus campos de formulário? Dê uma olhada em nosso artigo sobre Como Estilizar o Texto do Placeholder para Campos de Formulário.

Filtro de Referência

wpforms_obter_label_campo_obrigatorio

Perguntas Frequentes

P: Como faço para mudar apenas a cor do símbolo de asterisco?

R: Para fazer isso, basta adicionar este CSS ao seu site.

Se precisar de ajuda sobre como adicionar CSS ao seu site, veja este tutorial.

.wpforms-form .wpforms-required-label {
    color: #1e73be !important;
}

P: Por que o snippet não está funcionando para mim?

R: Se você limpou o cache do seu site e ainda não está vendo nenhuma alteração, tente mudar a prioridade da sua função. Em um snippet de código, prioridade se refere à ordem em que as tarefas ou linhas de código precisam ser executadas. Assim como em uma lista de tarefas, algumas tarefas são mais importantes e devem ser feitas antes de outras. Então, neste snippet em particular, nossa prioridade está definida como 10. Se você notar que a alteração não está tendo efeito, tente mudar esse número para um número maior para ver se isso ajuda.

Neste exemplo, estamos definindo o número de prioridade como 20.

/**
 * Modify the required field indicator
 *
 * @link https://wpforms.com/developers/how-to-change-required-field-indicator/
 */

function wpf_dev_required_indicator( $text ) {

	return ' <span class="wpforms-required-label">' . __( '(Required)', 'wpforms' ) . '</span>';
}

add_filter( 'wpforms_get_field_required_label', 'wpf_dev_required_indicator', 20, 1 );