Documentation

Web2Phone — Getting Started Guide

Everything you need to start using Web2Phone: create forms, connect WhatsApp, embed on your website, and test your setup. Most users are live in under 5 minutes.

For platform-specific setup (GitHub Pages, Cloudflare Pages, Webflow, WordPress, Wix, Shopify, etc.), see the guides below or visit the full documentation index.

If you specifically want a “contact form to WhatsApp” setup and use cases, see Contact Form to WhatsApp in 5 Minutes.

Start Free Account Jump to Step 1

Setup Overview: From Form to WhatsApp Alerts

1

Create Account

2

Create Form

3

Enable Delivery

4

Copy Snippet

5

Embed & Test

✓

Live

Step 1

Create Your Web2Phone Account

Sign up takes about 30 seconds. No credit card required. Start on the free plan (25 emails + 3 WhatsApp notifications).

  1. Click Start Free Account (above) or in the top navigation
  2. Sign up using your email address and create a password
  3. Verify your email if prompted
  4. You’ll land in your Dashboard

✓ Free Plan Includes:

  • 25 email notifications per month
  • 3 WhatsApp notifications per month
  • 1 form
  • Spam protection (domain allow-list, rate limiting)
  • Built with privacy and GDPR best-practices in mind
  • Upgrade anytime
Step 2

