WordPress

Using FormBeep with WordPress#

FormBeep works with any WordPress form — whether you’re using popular form plugins like Contact Form 7, WPForms, Ninja Forms, and Forminator, or building custom forms with page builders like Elementor and Divi.

Quick Navigation#

Step 1: Add Allowed Domain#

Before you start, add your WordPress site’s domain to FormBeep:

  1. Go to Allowed Domains in your FormBeep Dashboard
  2. Enter only the hostname of your site:
    • ✔ example.com
    • ✔ shop.example.com (subdomain)
    • ✔ localhost or 127.0.0.1 (local testing)

Important: Use hostname only. Don’t include https://, paths, or ports.

Using FormBeep with WordPress Form Plugins#

If you’re already using a WordPress form plugin, you don’t need to rebuild your forms. Just add the FormBeep script and it works automatically.

Contact Form 7#

Contact Form 7 is the most popular WordPress form plugin (5M+ active installs). FormBeep works automatically with any Contact Form 7 form.

Steps:

  1. Go to Pages in WordPress dashboard
  2. Edit the page with your Contact Form 7 shortcode (e.g., [contact-form-7 id="123"])
  3. Scroll to the bottom of the page
  4. Click + → Select “Custom HTML” block
  5. Paste the FormBeep script:
<script src="https://api.formbeep.com/v1/s/formbeep.js"
        data-api-key="YOUR_API_KEY"></script>
  1. Replace YOUR_API_KEY with your actual key from FormBeep dashboard
  2. Click Update or Publish

Test it:

  • Visit your contact page
  • Fill out the Contact Form 7 form
  • Submit the form
  • Check WhatsApp for the notification

FormBeep automatically detects Contact Form 7 submissions and sends them to WhatsApp without interfering with CF7’s email notifications or redirects.

WPForms#

WPForms is a beginner-friendly drag-and-drop form builder (6M+ active installs). FormBeep works with both the free Lite and paid Pro versions.

Steps:

  1. Go to Pages in WordPress dashboard
  2. Edit the page with your WPForms form (shortcode or block)
  3. Scroll to the bottom of the page
  4. Click + → Select “Custom HTML” block
  5. Paste the FormBeep script:
<script src="https://api.formbeep.com/v1/s/formbeep.js"
        data-api-key="YOUR_API_KEY"></script>
  1. Replace YOUR_API_KEY with your actual key from FormBeep dashboard
  2. Click Update or Publish

Test it:

  • Visit your contact page
  • Fill out the WPForms form
  • Submit the form
  • Check WhatsApp for the notification

FormBeep works alongside WPForms’ built-in email notifications and confirmations. Your form continues to work exactly as before.

Spectra (Ultimate Addons for Gutenberg)#

If your WordPress site already has Spectra forms, FormBeep works with them automatically.

Steps:

  1. Go to Pages in WordPress dashboard
  2. Edit the page with your Spectra contact form
  3. Scroll to the bottom (below your Spectra form blocks)
  4. Click + → Select “Custom HTML” block
  5. Paste the FormBeep script:
<script src="https://api.formbeep.com/v1/s/formbeep.js"
        data-api-key="YOUR_API_KEY"></script>
  1. Replace YOUR_API_KEY with your actual key from FormBeep dashboard
  2. Click Update or Publish

Test it:

  • Visit your contact page
  • Fill out the Spectra form with test data
  • Submit the form
  • Check WhatsApp for the notification

FormBeep runs silently in the background. Your Spectra form continues to work exactly as before — visitors see no difference.

Gravity Forms#

Gravity Forms is a premium WordPress form plugin popular with agencies and businesses. FormBeep works with all Gravity Forms features including conditional logic and multi-page forms.

Steps:

  1. Go to Pages in WordPress dashboard
  2. Edit the page with your Gravity Forms form (shortcode or block)
  3. Scroll to the bottom of the page
  4. Click + → Select “Custom HTML” block
  5. Paste the FormBeep script:
<script src="https://api.formbeep.com/v1/s/formbeep.js"
        data-api-key="YOUR_API_KEY"></script>
  1. Replace YOUR_API_KEY with your actual key from FormBeep dashboard
  2. Click Update or Publish

Test it:

  • Visit your contact page
  • Fill out the Gravity Forms form
  • Submit the form
  • Check WhatsApp for the notification

FormBeep works alongside Gravity Forms’ confirmations, notifications, and integrations. Your form continues to work exactly as configured.

Ninja Forms#

Ninja Forms is a popular drag-and-drop form builder (1M+ active installs). FormBeep works automatically with Ninja Forms — no configuration needed.

Steps:

  1. Go to Pages in WordPress dashboard
  2. Edit the page with your Ninja Forms form (shortcode or block)
  3. Scroll to the bottom of the page
  4. Click + → Select “Custom HTML” block
  5. Paste the FormBeep script:
