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.

1. Prerequisites

  • A Webflow project
  • Publishing access to your Webflow site
  • A Web2Phone account with a form created

2. Find Your Webflow URLs

Webflow usually 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
https://www.example.com

Web2Phone only cares about the hostname (no protocol or path).

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.

Your Webflow URLs

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

Allowed Domains entries

yourproject.webflow.io
example.com
  1. Open your form inside the Web2Phone dashboard.
  2. Find the field Allowed Domains.
  3. Add the hostnames you use (for example yourproject.webflow.io and example.com).
  4. Click Save.

Do not include https://, www., or full URLs with slashes — only hostnames are accepted.

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.

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 this snippet with YOUR_PUBLIC_KEY already filled in.

5. Add the Snippet to Webflow

To embed Web2Phone in Webflow, you’ll use the built-in Embed element.

  1. Open your Webflow project in the Designer.
  2. Go to the page where you want the contact form.
  3. From the Add Elements panel, drag an Embed element into the layout (for example, inside a section or column).
  4. Click the Embed element to open the code editor.
  5. Paste your Web2Phone embed snippet into the editor.
  6. Click Save & Close.
  7. Publish your site.

After publishing, Web2Phone will handle submissions directly from your Webflow page.

6. Test Your Form

  1. Open your live Webflow site (either the webflow.io URL or your custom domain).
  2. Fill out the form and click Send.
  3. 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 and confirm that you pasted 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 Cloudflare Pages guides, or return to the main Getting Started guide.

Back to Getting Started Create Your Free Account