Elementor

Embed Core Forms in Elementor pages with a native widget that handles form selection, theme override, and basic styling without shortcodes.

Widget name: core-forms-form Class: Core_Forms\Builders\ElementorFormWidget Source: src/builders/class-elementor-form-widget.php, src/builders/class-builder-integrations.php

The widget registers automatically when Elementor is active. No setup is required.

Adding the Widget

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

While no form is selected, the editor shows a "Select a Core Form." note. On the frontend, an unselected widget outputs nothing.

Content Tab

Control	Type	Description
Form	Select	Choose any Core Forms form by title
Theme override	Select	Use form setting (default), Force theme, or Disable theme

The theme override applies to this placement only:

• Use form setting -- respect the form's own "load form theme" setting.
• Force theme -- load the Core Forms form theme even if the form has it disabled.
• Disable theme -- skip the form theme so fields inherit your Elementor/site styles.

Style Tab (Fields section)

Control	Type	Description
Field gap	Slider (px or rem)	Sets the --cf-spacing CSS variable on the rendered .core-form, controlling vertical spacing between fields
Focus color	Color picker	Sets the --cf-focus CSS variable on .core-form, used for the input focus outline/accent

Both controls write scoped CSS through Elementor's selector system ({{WRAPPER}} .core-form), so different widget instances of the same form can use different spacing and focus colors.

How It Works

1. The widget resolves the selected form with cf_get_form() and renders the same markup as the [core_form] shortcode.
2. The theme override temporarily flips the form's load_form_theme setting for this render only -- the saved form is not modified.
3. Output is wrapped in a div.cf-elementor-widget carrying a data-cf-theme attribute with the override value.

Because the markup is identical to any other embed, validation, conditional fields, spam protection, and all configured actions work exactly as they do elsewhere.

Notes

• For further styling beyond the two Style controls, target .cf-elementor-widget .core-form in Elementor custom CSS or your stylesheet.
• The widget lists all forms; if a form is later deleted, the widget silently renders nothing on the frontend (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. The widget only registers when Elementor's widget base class exists.
• Theme styles still loading with "Disable theme": Another instance of the same form on the page may be forcing the theme; the stylesheet loads if any placement requests it.
• Focus color not visible: The control only sets --cf-focus; if custom CSS on the form overrides focus styles with fixed colors, the variable has no effect.