Using Web2Phone with React

This guide shows you how to add a Web2Phone-powered contact form to any React app. You’ll use the standard embed snippet and a small hook to load the script.

1. Create Your Form & Allowed Domain

Log in to your Web2Phone dashboard.
Go to Forms → Create Form.
Add your fields (name, email, message, etc.).
In Allowed Domains, enter only your React app’s hostname, e.g.:
- example.com (for a live domain)
- myapp.vercel.app (for a Vercel deploy)
- localhost or 127.0.0.1 for local testing
Save the form and copy the embed snippet (public key + endpoint).

2. Create a React Component for Your Form

In your React project, create a component such as Web2PhoneForm.jsx and paste the JSX version of the snippet:

import { useEffect } from "react";

export default function Web2PhoneForm() {
  useEffect(() => {
    // Avoid adding the script multiple times
    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);
    }
  }, []);

  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="you@example.com" required />
      <textarea name="message" placeholder="Message" required /></textarea>
      <button type="submit">Send</button>
      <p data-w2p-output></p>
    </form>
  );
}

Replace YOUR_PUBLIC_KEY and the endpoint URL with the values from your own embed snippet.

3. Use the Form Component in Your App

Import the component wherever you need a contact form:

import Web2PhoneForm from "./Web2PhoneForm";

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

export default ContactPage;

That’s it — Web2Phone will intercept the submit, send the request, and show a success/error message inside the data-w2p-output element.

Next Steps

You can style the form using your usual React CSS / Tailwind / UI framework — Web2Phone only cares about the field names and data attributes.

Troubleshooting Create Your Free Account