Docs • Platform Guide

Using Web2Phone with Webflow

Connect your Webflow site to Web2Phone in a few minutes using a simple embed snippet. No custom backend, no Zapier, and no extra tools required.

If you want a higher-level overview of sending website enquiries to WhatsApp, see the Contact Form to WhatsApp guide. For other platforms, check the Getting Started page.

Start Free Jump to Allowed Domains

Step 1

Prerequisites

A Webflow project
Publishing access to your Webflow site
A Web2Phone account with a form created (see Getting Started)

💡

Important Webflow note

Web2Phone works best when you embed the full form HTML using a Webflow Embed element. If you use Webflow’s native Form block, it will submit to Webflow by default.

Step 2

Find Your Webflow URL(s)

Webflow gives your project a default webflow.io URL, such as:

https://yourproject.webflow.io

You may also connect a custom domain, for example:

https://example.com

Web2Phone only cares about the hostname (no protocol or path). Hostname examples: yourproject.webflow.io, example.com.

Step 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://, paths, or wildcards. If this is wrong you’ll hit “domain not allowed” errors — see the Troubleshooting guide.

Your URLs (examples)

https://yourproject.webflow.io
https://example.com

Allowed Domains entries

yourproject.webflow.io
example.com

ℹ️

About `www` domains

Web2Phone treats example.com and www.example.com as equivalent, so you typically only need to add the root domain (for example example.com).

Do this in Web2Phone

Open your form inside the Web2Phone dashboard.
Find the field Allowed Domains.
Add the hostname(s) you use (for example yourproject.webflow.io and example.com).
Click Save.

Only hostnames are accepted — no full URLs.

Step 4

Copy Your Web2Phone Embed Snippet

Each Web2Phone form has a ready-made embed snippet that contains your public key and endpoint. You’ll find it in your form settings inside the Web2Phone dashboard.

Your real snippet will include your own public key — don’t copy the example and forget to replace it.

Example Embed Snippet

<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="[email protected]" 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></p>

</form>

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

In your dashboard, you can copy this snippet with data-public-key already filled in.

Step 5

Add the Snippet to Webflow

In Webflow, you’ll paste the snippet using the built-in Embed element. Don’t use Webflow’s native Form block for this.

Open your Webflow project in the Designer.
Go to the page where you want the contact form.
From Add Elements, drag an Embed element into your layout.
Click the Embed element to open the code editor.
Paste your full Web2Phone embed snippet into the editor.
Click Save & Close.
Publish your site.

⚠️

If the button does nothing

Some editors strip scripts. If embed.js is missing on the live page, the form won’t submit. Check the Troubleshooting page for script and domain checks.

Step 6

Test Your Form

Open your live Webflow site (not just the designer preview).
Fill out the form and click Send.
Confirm that you receive:
- ✔ An instant WhatsApp message (if WhatsApp delivery is enabled)
- ✔ A backup email notification

🧯

If nothing arrives

Double-check your Allowed Domains hostnames match where you’re testing.
Confirm you pasted the embed snippet for the correct form (public key mismatch = wrong destination).
Check your dashboard for queued or failed submissions.