Docs • Platform Guide

Using Web2Phone with WordPress

Add a WhatsApp-connected contact form to any WordPress site — including Elementor, Divi, Kadence, Astra, BuddyBoss, and other major page builders — by pasting the Web2Phone embed snippet.

For the client-facing overview, see the WordPress contact form backend page.

Start Free Jump to Embed
Step 1

Create Your Form in Web2Phone

  1. Log in to your Web2Phone dashboard.
  2. Go to Forms → Create Form.
  3. Enter a name and set up your fields.
  4. In Allowed Domains, enter only the hostname of your live WordPress site:
    • ✔ example.com
    • ✔ shop.example.com (subdomain)
    • ✔ mycommunity.example.com (BuddyBoss / membership sites)
    • ✔ localhost or 127.0.0.1 (local testing)
  5. Save your form and copy your Embed Snippet.
⚠️

Allowed Domains rules

Allowed Domains must be hostname-only. Don’t include protocol, paths, or ports.

  • ✅ example.com
  • ✅ shop.example.com
  • ❌ https://example.com
  • ❌ example.com/contact
  • ❌ localhost:3000
💡

Tip: copy it from the live URL

Open your live WordPress site in a new tab and copy the hostname from the address bar, then paste that value into Allowed Domains.

Step 2

Add the Form to a WordPress Page

You can embed Web2Phone in any page or post. Use the method that matches your editor.

Using the WordPress Block Editor (Gutenberg)

  1. Edit the page where you want the form.
  2. Click + to add a block.
  3. Select Custom HTML.
  4. Paste your full Web2Phone embed snippet (including the script tag).
  5. Publish / Update.
ℹ️

Example snippet

Your real snippet will include your public key and endpoint. Example: 

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

  <input name="name" placeholder="Your name" required>
  <input name="email" type="email" placeholder="[email protected]" required>
  <textarea name="message" placeholder="Message" required></textarea>

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

</form>

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

Using Elementor

  1. Open your page in Elementor.
  2. Drag the HTML widget onto the page.
  3. Paste the full embed snippet (including the script tag).
  4. Click Update.

Using Divi

  1. Edit your page with Divi.
  2. Add a Code Module.
  3. Paste the full embed snippet.
  4. Save and publish.

BuddyBoss

BuddyBoss is compatible — embed using Gutenberg, Elementor, or Divi as above.

⚠️

Test on the live URL

Always test on the published page URL. Some builders and previews don’t run scripts reliably.

Step 3

Test Your Form

  1. Open the page on your live site.
  2. Submit a realistic test message.
  3. Confirm delivery (WhatsApp if enabled, plus email if enabled).
✓

What you should see

  • A success message under the form (if data-w2p-output is present)
  • A WhatsApp notification (if enabled)
  • An email notification (if enabled)

If it fails, jump to the Troubleshooting guide.

Step 4

WordPress-specific troubleshooting

  • The form shows but does nothing?
    Some themes/plugins strip or delay scripts. Confirm the live page still includes: <script src="https://web2phone.co.uk/static/formsapp/js/embed.js"></script>
  • Scripts are being removed?
    Try embedding via your builder’s HTML/Code widget/module, or add the script tag site-wide (header/footer) and paste only the <form> on each page.
  • “Domain not allowed”?
    Allowed Domains must be hostname-only and match the live hostname you’re testing. No protocol, no paths, no ports.
Need the full checklist?
Troubleshooting Create Free Account