Docs • Developer Guide

Using Web2Phone with Vue

Add a Web2Phone-powered contact form to any Vue app using the standard embed snippet and a tiny client-side script loader.

Web2Phone runs in the browser (client-side). If you’re using SSR (for example Nuxt), make sure the embed script only loads on the client.

Start Free Jump to Step 1

Step 1

Create Your Form and Set Allowed Domains

Create a form in the Web2Phone dashboard.
Add your Vue app’s hostname under Allowed Domains. Enter only the hostname: no https://, no paths, no wildcards. Examples:
- example.com
- myapp.vercel.app
- localhost (local dev)
- 127.0.0.1 (local dev)
Save the form and copy your form’s embed snippet (public key + endpoint).

⚠️

Common Allowed Domains mistakes

❌ https://example.com (protocol)
❌ example.com/contact (path)
❌ *.example.com (wildcards)
❌ localhost:5173 / localhost:3000 (ports)
✅ example.com
✅ localhost

💡

About `www`

Web2Phone treats example.com and www.example.com as equivalent. You don’t need to add both — just use the hostname only (no protocol/paths).

Step 2

Create a Vue Component

In a Vue 3 project, create a component such as Web2PhoneForm.vue. This loads embed.js once and renders the Web2Phone form.

<script setup>
import { onMounted } from "vue";

onMounted(() => {
  // Client-side only: load embed.js once
  const src = "https://web2phone.co.uk/static/formsapp/js/embed.js";
  const existing = document.querySelector(`script[src="${src}"]`);

  if (!existing) {
    const script = document.createElement("script");
    script.src = src;
    script.async = true;
    document.head.appendChild(script);
  }
});
</script>

<template>
  <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>
</template>

Copy the snippet from your dashboard so data-public-key and data-endpoint are already correct — don’t forget to replace YOUR_PUBLIC_KEY if you’re using this example.

Step 3

Use the Component in Your App

Import the component wherever you need a contact form:

<template>
  <div class="page">
    <h1>Contact Us</h1>
    <Web2PhoneForm />
  </div>
</template>

<script setup>
import Web2PhoneForm from "@/components/Web2PhoneForm.vue";
</script>

As long as the data attributes and embed.js are present on the page, Web2Phone will intercept the submit, send the request, and write a success/error message into the data-w2p-output element.

Next Steps

Style the form with your usual CSS / Tailwind / UI kit — Web2Phone only handles delivery. If you hit errors, the most common issue is Allowed Domains formatting.

Troubleshooting Create Your Free Account