Exibindo Shortcodes Dentro de Rótulos de Campos de Formulário

Gostaria de aprimorar os rótulos do seu formulário com dicas interativas ou conteúdo dinâmico usando shortcodes? Embora o WPForms não suporte shortcodes em rótulos por padrão, você pode adicionar facilmente essa funcionalidade usando PHP.

Este guia mostrará como exibir qualquer shortcode dentro dos rótulos dos campos do seu formulário.

Instalando o Plugin Shortcodes Ultimate (opcional)

Se você ainda não tem um plugin de shortcodes, pode instalar o Shortcodes Ultimate no repositório de plugins do WordPress. Esta etapa é opcional se você já tem outro plugin de shortcodes ou está usando shortcodes integrados do seu tema.

Para obter ajuda na instalação de plugins, você pode consultar o guia da WPBeginner sobre como instalar um plugin.

Criando Seu Formulário

Você pode criar um novo formulário ou editar um formulário existente. Para qualquer ajuda sobre como criar um formulário, por favor, consulte esta documentação.

Não precisaremos do Rótulo para o campo do formulário Telefone, pois usaremos o texto da dica como nosso rótulo. Portanto, na guia Avançado do campo do formulário, selecione a opção Ocultar Rótulo e clique em Salvar no formulário.

Adicionando o Código

Para exibir shortcodes nos rótulos do seu formulário, você precisará adicionar um trecho de código ao seu site. Se você não tem certeza de como adicionar código personalizado, por favor, consulte nosso guia sobre como adicionar trechos de código.

No trecho de código acima, você precisará modificar três valores importantes:

• Na linha 10: Substitua 1055 pelo ID do seu formulário
• Na linha 10: Substitua 4 pelo ID do seu campo
• Na linha 12: Substitua o shortcode pelo shortcode desejado

Quando seus visitantes agora virem o formulário e clicarem na dica, eles verão sua mensagem.

Perguntas Frequentes

P: Como adiciono shortcodes diferentes para formulários e rótulos diferentes?

R: Se você quiser reutilizar este snippet para outros formulários usando shortcodes diferentes, você certamente poderia fazer isso.

/**
 * Run shortcodes on the form label field.
 *
 * @link   https://wpforms.com/developers/how-to-display-shortcodes-inside-the-label-of-the-form-field/
 */
 
function add_shortcode_to_label( $field, $form_data ) {
         
        // Check that the form ID is 1055 and the field id is 4 for the Phone field
    if ( 1055 === absint( $form_data[ 'id' ] ) && 4 === absint( $field[ 'id' ] ) ) {
 
        echo do_shortcode( ' [su_tooltip text="Your information is completely protected and will not be sold!<br><a href=&ldquo;https://myexamplesite.com/privacy/&ldquo;>Click here to learn more.</a>" behavior="click" hide_delay="500"]Click Me![/su_tooltip] ' );
     
        }
     
        // Check that the form ID is 1055 and the field id is 2 for the Name field
    if ( 1055 === absint( $form_data[ 'id' ] ) && 2 === absint( $field[ 'id' ] ) ) {
 
        echo do_shortcode( ' [su_tooltip text="I am a different tooltip for a different field on the same form." behavior="click" hide_delay="500"]Click Me Too![/su_tooltip] ' );
     
        }   
 
        // Check that the form ID is 1072 and the field id is 6 for the Comments field
    if ( 1072 === absint( $form_data[ 'id' ] ) && 6 === absint( $field[ 'id' ] ) ) {
 
        echo do_shortcode( ' [su_tooltip text="I am a different tooltip for a different field on a completely different form." behavior="click" hide_delay="500"]Click Me Too![/su_tooltip] ' );
     
        }
     
}
add_action( 'wpforms_display_field_before', 'add_shortcode_to_label', 16, 2 );

E é tudo o que você precisa para exibir qualquer shortcode dentro de um campo de formulário Rótulo. Gostaria de exibir shortcodes dentro do campo HTML? Dê uma olhada em nosso artigo sobre Como Exibir Shortcodes Dentro do Campo HTML.

Ação de Referência

wpforms_display_field_before