Trigger actions when the visitor clicks — calculate results, save a lead, send email, switch forms, open links, and more.
In the builder: Elements → Form Widgets → Button
Widget Settings
Variable
| UI field | Description |
|---|---|
| Name | Identifier for the button (required), e.g. btn_calculate. |
| Button Text | Label on the button. Supports [icon] shortcodes via Add icon. |
On Click
Configure what happens when the button is clicked:
- Click Add action to pick a command (e.g. Calculate, Save Lead, Send Email, Show Form, Open Link).
- Configure each action's settings in the row below its name.
See cookbooks for step-by-step examples: - Add a Calculate Button - Save a Lead from Your Form - Send Email When a Button Is Clicked
Visibility
Expand Visibility to show or hide the widget based on an active View Mode or a formula. See Show and Hide Fields with Conditional Logic.
| UI field | Description |
|---|---|
| Show | Always or Conditionally |
| Active mode is | Name of the View Mode that must be active for this widget to appear (when Show is Conditionally). |
| Formula result is positive | Optional formula; evaluated on Calculate |
Design
Expand Design to style individual parts of the widget. Prefer project themes for a consistent look; per-widget styling is optional.
| Part | What it represents |
|---|---|
| Button | The clickable button element. |
Custom CSS — useful selectors and classes:
| Selector / class | Targets |
|---|---|
#cp-{ID} |
Entire widget (ID from the Element panel header). |
| Custom CSS Classes | Classes you add in Design; applied to the outer widget container. |
#widget-{ID} |
The button element (button widgets use this id). |
.button-widget |
Outer widget type class. |