For AI agents: the complete documentation index is available at https://docs.clickmax.io/llms.txt, the full documentation bundle is available at https://docs.clickmax.io/llms-full.txt, and this page is available as Markdown at https://docs.clickmax.io/reference/browser-sdk/forms/modal.md.
  • Português

      • Formulários em modal

      Use esta página quando você quer abrir o formulário da Clickmax em um modal acionado por botão, link ou qualquer outro gatilho no HTML.

      Exemplo completo

      <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"
  data-cx-title="Solicite contato"
  data-cx-description="Preencha seus dados e nosso time retorna para você."
  data-cx-submit-label="Quero falar com o time"
  data-cx-show-lgpd="true"
  data-cx-lgpd-required="true"
  data-cx-required-fields="email,telephone"></div>

      Como funciona

      1. o botão usa data-cx-open="contato-modal"
      2. o widget usa data-cx-widget-id="contato-modal"
      3. quando o visitante clica no botão, o modal é aberto
      4. o envio segue o mesmo comportamento dos formulários normais

      Estrutura recomendada

      Se você quer uma implementação previsível, mantenha sempre este padrão:

      • um gatilho com data-cx-open
      • um widget com data-cx-form-widget
      • um data-cx-widget-id igual ao valor do gatilho

      Exemplo com mais contexto visual

      <section>
  <h2>Fale com um especialista</h2>
  <p>Abra o formulário e envie seus dados em poucos segundos.</p>

  <button data-cx-open="contato-modal" type="button">
    Falar com especialista
  </button>

  <div
    data-cx-form-widget
    data-cx-widget-id="contato-modal"
    data-cx-mode="modal"
    data-cx-theme="dark"
    data-cx-accent="#d4ff00"
    data-cx-title="Solicite contato"
    data-cx-description="Preencha seus dados e nosso time retorna para você."
    data-cx-submit-label="Enviar"
    data-cx-fields="name,email,telephone"
    data-cx-required-fields="email,telephone"
    data-cx-show-lgpd="true"
    data-cx-lgpd-required="true"></div>
</section>

      Quando usar modal

      Use modal quando:

      • você quer manter a página principal limpa
      • o formulário é secundário no fluxo
      • o envio deve acontecer sem levar o visitante para outra tela antes da hora