Using Advanced Settings
Requires Pro Plus or higher
For more advanced use cases of Carrd, the Advanced Settings feature provides access to the following additional settings for each element:
- Assign fixed IDs to elements in place of automatically generated IDs
- Add custom HTML attributes to elements
- Add custom classes to elements
- Apply custom CSS properties to elements (and if applicable, their subelements)
- Trigger custom JS code when certain events occur (where supported; see below for more information)
- Set the visibility of elements (for example, hidden on mobile but visible on desktop)
To access these settings, select an element, then click its Settings tab.
Events
Some element types support the ability to trigger custom JS code when certain events occur. This can be used to add all kinds of extended functionality not yet available natively within Carrd; for example, triggering a Google Analytics gtag() call to track a form submission, or triggering a third-party API call on a button click.
To access an element's events, select an element, click its Settings tab, then click Events. Events are currently supported on the following element types:
| Buttons | On Click (per button) | Triggered when a button is clicked. |
|---|---|---|
| Control | On Open (section breaks) | Triggered when the section is opened. |
| On Close (section breaks) | Triggered when the section is closed. | |
| Form | On Submit | Triggered when the form is submitted. |
| On Success | Triggered when the form is submitted and results in success. | |
| On Failure | Triggered when the form is submitted and results in failure. | |
| Gallery | On Click (per image) | Triggered when an image is clicked. |
| Icons | On Click (per icon) | Triggered when an icon is clicked. |
| Links | On Click (per link) | Triggered when a link is clicked. |