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#

1. Go to your FormBeep Dashboard → Domains.
2. Add your pages.dev URL (e.g., my-project.pages.dev). Do not include https://.
3. (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:

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

(Note: if you are using a framework like Next.js or Nuxt exported to Static Html, place this in your root layout or _app.js equivalent.)

Step 3: Embed Your Form#

No need for JavaScript fetch calls. FormBeep intercepts standard HTML form submissions automatically:

<form id="contact-form">
  <input name="name" type="text" placeholder="Your name" required>
  <input name="email" type="email" placeholder="you@example.com" required>
  <textarea name="message" placeholder="Your message" required></textarea>
  <button type="submit">Send Message</button>
</form>

Testing locally using wrangler pages dev? Just add localhost or 127.0.0.1 to your FormBeep Allowed Domains list.