FormBeep Documentation on FormBeep Docs

GitHub Pages

Mon, 01 Jan 0001 00:00:00 +0000

Using FormBeep with GitHub Pages#

GitHub Pages is ideal for portfolios, documentation, and student projects. Since GitHub Pages serves pure static files, you can’t run a backend to process forms. FormBeep solves this by routing submissions directly to your WhatsApp!

Step 1: Add Allowed Domain#

Go to your FormBeep Dashboard → Domains.
Add your GitHub Pages URL (e.g., yourusername.github.io).
Make sure to omit https:// and any trailing path.

Step 2: Add Embed Script#

In your repository, open the HTML file where you want the form (e.g., index.html or contact.html). Add the FormBeep script right before the closing </body> tag:

React

Mon, 01 Jan 0001 00:00:00 +0000

Using FormBeep in React#

If you are building a React application (e.g., Create React App, Next.js, Remix, Vite), you have two options for integrating FormBeep:

Option 1: Direct API Call (Recommended)#

Because React manages its own state and synthetic events, the cleanest way to use FormBeep is to call our API directly using fetch. You completely bypass the formbeep.js embed script.

import { useState } from 'react';

export default function ContactForm() {
  const [status, setStatus] = useState('idle');

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('submitting');
    
    // Create FormData object from the event target
    const formData = new FormData(e.target);
    
    // OPTIONAL: Convert to JSON if you prefer sending application/json
    const data = Object.fromEntries(formData.entries());

    try {
      const response = await fetch('https://api.formbeep.com/v1/submit/YOUR_API_KEY', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify(data),
      });

      if (response.ok) {
        setStatus('success');
        e.target.reset(); // Clear the form
      } else {
        setStatus('error');
      }
    } catch (err) {
      console.error(err);
      setStatus('error');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      
      <button type="submit" disabled={status === 'submitting'}>
        {status === 'submitting' ? 'Sending...' : 'Send'}
      </button>

      {status === 'success' && <p>Message sent successfully!</p>}
      {status === 'error' && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}

Advantages of the API Method:#

No external <script> tags to inject into your DOM.
Full control over your component state, loading UI, and error messaging.

Option 2: Script Injection#

If you prefer to let FormBeep handle everything (including honeypot injection automatically), you can manually append the script to the DOM when your component mounts.

WordPress

Mon, 01 Jan 0001 00:00:00 +0000

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.

There are two ways to add FormBeep to WordPress:

Method	Best For	Installation
WordPress Plugin ⭐ Recommended	Everyone	Download and upload
Embed Script	Advanced users or specific pages	Manual code insertion

Method 1: WordPress Plugin (Recommended)#

The easiest way to add FormBeep to WordPress. No code required.

Cloudflare Pages

Mon, 01 Jan 0001 00:00:00 +0000

Using FormBeep with Cloudflare Pages#

Cloudflare Pages is a fantastic static hosting solution for Vue, React, or plain HTML sites. Use FormBeep to collect leads easily without spinning up your own Cloudflare Worker or database for simple forms.

Step 1: Add Allowed Domain#

Go to your FormBeep Dashboard → Domains.
Add your pages.dev URL (e.g., my-project.pages.dev). Do not include https://.
(Optional) If you have a custom domain attached to your Pages project (e.g. example.com), make sure to add that as well!

Step 2: Add Embed Script#

Place the FormBeep script right before the closing </body> tag on any page that contains a form:

Installation

Mon, 01 Jan 0001 00:00:00 +0000

Installation#

Integrating FormBeep on your website requires absolutely zero markup changes to your existing HTML forms.

FormBeep is designed to be completely non-blocking. It simply listens for submissions in the background. Even in the rare 0.00001% chance that FormBeep is unreachable, your form will continue to function exactly as it normally would. Formbeep’s uptime is pretty good since it is served from Cloudflare which serves most of the web.

Just include the FormBeep script tag on your website and provide your unique API key.

Vue

Mon, 01 Jan 0001 00:00:00 +0000

Using FormBeep in Vue#

If you are building a Vue or Nuxt application, bypassing the embed script and calling the FormBeep API directly provides the best experience. It prevents DOM-manipulation conflicts and allows you to bind Vue’s reactive state natively.

API Integration#

Here is a simple example using Vue 3 Composition API:

<template>
  <form @submit.prevent="submitForm">
    <input v-model="form.name" type="text" placeholder="Name" required />
    <input v-model="form.email" type="email" placeholder="Email" required />
    <textarea v-model="form.message" placeholder="Message" required></textarea>

    <button type="submit" :disabled="status === 'submitting'">
      {{ status === 'submitting' ? 'Sending...' : 'Send' }}
    </button>

    <p v-if="status === 'success'" class="success">
      Message sent successfully!
    </p>
    <p v-if="status === 'error'" class="error">
      Something went wrong. Please try again.
    </p>
  </form>
</template>

<script setup>
import { reactive, ref } from 'vue'

const form = reactive({
  name: '',
  email: '',
  message: ''
})

const status = ref('idle')

const submitForm = async () => {
  status.value = 'submitting'

  try {
    const response = await fetch('https://api.formbeep.com/v1/submit/YOUR_API_KEY', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      // Vue's reactive object can be stringified directly
      body: JSON.stringify(form)
    })

    if (response.ok) {
      status.value = 'success'
      // Reset form
      form.name = ''
      form.email = ''
      form.message = ''
    } else {
      status.value = 'error'
    }
  } catch (error) {
    console.error(error)
    status.value = 'error'
  }
}
</script>

