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