Como Localizar o ID do Formulário e o ID do Campo

Ao usar trechos de código personalizados ou CSS com o WPForms, você geralmente precisará encontrar IDs específicos de formulários e campos. Esses IDs ajudam você a direcionar exatamente o formulário ou campo que deseja personalizar.

Este guia mostrará as maneiras mais rápidas de encontrar esses IDs.

Encontrando o ID do seu formulário

A maneira mais simples de encontrar rapidamente o ID de um formulário é na página Visão Geral dos Formulários. Para acessar esta página, vá para WPForms » Todos os Formulários e procure a coluna Shortcode. O ID do seu formulário é o número dentro do shortcode.

Por exemplo, a captura de tela abaixo indica o shortcode [wpforms id="1233"]. O ID para este formulário seria 1233.

Encontrando o ID do formulário

Encontrando o ID do seu campo

Para encontrar o ID de um campo específico, edite seu formulário no Construtor de Formulários. Em seguida, clique no campo que você deseja identificar e olhe o painel Opções do Campo à esquerda. O ID do campo aparece na parte superior da guia Geral.

Por exemplo, se você vir "Texto de Linha Única (ID #15)", o ID do seu campo é 15.

Encontrando o ID do campo

Como usar esses IDs

Quando você vir trechos de código em nossa documentação, precisará substituir os IDs de exemplo pelos seus IDs reais. Veja como usá-los corretamente:

  • Para IDs de formulário, substitua SEU-ID-DE-FORMULÁRIO pelo seu número de formulário real. Por exemplo, se o ID do seu formulário for 561, altere wpforms-SEU-ID-DE-FORMULÁRIO para wpforms-561.
  • Para IDs de campo, substitua SEU-ID-DE-CAMPO pelo seu número de campo real. Por exemplo, se o ID do seu campo for 13, altere field_SEU-ID-DE-CAMPO para field_13.

Portanto, se o ID do seu formulário for 999 e o ID do seu campo for 4, você alteraria:

jQuery('#wpforms-123-field_13')

para:

jQuery('#wpforms-999-field_4')

Observação: Sempre verifique seus IDs antes de usá-los no código. Usar o ID errado significa que suas personalizações não funcionarão como esperado.

Esses IDs são essenciais para muitas personalizações:

  • IDs de formulário são necessários ao aplicar CSS a um formulário específico, adicionar validação personalizada ou criar funcionalidades específicas do formulário.
  • IDs de campo são necessários ao estilizar campos específicos, adicionar regras de validação personalizadas ou criar cálculos específicos de campo.

Por exemplo, ao personalizar as cores do botão de envio, o uso de IDs de formulário específicos garante que suas alterações afetem apenas os formulários pretendidos:

/* Customize submit button color for specific forms */
#wpforms-form-561 .wpforms-submit {
    background-color: red;
}

E é tudo o que você precisa para encontrar e usar IDs de formulário e campo!

Próximo. você gostaria de saber mais sobre como personalizar seus formulários? Dê uma olhada em nosso guia sobre como adicionar estilos CSS personalizados para seus formulários.