Advantages#

Full control over validation.
Can easily implement loaders.
Prevents external script evaluation on route changes in single-page applications.

Using the Embed Script#

If you really want to use the script, you would inject it in the standard fashion in either your index.html or app.vue (for Nuxt), ensuring it’s available globally. But beware of virtual DOM mismatches if the script attempts to inject response messages into your VNodes.

Wix

Mon, 01 Jan 0001 00:00:00 +0000

Using FormBeep with Wix#

Connect Wix explicitly using the built-in HTML element, instead of modifying standard Wix Apps forms, which hijack the submission payload.

Step 1: Add Allowed Domain#

Because of how Wix embeds custom code via iframes, you might need to add both your website domain and Wix’s internal rendering domain.

Add your naked domain: ✔ example.com

If you receive Domain Not Allowed errors, check your browser’s console, and see what the Origin header was. It might be a .wixsite.com or .filesusr.com url. Add that explicitly.

Django

Mon, 01 Jan 0001 00:00:00 +0000

Using FormBeep with Django#

Django natively renders robust templates. Because Django operates on the backend to render HTML strings sent to the browser, you can largely use FormBeep exactly as you would on a static HTML page.

Step 1: Add Allowed Domain#

Add the domain where your Django app is hosted to your FormBeep Dashboard. For local testing, add localhost or 127.0.0.1.

Step 2: Inject the Script#

Place the script tag in your base.html template right before the </body> tag so it’s globally available, or in a specific block if you only want it on pages with forms.

How It Works

Mon, 01 Jan 0001 00:00:00 +0000

How It Works#

FormBeep reliably delivers your form submissions directly to WhatsApp, protecting user data at every step.

The Notification Flow#

graph TD
    Visitor[Website Visitor] -->|Submits Form| Site(Your Website)
    
    Site -.->|Silently Captures Data| FB[FormBeep]
    
    FB -->|Sends Notification| WA[WhatsApp]
    
    WA --> Decision{What happens next?}
    
    Decision -->|You Tap 'View Details'| Deliver[Deliver Full Details]
    Decision -->|After 7 Days| Auto[Auto Expire]
    
    Deliver --> Delete((Permanently Delete Data))
    Auto --> Delete
    
    style FB fill:#f9f9f9,stroke:#333,stroke-width:2px,stroke-dasharray: 5 5
    style Delete fill:#ffcccc,stroke:#cc0000,stroke-width:2px,stroke-dasharray: 5 5

Form Submitted: A visitor submits a form on your website. FormBeep silently listens and captures the data in the background without blocking the submission.
Notification Received: You instantly receive a WhatsApp notification: "A new form was submitted on example.com — tap to view details."
You Tap “View Details”: When you tap the button on WhatsApp, our system securely fetches the submission data and sends you the exact form details.

The embed script dynamically injects hidden “honeypot” fields (formbeep_hp and w2p_hp) into your forms. Legitimate human users will not see or fill out these fields, but automated spam bots usually do.

Squarespace

