Using Web2Phone with Vue

This guide shows you how to add a Web2Phone contact form to a Vue app using the standard embed snippet and a small script loader.

1. Create Your Form & Allowed Domain

  1. Create a form in the Web2Phone dashboard.
  2. Add your Vue app’s hostname under Allowed Domains, e.g.:
    • example.com
    • myapp.vercel.app
    • localhost for local dev
  3. Copy your form’s embed snippet.

2. Create a Vue Component

In a Vue 3 project, create a component such as Web2PhoneForm.vue: 

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

onMounted(() => {
  const existing = document.querySelector(
    'script[src="https://web2phone.co.uk/static/formsapp/js/embed.js"]'
  );
  if (!existing) {
    const script = document.createElement("script");
    script.src = "https://web2phone.co.uk/static/formsapp/js/embed.js";
    script.async = true;
    document.body.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="you@example.com" required />
    <textarea name="message" placeholder="Message" required></textarea>
    <button type="submit">Send</button>
    <p data-w2p-output></p>
  </form>
</template>

Replace YOUR_PUBLIC_KEY and the endpoint with your own values from the Web2Phone dashboard.

3. Use the Component in Your App

Import and register the component wherever you need a 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 script URL are present, Web2Phone will handle the submission for you.

Next Steps

Style the form with your usual Tailwind / CSS / UI kit — Web2Phone is only responsible for delivery.

Troubleshooting Create Your Free Account