React

Add API and Hosted forms to React

Build your own React form and POST to an Endpoint form, or embed a published Hosted form with the SurveyOwl widget.

Start freeShow me the code
  • Free plan
  • No plugin to install
  • Set up in minutes
How it works

React in three steps.

  1. 1

    Choose API or Hosted

    Create an Endpoint form for fields you build in React. Create or start from a template for a Hosted form you want to publish and embed.

  2. 2

    Connect the right React example

    For an Endpoint form, set the form action to its submit URL and use method POST. For a Hosted form, publish it and replace the form ID in the iframe URL; the widget loads the embed.

  3. 3

    Send a test response

    Submit from the finished page and check Submissions. A plain Endpoint form navigates to a confirmation page; a Hosted form displays its own completion screen.

The code

Choose your React setup.

Use your own fields, or embed a form you built. Replace the placeholder and you’re live.

Endpoint form

Keep your own React form.

Set action to your Endpoint form endpoint and give each input a name. The browser sends the form and opens a confirmation page. Replace YOUR_FORM_PUBLIC_KEY with the Public Key from the General tab.

ContactForm.jsx
export default function ApiContactForm() {
  return (
    <form action="https://api.surveyowl.co/v1/submit/YOUR_FORM_PUBLIC_KEY" method="POST">
      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" required />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required />
      <button type="submit">Send message</button>
    </form>
  );
}
Choose Endpoint form →
Hosted form

Embed the form you publish.

Build and publish a Hosted form, then replace YOUR_FORM_ID with the ID at the end of its Share URL. The widget loads the iframe and keeps its height in sync.

ContactForm.jsxScroll for full example
import { useEffect } from 'react';

const scriptUrl = 'https://surveyowl.co/embed/embed.js';

export default function HostedContactForm() {
  useEffect(() => {
    const load = () => window.SurveyOwl?.loadEmbeds?.();
    if (window.SurveyOwl?.loadEmbeds) {
      load();
      return;
    }

    let script = document.querySelector('script[src="' + scriptUrl + '"]');
    if (!script) {
      script = document.createElement('script');
      script.src = scriptUrl;
      script.async = true;
      document.body.appendChild(script);
    }
    script.addEventListener('load', load);
    return () => script.removeEventListener('load', load);
  }, []);

  return (
    <iframe
      data-surveyowl-src="https://surveyowl.co/forms/YOUR_FORM_ID"
      title="Contact form"
      loading="lazy"
      width="100%"
      height="600"
      style={{ border: 0, maxWidth: '100%', borderRadius: 8 }}
    />
  );
}
Explore a Hosted template →
Great for

What people build with it.

A custom contact or feedback form inside an existing React app.

A published survey embedded in a React page.

An intake form that saves responses without building a submission server.

FAQ

React forms, answered.

Create an Endpoint form for fields you build in React. Create or start from a template for a Hosted form you want to publish and embed. Set the form action to its submit URL and method to POST. The browser sends named inputs and opens a confirmation page.

Publish a Hosted form, copy its Share URL, and use its form ID in the Hosted example. The SurveyOwl embed script loads and resizes the iframe.

Use an Endpoint form when your React component owns the fields. Use a Hosted form when you want the SurveyOwl form builder, published page, and embed.

Other platforms

Same form, anywhere else.

HTMLHTMLNext.jsNext.jsVueVueNuxtNuxtAstroAstroSvelteSvelteAngularAngularWordPressWordPressWebflowWebflowWixWixShopifyShopifySquarespaceSquarespaceFramerFramer
All platforms