03 — Embedding · Cookbook

Keep your form. Add FormPing.

You already have a form on your site. You don't want to rebuild it. You just want submissions to land in FormPing too. Here's how, in three flavours.

Plain HTML

Say you have this somewhere on your page:

<form class="contact">
  <label>Name <input name="name" /></label>
  <label>Email <input name="email" type="email" /></label>
  <label>Message <textarea name="message"></textarea></label>
  <button type="submit">Send</button>
</form>

Add this script tag anywhere on the page:

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

Done. The widget intercepts the submit, reads name, email, and message via smart field detection, and forwards them to FormPing. Your visitor sees nothing different.

Contact Form 7 (WordPress)

Contact Form 7 renders <form class="wpcf7-form">. Either use the WordPress plugin (recommended — see WordPress) or add the Takeover snippet manually:

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

Hidden CF7 fields like _wpcf7_nonce, _wpcf7_recaptcha_response, and the g-recaptcha-response token are automatically filtered out so they don't pollute your inbox.

WPForms

WPForms renders <form class="wpforms-form">. Same recipe:

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

Multiple forms on the same page

Add one Takeover script per form, each with its own token and selector:

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

<script src="https://widget.formping.ch/widget.js"
        data-token="TOKEN_FOR_NEWSLETTER"
        data-form="#newsletter-form"
        defer></script>

Late-rendered forms

Some plugins render forms after the page has loaded (lazy modals, infinite scroll, etc.). Takeover automatically retries the lookup up to 10 times over ~5 seconds, so most late-rendered forms work without any extra setup. If yours takes longer, switch to Programmatic mode and call FormPing.init() right after the form mounts.

Verifying it works

Open your page in a fresh browser tab.
Open the dashboard inbox in a second tab.
Submit your form with test data.
Watch the submission appear in the dashboard within a second or two.

If nothing appears, check the browser console — the most common cause is the token's domain allowlist not including your origin.