Como Alterar o Indicador de Campo Obrigatório

Pretende alterar o indicador de campo obrigatório nos seus WPForms? Se desejar usar uma cadeia de texto diferente ou mesmo um símbolo, pode fazê-lo facilmente com PHP. Este artigo mostrar-lhe-á 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 defeito, um asterisco vermelho será exibido no final do rótulo do campo, como pode ver nesta captura de ecrã abaixo.

Criar o seu formulário

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

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

Personalizar o indicador de campo obrigatório

Em seguida, vamos adicionar este trecho ao nosso site.

Se precisar de ajuda sobre como adicionar trechos 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 );

Basta alterar o texto (Obrigatório) para corresponder ao texto que deseja exibir.

E é tudo! Alterou com sucesso o aspeto dos seus campos obrigatórios! Gostaria de estilizar o texto de placeholder nos seus campos de formulário? Dê uma vista de olhos ao nosso artigo sobre Como Estilizar o Texto de Placeholder para Campos de Formulário.

Filtro de Referência

wpforms_get_field_required_label

FAQ

P: Como altero apenas a cor do símbolo do asterisco?

R: Para fazer isto, 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 é que o trecho não está a funcionar para mim?

R: Se limpou a cache do seu site e ainda não vê quaisquer alterações, tente alterar a prioridade da sua função. Num trecho de código, prioridade refere-se à ordem em que as tarefas ou linhas de código precisam de ser executadas. Tal como numa lista de tarefas, algumas tarefas são mais importantes e devem ser feitas antes de outras. Assim, neste trecho em particular, a nossa prioridade está definida para 10. Se notar que a alteração não está a ter efeito, tente alterar esse número para um número maior para ver se isto ajuda.

Neste exemplo, estamos a definir o número de prioridade para 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 );