Mon, 01 Jan 0001 00:00:00 +0000

Using FormBeep with Squarespace#

To use FormBeep on Squarespace, you will use a Code Block rather than Squarespace’s native Form Blocks.

Step 1: Add Allowed Domain#

Add the naked hostname of your live Squarespace site to the FormBeep Dashboard: ✔ example.com ✔ your-site.squarespace.com (if you don’t have a custom domain)

Step 2: Add a Code Block#

Edit a page or a post on your Squarespace site.
Click Add Block.
Select Code under the Basic category.
Delete the <p>Hello World</p> placeholder.
Make sure the Mode dropdown is set to HTML.
Turn OFF the “Display Source” toggle.
Paste your form and the FormBeep snippet:

<form id="contact-form">
  <input name="name" placeholder="Name" required>
  <input name="email" type="email" placeholder="Email" required>
  <textarea name="message" placeholder="What's on your mind?" required></textarea>
  <button type="submit">Send to WhatsApp</button>
</form>

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

Save the Code Block and Save/Exit the page editor.

Step 3: Test Live#

Squarespace disables JavaScript inside Code Blocks while you are logged in and editing the site as an admin.

Webflow

Mon, 01 Jan 0001 00:00:00 +0000

Using FormBeep with Webflow#

There are two ways to connect FormBeep with Webflow. Choose based on your plan:

Method	Works on	Requires
Webhook	Free & paid plans	Nothing extra
Embed Script	Paid plans only	Custom code access

Method 1: Webhook (All Plans)#

This method works on all Webflow plans including free. No code required.

Step 1: Copy Your Webhook URL#

Go to your FormBeep Dashboard → Webhooks
Click + Create webhook, choose Webflow as the platform, and save
Copy the webhook URL from the list

Step 2: Add the Webhook in Webflow#

Open your site in the Webflow Designer
Click on your form element to select it
Open the Settings panel on the right
Scroll down to Form Settings → under the Action section, click the + button next to Webhooks
Paste your FormBeep webhook URL — you can ignore the “Webhook Secret” field
Publish your site

Step 3: Test#

Visit your published site — webhooks do not fire in Webflow’s preview mode
Submit a test form
Check WhatsApp for the notification

Method 2: Embed Script (Paid Plans Only)#

Webflow’s custom code feature requires a paid plan. This method intercepts the form directly in the browser.

Hugo

Tue, 24 Feb 2026 00:00:00 +0000

Using FormBeep with Hugo#

Add FormBeep to your Hugo static site to receive WhatsApp notifications for form submissions.

Step 1: Add Allowed Domain#

Add your Hugo site’s domain to the FormBeep Dashboard:

✔ localhost (for local development with hugo server) ✔ example.com (production domain) ✔ yoursite.netlify.app or yoursite.pages.dev (hosting platform)

Step 2: Add FormBeep Script to Your Theme#

Option A: Add to Base Template (Recommended)#

Edit your layouts/_default/baseof.html (or your theme’s base template):

Next.js

Tue, 24 Feb 2026 00:00:00 +0000

Using FormBeep in Next.js#

FormBeep works with Next.js applications using either the App Router or Pages Router. Choose the method that best fits your setup.

Option 1: Direct API Call (Recommended)#

The cleanest way to use FormBeep in Next.js is to call the API directly from your form component. This works with both App Router and Pages Router.

App Router (Next.js 13+)#

'use client';

import { useState, FormEvent } from 'react';

export default function ContactForm() {
  const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');

  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setStatus('submitting');

    const formData = new FormData(e.currentTarget);
    const data = Object.fromEntries(formData.entries());

    try {
      const response = await fetch('https://api.formbeep.com/v1/submit/YOUR_API_KEY', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });

      if (response.ok) {
        setStatus('success');
        e.currentTarget.reset();
      } else {
        setStatus('error');
      }
    } catch (err) {
      console.error(err);
      setStatus('error');
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />

      <button type="submit" disabled={status === 'submitting'}>
        {status === 'submitting' ? 'Sending...' : 'Send'}
      </button>

      {status === 'success' && <p>Message sent successfully!</p>}
      {status === 'error' && <p>Something went wrong. Please try again.</p>}
    </form>
  );
}

Pages Router (Next.js 12 and earlier)#