Create Your First Form

  1. From the dashboard, click “Forms” in the sidebar
  2. Click “Create Form”
  3. Enter your form details:
    • Form Name: Give it a descriptive name (e.g., “Contact Form”, “Emergency Callout”, “Quote Request”)
    • Allowed Domains: Add the domain(s) where your form is hosted (this is the #1 cause of “form not working” — read the rules below)
  4. Add the fields you need: name, email, phone, message, or custom fields
  5. Click “Save Form”

💡 Pro Tip

Start simple (name, email, message) and test first. Add extra fields after you’ve confirmed delivery works.

For a deeper breakdown of how embedding works, see the Embed.js Reference.

⚠️

IMPORTANT — Allowed Domains

Web2Phone only accepts submissions from domains you explicitly allow. This blocks a huge amount of spam and abuse. If you see “domain not allowed”, start here and then check the Troubleshooting guide.

On first successful submission, Web2Phone may automatically lock the form to the detected domain.

Domain Format Rules

In the Allowed Domains field, enter only the hostname (no protocol, no paths).

❌ Do NOT include:

  • http:// or https://
  • Page paths (/contact, /index.html)
  • Wildcard domains (*.example.com)
  • Trailing slashes (/)
  • Page paths (/contact, /index.html)
  • Wildcard domains (*.example.com)

✅ Correct format:

example.com
            app.example.com
            yourusername.github.io
            myapp.pages.dev
            yourproject.webflow.io

Note: example.com and www.example.com are treated as equivalent. You may enter either one — you do not need to add both.

Examples by Platform

🌐 Standard Website

For https://example.com or https://www.example.com 

example.com

📦 Subdomain

For https://app.example.com 

app.example.com

🐙 GitHub Pages

For https://yourusername.github.io 

yourusername.github.io

☁️ Cloudflare Pages

For https://myapp.pages.dev 

myapp.pages.dev

🌊 Webflow

For https://yourproject.webflow.io 

yourproject.webflow.io
Step 3

Enable WhatsApp + Email Delivery

Each form has delivery settings. You can enable WhatsApp, email, or both.

📱

WhatsApp Delivery

  1. Enter your WhatsApp number in international format
    Example: +447912345678 (UK)
  2. Toggle WhatsApp Delivery to ON
  3. Save your form settings

✓ What happens:

When someone submits your form, Web2Phone sends a WhatsApp message to your number containing the submitted field values.

📧

Email Delivery

  1. Add one or more email addresses
    Example: [email protected], [email protected]
  2. Toggle Email Delivery to ON
  3. Save your form settings

✓ What happens:

Web2Phone sends an email notification containing the submitted form fields. Many users enable email as a searchable record and a team inbox option.

💡

Recommended Setup

Enable both WhatsApp and email. WhatsApp is for speed; email is for a clean record and backup.

Step 4

Get Your Embed Snippet

Each Web2Phone form has a ready-made embed snippet that includes your public key and the API endpoint. Copy it from your form settings and paste it into your website.

Example Embed Snippet

Your actual snippet will contain your unique public key. Here’s an example: 

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

  <div>
    <label>Name</label>
    <input name="name" placeholder="Your name" required>
  </div>

  <div>
    <label>Email</label>
    <input name="email" type="email" placeholder="[email protected]" required>
  </div>

  <div>
    <label>Phone</label>
    <input name="phone" placeholder="+447700900123">
  </div>

  <div>
    <label>Message</label>
    <textarea name="message" placeholder="Your message" required></textarea>
  </div>

  <button type="submit">Send Message</button>
  <p data-w2p-output></p>

</form>

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

🔑 Key Components

  • data-web2phone="form" — Identifies this as a Web2Phone form
  • data-public-key — Your unique public key (shown in the dashboard)
  • data-endpoint — The API endpoint for submissions
  • data-w2p-output — Where success/error messages appear
  • embed.js — Handles submission and user feedback in the browser

✨ Customization

You fully control the form’s HTML and styling:

  • Change labels/placeholders
  • Add your own CSS styling
  • Use your own button text and design
  • Match your website branding

For a full breakdown of attributes and behaviour, see the Embed.js Reference.

Step 5

Embed Your Web2Phone Form

Web2Phone works with any platform that can render HTML and load JavaScript. Here’s how to embed it on popular platforms:

📄

HTML Website

  1. Open your .html file
  2. Paste the embed snippet where you want the form to appear
  3. Save and deploy
  4. Submit a test form to confirm delivery
🔷

WordPress

  1. Edit any page/post
  2. Add an HTML / Custom HTML block
  3. Paste the embed snippet
  4. Publish/update the page
Full WordPress Guide →
🌊

Webflow

  1. Open your Webflow project
  2. Add an Embed element
  3. Paste the Web2Phone embed snippet
  4. Publish your site
Full Webflow Guide →
🎨

Wix / Squarespace

  1. Edit your page
  2. Add a Custom Code / HTML Embed block
  3. Paste the embed snippet
  4. Save and publish
Wix Guide → Squarespace Guide →
🐙

GitHub Pages

  1. Open your site HTML
  2. Paste the embed snippet
  3. Commit and push
  4. GitHub Pages auto-deploys
Full GitHub Pages Guide →
🛒

Shopify

  1. Shopify admin → Online Store → Pages
  2. Edit/create a page (Contact/Enquiry)
  3. Add a Custom Liquid / Custom HTML block
  4. Paste the embed snippet and save
Full Shopify Guide →
☁️

Cloudflare Pages

  1. Open your site HTML
  2. Paste the embed snippet
  3. Commit and push
  4. Cloudflare Pages auto-deploys
Full Cloudflare Pages Guide →

Using Web2Phone with JavaScript Frameworks

Web2Phone is framework-agnostic: it’s just HTML + a small browser script (embed.js). If your app can render a form in the browser, it can use Web2Phone.

⚛️

React / Next.js

Render the form normally, and load embed.js on the client:

  • The form is normal HTML with data attributes
  • embed.js must run in the browser (client-side)
  • Works with static sites and client-rendered pages
Full React Guide →
💚

Vue / Nuxt

Paste the embed snippet into your template and ensure the script loads on the page:

  • Works with Vue 2 / Vue 3
  • Compatible with Nuxt (client-side execution)
  • No special directives required
Full Vue Guide →
🅰️

Angular

Add the form HTML to your component template and load the script on the page:

  • Paste into component HTML
  • Load the script tag globally (or where appropriate)
  • Works when executed in the browser
🐍

Django / Flask Templates

Paste the embed snippet into your template:

  • Works in Django templates (.html)
  • Works in Jinja2 templates (Flask)
  • Can be included in base templates or blocks
Django Templates Guide →
💡

Framework Compatibility

If your page can render a form and run JavaScript in the browser, it can use Web2Phone. For the technical details, see the Embed.js Reference.

Step 6

Platform-Specific Guides

Use these guides for step-by-step platform instructions and common gotchas.

🐙

GitHub Pages

Add a working contact form to a static GitHub Pages site in minutes.

Open GitHub Pages Guide →
☁️

Cloudflare Pages

Use Web2Phone with Cloudflare Pages and static site generators (Hugo, Jekyll, 11ty, etc.).

Open Cloudflare Pages Guide →
🌊

Webflow

Add Web2Phone to Webflow using an Embed element and receive WhatsApp alerts.

Open Webflow Guide →

Don’t see your platform? Web2Phone works anywhere you can embed HTML + JavaScript. Visit the full documentation index.

Step 7 — Final Step

Test Your Form

Once your form is embedded, submit a test entry and confirm delivery.

Testing Steps

  1. Open your website where the form is embedded
  2. Submit the form using realistic test data
  3. Check WhatsApp (if enabled)
  4. Check email (if enabled)

✓ What You Should See

  • On-page message: a success message below the form
  • WhatsApp message: delivered shortly after submit (if enabled)
  • Email notification: delivered to your configured inbox (if enabled)
  • Dashboard log: submission appears in your dashboard

Example WhatsApp Message:

New form submission:

Name: John Smith
Email: [email protected]
Phone: +447700900123
Message: I need an emergency callout
⚠️

Troubleshooting

If you don’t receive notifications, check these first:

  • Allowed domains: your site hostname must be allowed
  • WhatsApp number format: must be international (e.g. +4479...)
  • Delivery toggles: WhatsApp/Email must be ON
  • Browser console: look for JavaScript errors
  • Dashboard logs: confirm the submission was received

For more common issues and fixes, see Troubleshooting Web2Phone Forms.

Common Questions

Do my customers need WhatsApp?

No. Customers submit your website form as normal. Only you (or your team) need WhatsApp to receive alerts.

Can I customize the form design?

Yes. The embed snippet is just HTML. Style it with your own CSS to match your site.

What happens if I exceed my plan limits?

Depending on your plan and delivery settings, WhatsApp delivery may pause when you hit your limit. Keep email enabled if you want a reliable backup channel, and upgrade any time if you need more volume.

Can multiple people receive notifications?

Yes. You can add multiple email recipients. WhatsApp is typically one number per form, but you can create multiple forms for different teams or departments.

Is Web2Phone GDPR compliant?

Web2Phone is built with GDPR best practices in mind (secure transport, controlled access, and spam protections). You’re still responsible for collecting only what you need and reflecting your usage in your privacy policy.

Can I add custom fields?

Yes. Add any fields you need. Web2Phone includes submitted values in your delivery notifications.

How fast are WhatsApp notifications?

Typically seconds. Delivery time depends on network conditions and messaging throughput, but most users see alerts almost immediately after submission.

Can I use Web2Phone with my existing form?

Yes. You can keep your existing HTML and either use the embed snippet or route submissions to Web2Phone, depending on your setup.

Have more questions?

Browse Full Documentation

What’s Next?

📊

Monitor Your Forms

Use your dashboard to review submissions, delivery logs, and quota usage.

⚙️

Customize Your Setup

Add more forms, adjust spam protection, and fine-tune delivery settings as your needs grow.

📈

Scale

Upgrade for higher WhatsApp quotas, more forms, and bigger usage limits — no redesign needed.

Helpful Resources

📚

Documentation Home

Browse all guides, tutorials, and platform instructions.

View Docs
🆚

Comparisons

Compare Web2Phone to other form backends and see what fits your needs.

View Comparisons
💼

For Trades

How service businesses use WhatsApp alerts to respond faster.

View Guide
💰

Pricing

View plans, quotas, and features.

View Pricing

Ready to Get Started?

Create your free Web2Phone account and start receiving form submissions on WhatsApp fast — without building a backend.

Start Free Account Browse All Docs

✓ Free plan: 25 emails + 3 WhatsApp • ✓ No credit card required • ✓ Quick setup