All Products

Resources

React Native Integration

React Native Contact Form with
only Frontend Code

Start collecting form submissions from your React Native app with FormSubmit in 2 minutes. Create your form in FormSubmit and
paste your unique URL inside your form. Look at the code examples and detailed tutorial below to get started.

Vs Code


  import { useState } from "react";

  export default function Fetch() {
    const [email, setEmail] = useState("");
    const [message, setMessage] = useState("");

    const [submitted, setSubmitted] = useState(false);
    const [error, setError] = useState("");

    function submit(e) {
      e.preventDefault();

      fetch("https://formsubmit.com/s/XXXXXXX", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({ email, message }),
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.code === 200) {
            setSubmitted(true);
          } else {
            setError(res.message);
          }
        })
        .catch((error) => setError(error));
    }

    return (
      <form onSubmit={submit}>
        {/* Form implementation */}
      </form>
    );
  }

How to Integrate Code

What is React Native?

React Native is a JavaScript framework for building mobile applications using React. It allows you to create native-like mobile experiences for both iOS and Android. FormSubmit works seamlessly with React Native, and this guide will show you how to use it.

FormSubmit Setup with React Native using Fetch

Fetch is a native API, so every React Native app can use it without any installation. The steps are simple. Please make sure that you replace “https://formsubmit.com/s/XXXXXXX” with your own unique endpoint URL.

Vs Code


  import { useState } from "react";

  export default function Fetch() {
    const [email, setEmail] = useState("");
    const [message, setMessage] = useState("");

    const [submitted, setSubmitted] = useState(false);
    const [error, setError] = useState("");

    function submit(e) {
      e.preventDefault();

      fetch("https://formsubmit.com/s/XXXXXXX", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({ email, message }),
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.code === 200) {
            setSubmitted(true);
          } else {
            setError(res.message);
          }
        })
        .catch((error) => setError(error));
    }

    return (
      <form onSubmit={submit}>
        {/* Form implementation */}
      </form>
    );
  }

FormSubmit Setup with React Native using Fetch

Vs Code


  import { useState } from "react";

  export default function Fetch() {
    const [email, setEmail] = useState("");
    const [message, setMessage] = useState("");

    const [submitted, setSubmitted] = useState(false);
    const [error, setError] = useState("");

    function submit(e) {
      e.preventDefault();

      fetch("https://formsubmit.com/s/XXXXXXX", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({ email, message }),
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.code === 200) {
            setSubmitted(true);
          } else {
            setError(res.message);
          }
        })
        .catch((error) => setError(error));
    }

    return (
      <form onSubmit={submit}>
        {/* Form implementation */}
      </form>
    );
  }

FormSubmit Setup with React Native using Fetch

Vs Code


  import { useState } from "react";

  export default function Fetch() {
    const [email, setEmail] = useState("");
    const [message, setMessage] = useState("");

    const [submitted, setSubmitted] = useState(false);
    const [error, setError] = useState("");

    function submit(e) {
      e.preventDefault();

      fetch("https://formsubmit.com/s/XXXXXXX", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        body: JSON.stringify({ email, message }),
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.code === 200) {
            setSubmitted(true);
          } else {
            setError(res.message);
          }
        })
        .catch((error) => setError(error));
    }

    return (
      <form onSubmit={submit}>
        {/* Form implementation */}
      </form>
    );
  }

Setup Forms

Easy setup : 3 Steps to Setup FormSubmit

1.Create a New Form

Display how reliable your service has been over time.

2.Setup Your Form

Show status for each part of your service to pinpoint issues faster.

3.Track & Explore Forms

Create pages in multiple languages to reach all your users effectively.

Create a status page now

USe CAses

Need templates? Say less.

A collection of example HTML forms with code that you can edit live, then download or copy/paste. A minimal form reset css is included that should work with most sites. A minimal form reset css is included that should work with most sites. A minimal form reset css is included that should work with most sites.

Simple Contact Form

Survery Form

Book a Demo Form

News Letter Form

Registration Form & more...

Learn More

Email

SMS

Voice call

Slack

Public API

Webhooks

Discord

Microsoft Teams

Integrations

Effortless Integrations
for Smarter Workflows

Seamlessly connect your workspace with the tools you already use. With webhook support, get instantly notified about new submissions, ensuring you never miss important data while keeping your workflow running smoothly.

Show All Integrations