The same component works in Pages Router. Just import it in your page:

Plans & Limits

Mon, 01 Jan 0001 00:00:00 +0000

Plans & Limits#

Plan Comparison#

Plan	Monthly Messages	Domains	WhatsApp Numbers	Webhooks	Price
Free	15	1	1	1	$0/month
Starter	200	2	2	2	$4.99/month
Pro	1,500	5	3	5	$24.99/month
Business	3,000	10	10	10	$49.99/month
Agency	7,000	Unlimited	Unlimited	Unlimited	$99/month

All plans include:

Instant WhatsApp notifications
Template + “View Details” button flow
7-day automatic data deletion
Bot/spam detection (honeypot fields)
Origin validation for security
Real-time delivery status tracking

What Each Limit Means#

Monthly Messages#

The total number of WhatsApp notifications FormBeep sends each month. Each recipient counts as one message — if you have 2 numbers configured, one form submission uses 2 messages. Bot-filtered submissions do not count toward your limit.

Privacy & Security

Mon, 01 Jan 0001 00:00:00 +0000

Privacy & Security#

FormBeep is designed from the ground up to protect user privacy. We don’t want to store your data, and we ensure that we only hold onto it for the bare minimum time required to deliver it to you.

Data Retention: The “View and Delete” Model#

Unlike traditional form backends that store a permanent log of all your form submissions in their databases, FormBeep explicitly opts out of data aggregation:

Shopify

Mon, 01 Jan 0001 00:00:00 +0000

Using FormBeep with Shopify#

You can add a FormBeep connected form to your Shopify store using the Custom Liquid block or by editing your theme files directly.

Step 1: Add Allowed Domain#

Add your live .myshopify.com domain OR your custom domain to your FormBeep Dashboard: ✔ example.com ✔ my-store-name.myshopify.com

Important: Provide the exact domain that users see in the address bar when visiting your store.

Step 2: Add Custom Liquid#

In your Shopify Admin, go to Online Store > Themes.
Click Customize on your current theme to open the visual editor.
Navigate to the page where you want the contact form.
Click Add section in the left sidebar and select Custom Liquid.
Paste your FormBeep HTML and script into the Custom Liquid text box:

<div class="contact-form-container" style="max-width: 600px; margin: 0 auto; padding: 20px;">
  <h2>Contact Us on WhatsApp</h2>
  <form id="contact-form">
    <div style="margin-bottom: 15px;">
      <input name="name" type="text" placeholder="Name" required style="width: 100%; padding: 10px;">
    </div>
    <div style="margin-bottom: 15px;">
      <input name="email" type="email" placeholder="Email" required style="width: 100%; padding: 10px;">
    </div>
    <div style="margin-bottom: 15px;">
      <textarea name="message" placeholder="Message" required style="width: 100%; padding: 10px; min-height: 100px;"></textarea>
    </div>
    <button type="submit" style="padding: 10px 20px; background: #000; color: #fff; border: none; cursor: pointer;">Send Message</button>
  </form>
</div>

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

Click Save in the top right.

Step 3: Test Your Form#

Navigate to the live URL of your Shopify store, fill out the form, and hit send to verify the WhatsApp notification triggers successfully!

Astro

Tue, 24 Feb 2026 00:00:00 +0000

Using FormBeep with Astro#

Add FormBeep to your Astro static site to receive WhatsApp notifications for form submissions.

Step 1: Add Allowed Domain#

Add your Astro site’s domain to the FormBeep Dashboard:

✔ localhost (for local development with astro dev) ✔ example.com (production domain) ✔ yoursite.netlify.app or yoursite.vercel.app (hosting platform)

Step 2: Add FormBeep Script to Your Layout#

Edit your base layout (typically src/layouts/Layout.astro):

---
// src/layouts/Layout.astro
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body>
    <slot />

    <!-- FormBeep Script -->
    <script
      src="https://api.formbeep.com/v1/s/formbeep.js"
      data-api-key="fbp_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      is:inline
    ></script>
  </body>
</html>

Important: Use is:inline to prevent Astro from bundling/optimizing the external script.

Customization

Mon, 01 Jan 0001 00:00:00 +0000

Customization#

FormBeep works automatically with all forms on your website, but you can customize its behavior using form attributes.

Ignore Specific Forms#

