#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.

The value must be an http:// or https:// address. Any other kind of address is ignored, and the visitor sees the success message instead of being redirected.

When the destination is on the same domain as the page, or on a Clickmax domain, the newly captured contact's details (name, email and phone) travel in the query string — that is how the next step of a funnel arrives pre-filled. For a destination on another domain, only the campaign parameters (utm_source, utm_medium, utm_campaign, utm_content and utm_term) are appended.

#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