How to submit React forms to Notion

React is an open-source JavaScript library used for building user interfaces, focusing on component-based development. It efficiently renders and updates UI components, allowing developers to create interactive, dynamic web applications.

You can easily connect forms built with React to Notion using Notion Monkey.

Once you create a form in the Notion Monkey dashboard, Notion Monkey will provide a form url or "form action" where you can start posting data. This unique action is all you need to post data into the Notion DB.

Then in your React form, post your data to the Notion Monkey endpoint as in the following example:

import React, { useState } from 'react';

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

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

  const handleSubmit = async (e) => {
    e.preventDefault();

    const response = await fetch('https://api.notionmonkey.io/form/vB1pUYCBvUqnSarEvAgsd6', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });

    if (response.ok) {
      // Handle success (optional)
      console.log('Form submitted successfully!');
      setFormData(initialFormData); // Reset form after successful submission
    } else {
      // Handle error
      console.error('Form submission failed:', response.status);
    }
  };

  return (
    <div>
      <h2>Contact Form</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="name">Name:</label>
          <input
            type="text"
            id="name"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
          />
        </div>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            required
          />
        </div>
        <div>
          <label htmlFor="message">Message:</label>
          <textarea
            id="message"
            name="message"
            value={formData.message}
            onChange={handleChange}
            required
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default FormComponent;

Once you submit this form, the data will appear in the linked db like this:

Notion Monkey supports:

• React Hook Form
• Formik
• React Final Form

And many other form libraries for React. Notion Monkey can run in React and React Native.