03 — Embedding · Takeover

Use the form you already have.

Already wired up a Contact Form 7, WPForms, or plain HTML form? Takeover lets FormPing capture submissions without rebuilding anything. The widget watches for the submit, reads the field values, and forwards them — your existing markup, your existing styles.

The snippet

<script src="https://widget.formping.ch/widget.js"
        data-token="YOUR_TOKEN_HERE"
        data-form="form.contact"
        defer></script>

data-form takes a CSS selector pointing at your existing <form> element. The widget will:

Wait for the form to exist (it retries up to 10 times over ~5 seconds for late-rendered forms).
Intercept the submit event.
Read every named field value.
Run smart field detection to identify name, email, phone, and message.
Forward the submission to FormPing.
Optionally let the original form continue submitting too, if you want both.

Smart field detection

Takeover doesn't need you to rename your fields. It looks at the label, name, id, and placeholder of each input and matches against multilingual patterns in English, German, French, Spanish, Italian, and Portuguese to figure out what each field means. Examples it recognizes:

Name: name, full name, your name, Name, Vorname, nombre, nom, nome
Email: email, e-mail, mail, E-Mail, correo, courriel
Phone: phone, telephone, mobile, Telefon, teléfono, téléphone
Message: message, comments, your message, Nachricht, mensaje, message, messaggio

Detection is best-effort. If a field doesn't match any pattern, it's still included in the submission under its original name attribute — you'll just see it in the Inbox under that key instead of a friendly label.

Filtering metadata fields

Hidden fields used for tracking (e.g. _wpnonce, utm_source, g-recaptcha-response) are automatically filtered out so they don't pollute your inbox. Anything starting with an underscore or matching a known tracking parameter is skipped.

Compatible plugins

Takeover works with any plugin that produces a real <form> element:

Contact Form 7 — selector: .wpcf7-form
WPForms — selector: .wpforms-form
WS Form — selector: .wsf-form
Plain HTML — any selector you like

Plugins that don't render a real <form> tag (some block-based builders) aren't supported by Takeover. Use a Script Tag or iFrame embed instead.

When to use

You have a form on your site you don't want to touch.
You're migrating away from a different form service and want zero downtime.
Your form is rendered by a third-party plugin you don't control.