#Opções e atributos

Esta página é uma referência pública das opções disponíveis para formulários e widgets do Browser SDK.

#Formulários existentes

#data-cx-ingest-form

Marca um <form> para que o SDK assuma o envio do lead.

Use quando você já tem o HTML do formulário e quer conectar esse formulário ao comportamento da Clickmax.

#data-cx-hijack-form

Faz o SDK assumir o submit de forma exclusiva.

Use quando a página já possui lógica própria de envio e você quer evitar conflito entre comportamentos.

#data-cx-success-message

Define a mensagem exibida após envio com sucesso.

Use quando você quer personalizar o texto final mostrado ao visitante.

#data-cx-redirect-url

Define um destino explícito para redirect depois do envio.

Use quando o visitante deve ir para uma URL específica depois do envio.

#data-cx-nostyles

Mantém o comportamento do SDK, mas sem aplicar o visual padrão.

Use quando o formulário precisa seguir o CSS local da sua página.

#data-cx-locale

Controla o idioma das mensagens do SDK.

Valores esperados hoje:

• pt-BR
• en

#Widgets

#data-cx-form-widget

Marca um contêiner para que o SDK renderize o formulário automaticamente.

Use quando você quer que a Clickmax cuide também do HTML do formulário.

#data-cx-mode

Define como o widget deve aparecer.

Valores esperados hoje:

• inline
• modal

#data-cx-widget-id

Identifica um widget modal para ligação com gatilhos data-cx-open.

Use quando o formulário precisa abrir em modal a partir de um botão ou link da página.

#data-cx-title

Define o título mostrado pelo widget.

#data-cx-description

Define o texto de apoio mostrado logo abaixo do título.

#data-cx-submit-label

Define o texto do botão de envio.

#data-cx-fields

Escolhe quais campos o widget deve mostrar.

Exemplo:

data-cx-fields="name,email,telephone"

#data-cx-required-fields

Escolhe quais campos mostrados serão obrigatórios.

Exemplo:

data-cx-required-fields="email,telephone"

#data-cx-show-lgpd

Controla se o widget deve mostrar o checkbox de LGPD.

#data-cx-lgpd-required

Controla se o checkbox de LGPD será obrigatório.

#data-cx-theme

Define o tema visual do widget quando data-cx-nostyles não está ativo.

Valores esperados hoje:

• light
• dark
• auto

#data-cx-accent

Define a cor principal do widget.

Use quando você quer aproximar o visual do formulário ao branding da página.

#Gatilhos de modal

#data-cx-open

Abre um widget modal associado ao mesmo valor em data-cx-widget-id.

Exemplo:

<button data-cx-open="contato-modal" type="button">
  Abrir formulário
</button>

<div
  data-cx-form-widget
  data-cx-widget-id="contato-modal"
  data-cx-mode="modal"></div>

#Campos suportados

#data-cx-field="name"

Mapeia o nome do lead.

#data-cx-field="email"

Mapeia o e-mail do lead.

#data-cx-field="telephone"

Mapeia o telefone do lead.

#data-cx-field="lgpdApproved"

Mapeia a aprovação de LGPD.

#data-cx-field="website"

Campo honeypot anti-spam.

Ele deve existir no HTML, mas continuar vazio para usuários humanos.

#Categorias de uso rápido

#Para o formulário mais simples possível

Use:

• data-cx-ingest-form
• data-cx-success-message

#Para modal

Use:

• data-cx-form-widget
• data-cx-mode="modal"
• data-cx-widget-id
• data-cx-open

#Para visual próprio

Use:

• data-cx-nostyles

#Para redirect explícito

Use:

• data-cx-redirect-url