React

Overview

In this guide, you'll learn how to set up a simple working contact form using the React framework and FormsLite.io. No need to set up an SMTP server or custom backend; it all happens on the front end. Copy and paste the code into your React app, and it will work seamlessly.

Example Code

Here is the sample code for a React contact form using FormsLite.io.

import React from "react";

function App() {
  const [result, setResult] = React.useState("");

  const onSubmit = async (event) => {
    event.preventDefault();
    setResult("Sending...");
    const formData = new FormData(event.target);

    formData.append("access_key", "ACCESS_KEY");

    const response = await fetch("https://api.formslite.io/submission", {
      method: "POST",
      body: formData
    });

    const data = await response.json();

    if (data.success) {
      setResult("Form Submitted Successfully");
      event.target.reset();
    } else {
      console.log("Error", data);
      setResult(data.message);
    }
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input type="text" name="name" required />
        <input type="email" name="email" required />
        <textarea name="message" required></textarea>
        <button type="submit">Submit Form</button>
      </form>
      <span>{result}</span>
    </div>
  );
}

export default App;

Summary

By using this React contact form setup with FormsLite.io, you can easily manage form submissions on the front end without needing a custom backend. Customize the code as needed for your application, and enjoy the seamless integration and functionality it provides.