<script src="https://api.formbeep.com/v1/s/formbeep.js"
        data-api-key="YOUR_API_KEY"></script>
  1. Replace YOUR_API_KEY with your actual key from FormBeep dashboard
  2. Click Update or Publish

Test it:

  • Visit your contact page
  • Fill out the Ninja Forms form
  • Submit the form
  • Check WhatsApp for the notification

FormBeep automatically detects Ninja Forms submissions and works alongside its built-in notifications and confirmations.

Forminator#

Forminator is WPMU DEV’s form builder with advanced features. FormBeep works automatically with all Forminator form types.

Steps:

  1. Go to Pages in WordPress dashboard
  2. Edit the page with your Forminator form
  3. Scroll to the bottom of the page
  4. Click + → Select “Custom HTML” block
  5. Paste the FormBeep script:
<script src="https://api.formbeep.com/v1/s/formbeep.js"
        data-api-key="YOUR_API_KEY"></script>
  1. Replace YOUR_API_KEY with your actual key from FormBeep dashboard
  2. Click Update or Publish

Test it:

  • Visit your contact page
  • Fill out the Forminator form
  • Submit the form
  • Check WhatsApp for the notification

FormBeep works alongside Forminator’s email notifications and integrations without any interference.

Building Custom Forms with Page Builders#

If you want to create a custom HTML form (instead of using a form plugin), you can use these page builders:

Gutenberg (Block Editor)#

  1. Edit the page where you want the form
  2. Click + to add a block
  3. Select “Custom HTML”
  4. Paste your form + FormBeep script:
<form id="contact-form">
  <input name="name" placeholder="Your name" required>
  <input name="email" type="email" placeholder="you@example.com" required>
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>

<script src="https://api.formbeep.com/v1/s/formbeep.js"
        data-api-key="YOUR_API_KEY"></script>
  1. Replace YOUR_API_KEY and publish

Elementor#

  1. Open your page in Elementor
  2. Drag the HTML widget onto the page
  3. Paste the full form + script (see Gutenberg example above)
  4. Click Update

Divi#

  1. Edit your page with Divi
  2. Add a Code Module
  3. Paste the full form + script (see Gutenberg example above)
  4. Save and publish

Site-Wide Installation (All Pages)#

If you have forms on multiple pages or want FormBeep to work site-wide without editing individual pages, add the script to your theme globally.

Why this method? Safer than editing theme files — won’t break when you update your theme.

  1. Install the free “Insert Headers and Footers” plugin:

    • Go to Plugins → Add New
    • Search for “Insert Headers and Footers” by WPBeginner
    • Click Install Now → Activate

  2. Add FormBeep script:

    • Go to Settings → Insert Headers and Footers
    • Scroll to “Scripts in Footer” section
    • Paste the FormBeep script:
<script src="https://api.formbeep.com/v1/s/formbeep.js"
        data-api-key="YOUR_API_KEY"></script>
  1. Replace YOUR_API_KEY with your actual key
  2. Click Save

Done! FormBeep now works on every page of your WordPress site.

Method 2: Edit Theme Files (Advanced)#

⚠️ Warning: This method requires editing theme files. Your changes will be lost if you update your theme. Use a child theme or Method 1 instead.

  1. Go to Appearance → Theme File Editor
  2. WordPress will show a warning — click “I understand”
  3. On the right sidebar, find and click “Theme Footer” (footer.php)
  4. Scroll to the bottom and find </body>
  5. Add the FormBeep script just before </body>:
<script src="https://api.formbeep.com/v1/s/formbeep.js"
        data-api-key="YOUR_API_KEY"></script>
</body>
  1. Replace YOUR_API_KEY with your actual key
  2. Click Update File

Note: If you’re using a child theme, edit the child theme’s footer.php. If footer.php doesn’t exist in your child theme, copy it from the parent theme first.

Testing Your Form#

Always test on the published page URL (not in preview mode).

  1. Open the page on your live site
  2. Submit a test message with real data
  3. Check WhatsApp for the instant notification
  4. Tap “View Details” to see the full form data

Troubleshooting:

  • “Domain not allowed” error? Make sure the URL in your browser matches exactly what you added in Allowed Domains (without https://)
  • Not receiving notifications? Check that you added your WhatsApp number during FormBeep onboarding
  • Form not submitting? FormBeep runs in the background and never blocks form submissions — if the form itself isn’t working, it’s a separate WordPress/plugin issue

Need help? Reach out at hello@formbeep.com or message @rishikeshs on Discord.

Summarize with AI
Claude Claude OpenAI ChatGPT Gemini Gemini Grok Grok Perplexity Perplexity
Backward Site Builders & CMS Wix Forward