#Options and attributes

This page is a public reference for the options available for Browser SDK forms and widgets.

#Existing forms

#data-cx-ingest-form

Marks a <form> so the SDK takes over sending the lead.

Use it when you already have the form's HTML and want to connect that form to Clickmax's behaviour.

#data-cx-hijack-form

Makes the SDK take over the submit exclusively.

Use it when the page already has its own submission logic and you want to avoid a clash between behaviours.

#data-cx-success-message

Sets the message shown after a successful submission.

Use it when you want to customise the final text shown to the visitor.

#data-cx-redirect-url

Sets an explicit destination to redirect to after submission.

Use it when the visitor should go to a specific URL after submitting.

#data-cx-nostyles

Keeps the SDK's behaviour but does not apply the default look.

Use it when the form has to follow your page's own CSS.

#data-cx-locale

Controls the language of the SDK's messages.

Values expected today:

• pt-BR
• en

#Widgets

#data-cx-form-widget

Marks a container so the SDK renders the form automatically.

Use it when you want Clickmax to handle the form's HTML as well.

#data-cx-mode

Sets how the widget should appear.

Values expected today:

• inline
• modal

#data-cx-widget-id

Identifies a modal widget so it can be linked to data-cx-open triggers.

Use it when the form has to open in a modal from a button or link on the page.

#data-cx-title

Sets the title the widget shows.

#data-cx-description

Sets the supporting text shown just below the title.

#data-cx-submit-label

Sets the text of the submit button.

#data-cx-fields

Chooses which fields the widget shows.

Example:

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

#data-cx-required-fields

Chooses which of the fields shown are required.

Example:

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

#data-cx-show-lgpd

Controls whether the widget shows the LGPD checkbox.

#data-cx-lgpd-required

Controls whether the LGPD checkbox is required.

#data-cx-theme

Sets the widget's visual theme when data-cx-nostyles is not active.

Values expected today:

• light
• dark
• auto

#data-cx-accent

Sets the widget's main colour.

Use it when you want the form to sit closer to the page's branding.

#Modal triggers

#data-cx-open

Opens the modal widget matching the same value in data-cx-widget-id.

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"></div>

#Supported fields

#data-cx-field="name"

Maps the lead's name.

#data-cx-field="email"

Maps the lead's email.

#data-cx-field="telephone"

Maps the lead's phone number.

#data-cx-field="lgpdApproved"

Maps the LGPD consent.

#data-cx-field="website"

An anti-spam honeypot field.

It has to exist in the HTML but stay empty for human users.

#Quick usage categories

#For the simplest possible form

Use:

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

#For a modal

Use:

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

#For your own look

Use:

• data-cx-nostyles

#For an explicit redirect

Use:

• data-cx-redirect-url