To exclude certain forms from FormBeep (like login forms, search bars, or newsletter signups), add the data-formbeep-ignore attribute:

<!-- This form will be ignored by FormBeep -->
<form data-formbeep-ignore>
  <input name="search" placeholder="Search...">
  <button>Search</button>
</form>

When to use:

Login/signup forms
Search forms
Filters or sort controls
Internal admin forms
Any form you don’t want notifications for

Exclude Specific Fields#

Sometimes you want FormBeep to work on a form, but skip certain fields — like captcha tokens, hidden tracking fields, or device fingerprints.

Framer

Mon, 01 Jan 0001 00:00:00 +0000

Using FormBeep with Framer#

FormBeep works with both Framer’s built-in forms and custom HTML forms. Add FormBeep to receive WhatsApp notifications for every form submission on your Framer site.

Step 1: Create Your Account and Verify WhatsApp#

Go to app.formbeep.com and sign up. Google, GitHub, or email all work.

After signing up, verify your WhatsApp number. Click Verify WhatsApp, scan the QR code, and send the message it generates. No Meta Business account or API approvals needed.

Troubleshooting

Mon, 01 Jan 0001 00:00:00 +0000

Troubleshooting#

If your form submissions are not appearing in WhatsApp, check the common issues below.

“Domain Not Allowed”#

This is the most common issue. For security reasons, FormBeep verifies the origin of every submission.

Solution:

Log in to your FormBeep dashboard.
Go to Domains.
Ensure your site’s domain is listed exactly as it appears in the browser, without http:// or https:// or trailing slashes. For local development, use localhost or 127.0.0.1.

✅ example.com ✅ shop.example.com ❌ https://example.com ❌ example.com/contact

Carrd

Tue, 24 Feb 2026 00:00:00 +0000

Using FormBeep with Carrd#

Connect FormBeep to your Carrd site to receive WhatsApp notifications for form submissions. Works with Carrd’s built-in forms.

Step 1: Add Allowed Domain#

Add your Carrd domain to the FormBeep Dashboard:

✔ yoursite.carrd.co (free Carrd domain) ✔ example.com (custom domain)

Step 2: Upgrade to Carrd Pro#

You need a Carrd Pro account to add custom code. Free Carrd accounts don’t support JavaScript embedding.

Webflow

Mon, 01 Jan 0001 00:00:00 +0000

Using FormBeep with Webflow#

There are two ways to connect FormBeep with Webflow. Choose based on your Webflow plan:

Method	Works on	Requires
Webhook ⭐ Recommended	Free & paid plans	Nothing extra
Embed Script	Paid plans only	Custom code access

Method 1: Webhook (All Plans)#

This method works on all Webflow plans including free. No code required.

Step 1: Copy Your Webhook URL#

Go to your FormBeep Dashboard → Webhooks
Click + Create webhook, choose Webflow as the platform, and save
Copy the webhook URL from the list

Step 2: Add the Webhook in Webflow#

Open your site in the Webflow Designer
Click on your form element to select it
Open the Settings panel on the right
Scroll down to Form Settings → under the Action section, click the + button next to Webhooks
Paste your FormBeep webhook URL — you can ignore the “Webhook Secret” field
Publish your site

Step 3: Test#

Visit your published site — webhooks do not fire in Webflow’s preview mode
Submit a test form
Check WhatsApp for the notification

Method 2: Embed Script (Paid Plans Only)#

Webflow’s custom code feature requires a paid plan. This method intercepts the form directly in the browser.

Ghost

Tue, 24 Feb 2026 00:00:00 +0000

Using FormBeep with Ghost#

Add FormBeep to your Ghost blog or website to receive WhatsApp notifications for form submissions.

Step 1: Add Allowed Domain#

Add your Ghost site’s domain to the FormBeep Dashboard:

✔ yourblog.ghost.io (Ghost(Pro) subdomain) ✔ example.com (custom domain)

Step 2: Add the FormBeep Script#

Log in to your Ghost Admin panel
Go to Settings → Code Injection
In the Site Header section, paste:

<script src="https://api.formbeep.com/v1/s/formbeep.js"
        data-api-key="fbp_xxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>

Replace fbp_xxxxxxxxxxxxxxxxxxxxxxxxxxxx with your actual API key from the FormBeep Dashboard.