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:

<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.

Need help? If you encounter any issues or have questions about this guide, reach out at hello@formbeep.com or message @rishikeshs on Discord.