Marketing · Elementor
Form Builder widget for Elementor
A form you build in Elementor: fields, layout, and submit behavior for contact, quotes, and lead capture.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A form you build in Elementor: fields, layout, and submit behavior for contact, quotes, and lead capture.
render() writes HTML data attributes: data-actions, data-allft, data-key, data-list-id, data-mailchimp-fields, data-maxfs, data-maxfs-notice, data-redirect-url.
Mailchimp is a server-side integration in this widget (API key / list ID), not a form embed.
Some inspector controls are marked Pro in PHP (eicon-pro-icon / king-addons-pro-control). Those need King Addons Pro, not Elementor Pro.
The widget script reads data attributes: data-mailchimp-fields, data-setting.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Form Builder”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Type”, “Label”, “Sub Label”, “Previous Button”. Style and Content tabs are listed on this page.
When to use it
- A contact form that emails the site admin.
- A quote request with dropdowns and file upload.
- A multi-step lead form on a landing page.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Form Builder.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| form_fields — Type | Select inspector control (`field_type`). |
| form_fields — Label | Text inspector control (`field_label`). |
| form_fields — Sub Label | Text inspector control (`field_sub_label`). |
| form_fields — Previous Button | Text inspector control (`previous_button_text`). |
| form_fields — Next Button | Text inspector control (`next_button_text`). |
| form_fields — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| form_fields — Placeholder | Text inspector control (`placeholder`). |
| form_fields — Default Value | Text inspector control (`field_value`). |
| form_fields — ID | Element ID should be unique and not used elsewhere in this widget. |
| form_fields — Required | Switcher inspector control (`required`). |
| form_fields — Multiple | Switcher inspector control (`allow_multiple_upload`). |
| form_fields — File Size (MB) | Numeric control (min 1). Max upload size allowed is. |
| form_fields — File Types | Enter the comma separated file types to allow. |
| form_fields — Options | Insert each option on a separate line. To set a different label and value for an option, separate them with a pipe ("|"). Example: First Option|f_option. |
| form_fields — Multiple Selection | Switcher inspector control (`allow_multiple`). |
| form_fields — Rows | Numeric control (min 2). |
| form_fields — Inline List | Switcher inspector control (`inline_list`). |
| form_fields — HTML | Textarea inspector control (`field_html`). |
| form_fields — Column Width | Writes CSS `width` onto the widget’s front-end markup. (min 10, max 100). |
| form_fields — Rows (Rows) | Numeric control (default 7). |
| form_fields — Size | Options: Normal; Compact. |
| form_fields — Style | Options: Light; Dark. |
| Fields — Form Fields | Repeater rows; render() loops each item to build the list or slides. |
| Buttons — Column Width | Writes CSS `width` onto the widget’s front-end markup. (min 10, max 100). |
| Buttons — Step Buttons Width | Writes CSS `width` onto the widget’s front-end markup. (min 0, max 500). |
| Buttons — Alignment | Writes CSS `king-addons-fb-step-tab` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Buttons — Submit | Text inspector control (`button_text`). |
| Buttons — Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Buttons — Icon Position | Options: Before; After. |
| Buttons — Icon Spacing | Writes CSS (margin-left, margin-right) onto the widget’s front-end markup. (max 50). |
| Buttons — Button ID | Element ID should be unique and not used elsewhere in this widget. |
| Settings — Form Name | Text inspector control (`form_name`). |
| Settings — Form ID | Form ID should be unique and shouldn't contain spaces. |
| Settings — Success Message | Text inspector control (`success_message`). |
| Settings — Error Message | Text inspector control (`error_message`). |
| Settings — Show Field Labels | Switcher inspector control (`show_labels`). |
| Settings — Show Placeholders | Switcher inspector control (`show_placeholders`). |
| Settings — Show Required Mark | Switcher inspector control (`mark_required`). |
| Actions — Add Action | Select the actions to perform after a user submits the form (e.g., sending an email notification). Once an action is selected, its corresponding settings will be displayed below. |
| Widget — Webhook URL | Enter the webhook URL (e.g. Zapier) that will receive the submitted data. |
| Widget — Redirect To | Text inspector control (`redirect_to`). |
| Mailchimp — Select Audience | Select inspector control (`mailchimp_audience`). |
| Mailchimp — Groups | Select2 inspector control (`mailchimp_groups`). |
| Mailchimp — Email | Select inspector control (`email_field`). |
| Mailchimp — First Name | Select inspector control (`first_name_field`). |
| Mailchimp — Last Name | Select inspector control (`last_name_field`). |
| Mailchimp — Phone | Select inspector control (`phone_field`). |
| Mailchimp — Birthday | Select inspector control (`birthday_field`). |
| Mailchimp — Address | Select inspector control (`address_field`). |
| Mailchimp — Country | Select inspector control (`country_field`). |
| Mailchimp — City | Select inspector control (`city_field`). |
| Mailchimp — State | Select inspector control (`state_field`). |
| Mailchimp — Zip | Select inspector control (`zip_field`). |
| Steps — Type | Options: None; Label; Icon; Number; Progress Bar; Number & Label; Icon & Label. |
| Steps — Content Layout | Options: Horizontal; Vertical. |
| Steps — Separator | Switcher inspector control (`show_separator`). |
| Steps — Box Alignment | Writes CSS (align-items, justify-content) onto the widget’s front-end markup. Options: Left; Center; Right. |
| Steps — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Form — Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Form — Mark Color | Writes CSS (king-addons-form-field-label, color) onto the widget’s front-end markup. |
| Form — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-field-group > label`. |
| Form — Distance | Writes CSS (padding-left, body, padding-right, padding-bottom) onto the widget’s front-end markup. (min 0, max 60). |
| Form — Horizontal Distance | Writes CSS (padding-right, padding-left, margin-left, margin-right) onto the widget’s front-end markup. (min 0, max 60). |
| Form — Vertical Distance | Writes CSS (king-addons-field-group, margin-bottom) onto the widget’s front-end markup. (min 0, max 60). |
| Form — Align Labels | Writes CSS (king-addons-field-group, justify-content) onto the widget’s front-end markup. Options: Left; Center; Right. |
| Field (Normal) — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Field (Normal) — Background Color | Writes CSS (king-addons-field-group, king-addons-form-field, background-color) onto the widget’s front-end markup. |
| Field (Normal) — Border Color | Writes CSS (king-addons-field-group, king-addons-form-field, border-color, king-addons-select-wrap, color) onto the widget’s front-end markup. |
| Field (Normal) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-field-group .king-addons-form-field, {{WRAPPER}} .king-addons-…`. |
| Field (Focus) — Color | Writes CSS (king-addons-form-field, color) onto the widget’s front-end markup. |
| Field (Focus) — Background Color | Writes CSS (king-addons-field-group, king-addons-form-field, background-color, select) onto the widget’s front-end markup. |
| Field (Focus) — Border Color | Writes CSS (king-addons-field-group, king-addons-form-field, border-color, select, king-addons-select-wrap, focus-within) onto the widget’s front-end markup. |
| Field (Error) — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Field (Error) — Background Color | Writes CSS (king-addons-field-group, king-addons-form-field, background-color) onto the widget’s front-end markup. |
| Field (Error) — Border Color | Writes CSS (king-addons-field-group, king-addons-form-field, border-color, king-addons-form-error-wrap, color) onto the widget’s front-end markup. |
| Field — Border Width | Writes CSS (king-addons-field-group, king-addons-form-field, border-width) onto the widget’s front-end markup. |
| Field — Border Radius | Writes CSS (king-addons-field-group, king-addons-form-field, border-radius) onto the widget’s front-end markup. |
| Field — Padding | Writes CSS (king-addons-field-group, king-addons-form-field, padding, right) onto the widget’s front-end markup. |
| Field — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Field — Inner Gutter | Writes CSS (margin-left, label, margin-right) onto the widget’s front-end markup. (min 0, max 50). |
| Checkbox & Radio — Use Custom Styles | Switcher inspector control (`checkbox_radio_custom`). |
| Checkbox & Radio — Static Color | Writes CSS (label, background-color) onto the widget’s front-end markup. |
| Checkbox & Radio — Active Color | Writes CSS (label, color) onto the widget’s front-end markup. |
| Checkbox & Radio — Border Color | Writes CSS (label, border-color) onto the widget’s front-end markup. |
| Checkbox & Radio — Size | Writes CSS (label, width, height, line-height, font-size) onto the widget’s front-end markup. (min 10, max 50). |
| Buttons (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Buttons (Normal) — Text Color | Writes CSS (color, background-color, fill) onto the widget’s front-end markup. |
| Buttons (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Buttons (Normal) — Background Color (Previous Button Background Color) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Buttons (Normal) — Text Color (Previous Button Text Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Buttons (Normal) — Border Color (Previous Button Border Color) | Writes CSS `border-color` onto the widget’s front-end markup. |
| Buttons (Normal) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-button, {{WRAPPER}} .king-addons-fb-step-prev, {{WRAPPER}} .ki…`. |
| Buttons (Hover) — Background Color | Writes CSS (king-addons-fb-step-next, background-color) onto the widget’s front-end markup. |
| Buttons (Hover) — Text Color | Writes CSS (king-addons-fb-step-next, color, fill) onto the widget’s front-end markup. |
| Buttons (Hover) — Border Color | Writes CSS (king-addons-fb-step-next, border-color) onto the widget’s front-end markup. |
| Buttons (Hover) — Background Color (Previous Button Background Color Hover) | Writes CSS (king-addons-fb-step-prev, background-color) onto the widget’s front-end markup. |
| Buttons (Hover) — Text Color (Previous Button Text Color Hover) | Writes CSS (king-addons-fb-step-prev, color) onto the widget’s front-end markup. |
| Buttons (Hover) — Border Color (Previous Button Border Color Hover) | Writes CSS (king-addons-fb-step-prev, border-color) onto the widget’s front-end markup. |
| Buttons — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-button, {{WRAPPER}} .king-addons-fb-step-prev, {{WRAPPER}} .ki…`. |
| Buttons — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Buttons — Text Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Step (Normal) — Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Step (Normal) — Sub Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Step (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Step (Normal) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Step (Active) — Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Step (Active) — Sub Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Step (Active) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Step (Active) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Step (Finished) — Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Step (Finished) — Sub Label Color | Writes CSS `color` onto the widget’s front-end markup. |
| Step (Finished) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Step (Finished) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Step — Distance | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 50). |
| Step — Gutter | Writes CSS (margin-left, margin-right, king-addons-fb-step) onto the widget’s front-end markup. (min 0, max 25). |
| Step — Border Type | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Step — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. |
| Step — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Step — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Step (Normal) — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Step (Normal) — Background Color (Step Inner Bg Color) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Step (Normal) — Border Color (Step Inner Border Color) | Writes CSS `border-color` onto the widget’s front-end markup. |
| Step (Active) — Color | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Step (Active) — Background Color (Step Inner Bg Color Active) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Step (Active) — Border Color (Step Inner Border Color Active) | Writes CSS `border-color` onto the widget’s front-end markup. |
| Step (Finish) — Color (Labels, Icon, Number) | Writes CSS (color, fill) onto the widget’s front-end markup. |
| Step (Finish) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Step (Finish) — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Step — Border Type (Step Inner Border Type) | Writes CSS `border-style` onto the widget’s front-end markup. Options: None; Solid; Double; Dotted; Dashed; Groove. |
| Step — Border Width (Step Inner Border Width) | Writes CSS `border-width` onto the widget’s front-end markup. |
| Step — Border Radius (Step Inner Border Radius) | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Step — Box Size | Spacing/size control (min 0, max 200). |
| Step — Icon Size | Writes CSS (font-size, width, height) onto the widget’s front-end markup. (min 0, max 25). |
| Step — Distance (Step Label Distance) | Writes CSS (margin-left, margin-top) onto the widget’s front-end markup. (min 0, max 50). |
| Step — Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Step — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Step — Fill Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Step — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-fb-step-progress-fill`. |
| Step — Divider Height | Spacing/size control (min 0, max 10). |
| Step — Text Distance | Writes CSS `padding-right` onto the widget’s front-end markup. (min 0, max 50). |
| Step — Border Radius (Step Progress Border Radius) | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 100). |
| Step — Typography (Main Label Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-fb-step-main-label`. |
| Step — Typography (Sub Label Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-fb-step-sub-label`. |
| Step — Typography (Step Number) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-fb-step-number`. |
| Results — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-submit-success, {{WRAPPER}} .king-addons-submit-error`. |
| Results — Success Color | Writes CSS `color` onto the widget’s front-end markup. |
| Results — Error Color | Writes CSS `color` onto the widget’s front-end markup. |
| Results — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Form Builder options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
Where do Form Builder subscribers go?
To the Mailchimp audience configured on the widget (API key and list ID in PHP). That is not the WordPress comments table.
Where do submissions go?
King Addons → Form Submissions in wp-admin, and/or email depending on the form’s actions. Test on staging first.
How do I add Form Builder in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Form Builder”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related marketing widgets
Mailchimp
A Mailchimp subscribe form styled in Elementor. Connect an audience, then match fields to your list.
Login | Register Form
AJAX login and registration on a normal Elementor page, with validation and optional extra fields.
Phone Call Button
A click-to-call button that opens the phone app on mobile and still looks like a CTA on desktop.
Business Hours
Opening hours with weekday rows, highlights for today, and closed states.
Countdown & Timer
A countdown to a date (or evergreen) for launches, sales, and events.
Flip Countdown & Timer
A flip-clock countdown with the same job as Countdown, in a different visual style.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Form Builder after you activate it.