Using Web2Phone with Cloudflare Pages

Add a working contact form to any Cloudflare Pages site using a single Web2Phone embed snippet — no backend, functions, or server code required.

1. Prerequisites

  • A Cloudflare account
  • A project deployed on Cloudflare Pages
  • A Web2Phone account with a form created

2. Find Your Cloudflare Pages URL

Cloudflare Pages gives your site a default URL like: 

https://myapp.pages.dev

You might also connect a custom domain (for example https://example.com).

For Web2Phone, we only care about the hostname, not the full URL.

3. Add Your Hostnames to Allowed Domains

Web2Phone only accepts submissions from hostnames you authorise. In Allowed Domains, enter only the hostname: no http://, https://, www., slashes, or paths.

Example Cloudflare Pages URL

https://myapp.pages.dev

Allowed Domains entry

myapp.pages.dev

If you’re also using a custom domain (for example https://example.com), add an extra line: 

example.com
  1. Open your form inside the Web2Phone dashboard.
  2. Find the field Allowed Domains.
  3. Add myapp.pages.dev (and your custom domain hostname if used).
  4. Click Save.

As long as the hostname matches what the browser shows, Web2Phone will accept submissions.

4. Copy Your Web2Phone Embed Snippet

Each Web2Phone form has a ready-made embed snippet with your public key and endpoint already filled in. You’ll find it in your form settings.

It looks like this (your real snippet will have your own key): 

<form data-web2phone="form"
  data-public-key="YOUR_PUBLIC_KEY"
  data-endpoint="https://web2phone.co.uk/api/v1/submit/">

  <div><input name="name" placeholder="Your name" required></div>
  <div><input name="email" type="email" placeholder="you@example.com" required></div>
  <div><input name="phone" placeholder="+447700900123"></div>
  <div><textarea name="message" placeholder="Your message" required></textarea></div>

  <button type="submit">Send</button>
  <p data-w2p-output style="margin-top:8px;color:#333;"></p>

</form>

<script src="https://web2phone.co.uk/static/formsapp/js/embed.js"></script>

In your dashboard, you can copy a version of this snippet with YOUR_PUBLIC_KEY already filled in.

5. Paste the Snippet into Your Cloudflare Pages Site

In most Cloudflare Pages projects, your site is built from static files in a repo (for example, GitHub). To add Web2Phone:

  1. Open the HTML file where you want the contact form (for example index.html).
  2. Paste the Web2Phone embed snippet into the HTML where the form should appear.
  3. Commit and push your changes to your repo.
  4. Cloudflare Pages will redeploy your site automatically.

No additional Cloudflare configuration is required — the embed script loads directly from Web2Phone, and submissions go straight to your account.

6. Test Your Form

  1. Visit your Cloudflare Pages URL (for example https://myapp.pages.dev).
  2. Fill in the form and click Send.
  3. You should receive:
    • ✔ An instant WhatsApp message (if enabled)
    • ✔ A backup email notification

If nothing arrives, double-check your Allowed Domains hostnames and that you copied the correct embed snippet for the form you’re testing.

Next Steps

Want to use Web2Phone on other platforms too? Check out the GitHub Pages and Webflow guides, or return to the main Getting Started guide.

Back to Getting Started Create Your Free Account