Send email from your React form without a backend

In this article, we will show you how to use Getform with React.js to create a basic contact form and submit the data to Getform's servers.

Getform Dashboard

Form email notification

What is Getform?

Getform is a form backend service that allows you to easily collect form submissions without having to set up your own server or database. Getform provides a simple endpoint for your form to submit data to, and then stores that data for you in a secure way. You can then view and manage your form submissions through Getform's web interface or through integrations with other services.

Get Started

Create account on Getform
Verify your email
Click + Create... button on side bar

Create your form endpoint

Note your endpoint

React.js

The useState hook is used to create stateful logic in function components. In this example, it's used to create an object called formData that holds the values of the input fields:

const [formData, setFormData] = useState({
  name: '',
  surname: '',
  email: '',
  message: ''
});

The setFormData function is used to update the values of the formData object. We'll see it in action later.

Handling Input Changes

The handleInputChange function is called when the user types in an input field. It updates the formData object with the new value:

const handleInputChange = (event) => {
  setFormData({
    ...formData,
    [event.target.name]: event.target.value
  });
};

The [event.target.name] syntax is used to update the key in the formData object that matches the input field's name attribute. The spread syntax is used to copy over the existing values in the formData object.

Handling Form Submission

The handleSubmit function is called when the form is submitted. It sends a POST request to the Getform endpoint with the formData object as the request body.

Once the form is submitted, the handleSubmit function is called. This function prevents the default form submission behavior, and then uses the fetch function to make a POST request to the Getform endpoint URL with the form data as a JSON object in the request body.

If the response from the server is not 200 OK, it logs an error message to the console. Otherwise, it resets the form data to its initial state.

Here's a breakdown of the handleSubmit function:

const handleSubmit = (event) => {
  event.preventDefault(); // prevent default form submission behavior

  // make a POST request to the Getform endpoint with the form data as a JSON object
  fetch('(your-getform-endpoint)', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
  })
    .then(response => {
      if (response.ok && response.status === 200) {
          setFormData({ name: '', surname: '', email: '', message: '' }); // reset the form data to its initial state
          } else {
          console.log("error"); // log an error message to the console if the response is not 200 OK
      }
    })
    .catch(error => {
      console.error("Error:", error); // log an error message to the console if an error occurs
    });
};

And that's it. You've now learned how to use Getform with React to build and submit forms.You can start building powerful web applications that collect and process user data.

Here is the full code of React.js:

import React, { useState } from 'react';

const ContactForm = () => {

    const [formData, setFormData] = useState({
        name: '',
        surname: '',
        email: '',
        message: ''
    });

    const handleInputChange = (event) => {
        setFormData({
            ...formData,
            [event.target.name]: event.target.value
        });
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        fetch('your-getform-endpoint', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
            .then(response => {
                if (response.ok && response.status === 200) {
                    setFormData({ name: '', surname: '', email: '', message: '' });
                    } else {
                    console.log("error");
                }
            })
            .catch(error => {
                console.error("Error:", error);
            });
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label htmlFor="name">Name:</label>
                <input
                    type="text"
                    name="name"
                    value={formData.name}
                    onChange={handleInputChange}
                />
            </div>
            <div>
                <label htmlFor="surname">Surname:</label>
                <input
                    type="text"
                    name="surname"
                    value={formData.surname}
                    onChange={handleInputChange}
                />
            </div>
            <div>
                <label htmlFor="email">Email:</label>
                <input
                    type="email"
                    name="email"
                    value={formData.email}
                    onChange={handleInputChange}
                />
            </div>
            <div>
                <label htmlFor="message">Message:</label>
                <textarea
                    name="message"
                    value={formData.message}
                    onChange={handleInputChange}
                />
            </div>
            <button type="submit">Submit</button>
        </form>
    )
}

export default ContactForm