MetForm Integration

MetForm is an Elementor-based WordPress form builder. Because MetForm forms are rendered by Elementor’s JavaScript engine rather than PHP templates, the WP Smart Consent integration uses a different injection approach compared to standard form plugins.

Enabling the Integration#

In the WP Smart Consent dashboard, go to Form Sources and toggle MetForm on. Per-form behavior is then configured individually from the MetForm form list.

Per-Form Settings#

WP Smart Consent is configured per form from the WP Smart Consent panel on the form’s editor screen. MetForm forms are a custom post type, so each form has a standard WordPress editor at post.php?post={form_id}&action=edit (the same screen that holds the “Edit with Elementor” button) — WP Smart Consent adds its settings panel there, and it saves with the form.

There are two ways to reach it:

• From the form settings popup — In MetForm → Forms, edit a form to open its Form Settings popup, open the WP Smart Consent tab, and click Edit WP Smart Consent settings. This opens the form’s editor screen where the panel lives.
• Directly — edit the form and use the WP Smart Consent panel in the sidebar.

A WP Smart Consent sub-tab also appears under MetForm → Settings → CRM & Marketing (alongside the other CRMs) for discovery and status.

Settings are stored in wp_options, keyed by form ID, and saved with the standard editor’s Update button.

Form Type#

Contact form — MetForm renders its form on the front end with JavaScript (preact/HTM), so a PHP-rendered checkbox can’t be placed in the markup. Instead, an inline script emitted from wp_footer uses a MutationObserver to detect when the form is rendered (inside its mf-response-props-id-{form_id} container) and injects a native checkbox before the .mf-btn-wraper submit-button wrapper. Because MetForm can re-render the form, the script re-inserts the checkbox if it’s removed and preserves its ticked state.

MetForm collects field values from its internal component state and submits them as FormData via a fetch call to metform/v1/entries/insert/{form_id} — a native injected <input> wouldn’t be part of that state. WP Smart Consent therefore intercepts the fetch, reads the checkbox state, and appends wpsc_optin=1 to the request body when the visitor has ticked the box. Only ticked submissions are forwarded.

Newsletter form — no checkbox is injected. Every successful submission is treated as an opt-in and forwarded automatically.

Collect Fields#

Map the form’s fields to standard WPSC data fields. MetForm identifies each field by its mf_input_name slug — for example mf-email, mf-first-name-1, or mf-phone-1. These slugs are the keys in MetForm’s submitted $form_data array and are used directly for field-value lookups. The dropdowns are populated automatically from the form’s fields.

Email — required. First name, Last name, Phone, Company, Country — all optional. If a standard field is left unmapped, WP Smart Consent auto-detects it from the submission (the email is matched by value; name/phone/company/country by common field-name patterns), so a missing mapping doesn’t drop the data.

Extra Fields#

Below the standard field selectors, the Extra fields section lets you map any additional MetForm field to a custom CRM key. Select the form field on the left and enter the CRM key on the right. That key is sent alongside the standard contact data on every opt-in.

Submission Hook#

WP Smart Consent listens on metform_after_store_form_data, which fires after every successful MetForm submission. The hook provides the $form_data array keyed by mf_input_name slug, so mapped fields are looked up directly by the slugs configured in the per-form settings. Following the pattern of MetForm’s own CRM integrations (such as HubSpot), the hook is always active when MetForm is installed and gates on the per-form toggle — there’s no separate global switch to enable.

Troubleshooting#

Checkbox not appearing — confirm the form is enabled in the WP Smart Consent panel and set to Contact form mode (Newsletter mode injects no checkbox). Injection relies on a MutationObserver watching for the form to render; if the form is embedded in a popup or tab that loads lazily, give it a moment, and check the browser console for JavaScript errors on the page.

Consent value not captured on submit — the fetch intercept reads the checkbox state at submit time. Confirm the checkbox is present and ticked, then check WP Smart Consent → Logs to see whether the opt-in event fired.

Settings panel not visible — the panel is on the form’s editor screen (post.php?post={form_id}&action=edit), not inside the Elementor editor. Reach it via the WP Smart Consent tab in the Form Settings popup, or by editing the form directly.

Nothing appears in the log — WP Smart Consent logs every submission from an enabled form, ticked or not. If nothing appears, confirm the form is enabled and an Email field is mapped (or leave it unmapped to auto-detect). As a quick isolation test, set the form to Newsletter mode and submit once — that forwards every submission with no checkbox required.

Wrong field values forwarded — MetForm field slugs follow the pattern mf-{field-type}-{index} (e.g. mf-email, mf-first-name-1). If fields were re-ordered or re-added in the Elementor editor, an index suffix may have changed. Re-open the WP Smart Consent panel and re-select the correct fields.