Elementor

Embed Core Forms in Elementor pages with the Core Form widget: pick a form, show its title, and style it from Elementor’s Style tab. Fields, emails and actions are still built in Core Forms (HTML builder or Block Editor); the widget places and styles a form, it doesn’t build one.

Widget name: core-forms-form Class: Core_FormsBuildersElementorFormWidget Source: src/builders/class-elementor-form-widget.php, src/builders/class-builder-styles.php, src/builders/class-builder-integrations.php

The widget and dynamic tags register automatically when Elementor is active and work with free Elementor. With Elementor Pro, the widget can also close or open popups after submit, and Pro’s own Form widget gains a Core Forms action.

Adding the widget

1. Edit a page with Elementor.
2. Search the widget panel for Core Form (General category). It also matches form, contact, core forms, newsletter and survey.
3. Drag it into the layout and choose a form.

While no form is selected, the editor shows “Select a Core Form in the Form controls.” On the live page, a widget without a form outputs nothing.

Content tab: Form

Control	Type	Description
Form	Select (searchable)	Any Core Forms form, by title
Show form title	Switch	Prints the form’s title at the top of the form, aligned with the fields
Title tag	Select	h2–h6 or p (default h3), shown when the title is on
Form theme	Select	Use the form setting (default), Load the form theme, or Use my Elementor styles only

The form theme choice applies to this placement only; the saved form isn’t changed.

• Use the form setting: follow the form’s own “Load form theme” setting.
• Load the form theme: load the Core Forms theme even if the form has it off.
• Use my Elementor styles only: skip the theme so fields inherit your site and Elementor styles.

Style tab

The Colors, Fields and Submit button controls set the form theme’s CSS variables on the rendered .cf-form, so focus rings, hover states and checkbox colors follow your choices. They need the form theme loaded. Typography controls style the elements directly and work either way.

Section	Controls	Sets
Form layout	Max width, Space between fields	--cf-max-width, --cf-spacing
Colors	Accent (focus, checkboxes, button), Text, Help text, Form background	--cf-brand + --cf-focus, --cf-text, --cf-text-soft, --cf-bg
Labels	Typography	Labels and legends
Fields	Background, Border color, Border width, Corner radius, Height, Typography	--cf-input-bg, --cf-border, --cf-border-width, --cf-radius, --cf-input-height, plus inputs, selects and textareas
Submit button	Background, Hover background, Text color, Corner radius, Width (fit text / full width), Typography	--cf-button-bg, --cf-button-hover, --cf-button-text, --cf-button-radius, --cf-button-width, plus the submit button
Messages	Success, Error	--cf-success, --cf-error

• Max width, space between fields, field height, both corner radii and button width are responsive: set them per breakpoint with Elementor’s device switcher.
• Every control is scoped to its widget ({{WRAPPER}} .cf-form), so two placements of the same form can look different.
• Inside the widget, the focus ring and button glow are derived from the accent and button colors, so a red accent gets a red glow rather than the theme’s default blue.
• Elementor’s Advanced tab (margin, padding, background, border, custom CSS) applies to the widget wrapper as usual.

The Bricks Core Form element offers the same style options from the same map, so a form styled in either builder exposes the same choices.

Assets

• Core Forms finds Core Form widgets in the page’s Elementor content, in saved templates the page embeds with the Template widget, and, with Elementor Pro, in Theme Builder headers, footers, single and archive templates and popups. It loads exactly the styles and scripts those forms need in the page head, so forms don’t flash unstyled.
• In the Elementor editor, the form styles load in the preview canvas, so the preview matches the live page and style changes show as you make them.
• The widget’s output is never cached by Elementor’s element cache, because forms carry per-visitor security tokens.

Dynamic tags

Core Forms adds a Core Forms group to Elementor’s dynamic tags (the stack icon next to text and number fields). The tags work in free Elementor.

Tag	Settings	Shows
Form title	Form	The form’s title
Submission count	Form, Thousands separator	How many genuine (not spam) submissions the form has, for lines like “1,204 people have signed up” or a Counter widget (leave the separator off for number fields)
Submission field	Form, Field name	One answer from a submission

Submission field reads the submission your code supplies through the cf_elementor_dynamic_submission filter, the same idea as the Bricks {cf_submission:field} token:

add_filter( 'cf_elementor_dynamic_submission', function ( $submission, $form_id, $tag ) {
    return cf_get_form_submission( 123 ); // your logic for picking the submission
}, 10, 3 );

Without the filter, people who can manage forms see the form’s latest genuine submission (useful for an internal dashboard page). Visitors see nothing, so a public page never shows someone else’s answers. Checkbox and multi-select answers show as a comma-separated list.

Elementor Pro

These options appear only when Elementor Pro is active.

Popups after submit

The Core Form widget gets an After submit section:

Control	Description
Close this popup	Closes the Elementor popup the form sits in
Open a popup	Opens one of your published Elementor popups
Delay (seconds)	Wait before closing or opening (default 2, up to 30), so the visitor can read the success message

Nothing happens when the form redirects after submit, or when the submission fails. The behavior uses Elementor Pro’s own popup actions, the same ones behind “Open popup” and “Close popup” links.

“Core Forms” action for the Elementor Pro Form widget

Sites that already built forms with Elementor Pro’s Form widget can send those submissions to Core Forms:

1. Edit the Elementor form and open Actions After Submit.
2. Add Core Forms.
3. In the new Core Forms section, pick the Core Form to save to, and choose whether to run that form’s actions.

What happens on each submission:

• The answers are saved to the chosen Core Form’s submissions (when that form has Save submissions on), so they show in its inbox, exports and analytics like any other entry.
• Answers are keyed by each Elementor field’s ID (Advanced → ID). Use those names in the Core Form’s emails and actions, for example [email] or [message].
• With Run the form’s actions on, the Core Form’s emails, webhooks and integrations run with their conditions, exactly as for a native submission.
• Elementor Pro handles validation, its honeypot and reCAPTCHA before the action runs; those fields, step fields and HTML fields aren’t stored.
• The chosen Core Form’s own fields don’t matter here. A simple form with just the actions you want is enough.

Upgrading from earlier versions

Widgets placed before this version keep their form, form theme, Field gap and Focus color choices. Focus color now appears as Accent under Colors and also colors checkboxes and the submit button. Both controls previously had no effect; they work now.

Notes

• The widget renders the same markup as the [cf_form] shortcode and the Core Forms block, so validation, conditional fields, spam protection and actions behave identically.
• If a selected form is later deleted, the widget renders nothing on the live page and shows the select prompt in the editor.
• Building with Bricks instead? See Bricks Builder. For other embedding options, see the Integrations Overview.

Troubleshooting

• Widget missing from the panel: Elementor must be active. Regenerate Elementor’s files under Elementor → Tools if the panel was cached.
• Color, field or button controls do nothing: the form theme isn’t loaded. Set Form theme to Load the form theme, or turn on “Load form theme” in the form’s settings. Typography controls work without it.
• Theme styles still load with “Use my Elementor styles only”: another placement of the same form on the page loads the theme; the stylesheet loads if any placement asks for it.
• Form unstyled in a Pro popup or template: templates more than two levels deep (a template inside a template inside a template) aren’t scanned; place the widget closer to the page or use the cf_current_page_contains_core_form filter.