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

      • Forms in a modal

      Use this page when you want to open a Clickmax form in a modal triggered by a button, a link or any other trigger in your HTML.

      Full example

      <button data-cx-open="contato-modal" type="button">
  Open form
</button>

<div
  data-cx-form-widget
  data-cx-widget-id="contato-modal"
  data-cx-mode="modal"
  data-cx-title="Request a call"
  data-cx-description="Fill in your details and our team will get back to you."
  data-cx-submit-label="I want to talk to the team"
  data-cx-show-lgpd="true"
  data-cx-lgpd-required="true"
  data-cx-required-fields="email,telephone"></div>

      How it works

      1. the button uses data-cx-open="contato-modal"
      2. the widget uses data-cx-widget-id="contato-modal"
      3. when the visitor clicks the button, the modal opens
      4. submission behaves exactly like a normal form

      If you want a predictable implementation, always stick to this pattern:

      • a trigger with data-cx-open
      • a widget with data-cx-form-widget
      • a data-cx-widget-id matching the trigger's value

      Example with more visual context

      <section>
  <h2>Talk to a specialist</h2>
  <p>Open the form and send your details in a few seconds.</p>

  <button data-cx-open="contato-modal" type="button">
    Talk to a specialist
  </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="Request a call"
    data-cx-description="Fill in your details and our team will get back to you."
    data-cx-submit-label="Send"
    data-cx-fields="name,email,telephone"
    data-cx-required-fields="email,telephone"
    data-cx-show-lgpd="true"
    data-cx-lgpd-required="true"></div>
</section>

      When to use a modal

      Use a modal when:

      • you want to keep the main page uncluttered
      • the form is secondary to the flow
      • the submission should happen without taking the visitor to another screen too soon