Docs • Developer Guide

Using Web2Phone with React

Add a Web2Phone-powered contact form to any React app using the standard embed snippet and a small hook to load the script once.

No backend routes, no API keys in your frontend, and no server code required.

Start Free Jump to Code
Step 1

Create Your Form & Set Allowed Domains

  1. Create a form in the Web2Phone dashboard.
  2. Add your fields (name, email, message, etc.).
  3. In Allowed Domains, enter your app’s hostname:
    • example.com
    • www.example.com
    • myapp.vercel.app
    • localhost (local development)
  4. Save the form and copy the embed snippet.
⚠️

Allowed Domains rules

  • ✅ Enter the hostname only (no https://)
  • ✅ example.com and www.example.com are treated as equivalent
  • ❌ No paths like /contact
  • ❌ No wildcards like *.example.com
Step 2

Create a React Form Component

Load embed.js once and render a normal HTML form with the required data-* attributes. 

import { useEffect } from "react";

const EMBED_SRC = "https://web2phone.co.uk/static/formsapp/js/embed.js";
const EMBED_ID = "web2phone-embed-js";

export default function Web2PhoneForm() {
  useEffect(() => {
    if (!document.getElementById(EMBED_ID)) {
      const script = document.createElement("script");
      script.id = EMBED_ID;
      script.src = EMBED_SRC;
      script.async = true;
      document.head.appendChild(script);
    }
  }, []);

  return (
    <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>
  );
}

Replace YOUR_PUBLIC_KEY with the value from your Web2Phone dashboard.

Step 3

Use the Component in Your App

import Web2PhoneForm from "./Web2PhoneForm";

function ContactPage() {
  return (
    <div>
      <h1>Contact Us</h1>
      <Web2PhoneForm />
    </div>
  );
}

export default ContactPage;

Web2Phone intercepts the submit, posts the data to its API, and writes feedback to the data-w2p-output element.

Next steps

Style the form using your normal React CSS, Tailwind, or UI framework. Web2Phone doesn’t impose any styling.

Troubleshooting Create Free Account