NextJS & React Integration

React is a JavaScript library for building user interfaces, allowing developers to create interactive, dynamic web applications with reusable components. Next.js is a React framework that enables server-side rendering, static site generation, and simplified routing for building fast, scalable web applications.

To get started, you’ll need the following:

A Basestack Forms Account
A React or Next.js project with a Form component

Use this on your React Project to send form data to your endpoint.

Send data using the Fetch API, Axios or Any HTTP Client and ensure the mode on the query string is set to mode=rest for retrieving the response in JSON format.

Copy and paste this into your React component.

Feel free to use the code below to send a test submission.

contact.js

import React, { useState } from "react";
 
const FormComponent = () => {
  // You can also use rect-hook-form or formik for form handling
  // check out the docs for more info https://react-hook-form.com/
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
 
  const onHandleSubmit = (e) => {
    e.preventDefault();
    e.stopPropagation();
 
    // You can also use axios or any other library to make the request
    // You can also use async await to make the request
    fetch("https://forms.basestack.co/api/v1/s/[KEY]?mode=rest", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ name, email, message }),
    })
      .then((res) => res.json())
      .then((data) => {
        if (data.code === 200) {
          console.log("Form submitted successfully");
        }
      })
      .catch((error) => {
        console.log("Error submitting form", error);
      });
  };
 
  return (
    <form onSubmit={(e) => onHandleSubmit(e)}>
      <div>
        <label htmlFor="name">Name:</label>
        {/*  <!-- name each of your inputs as you wish --> */}
        <input
          type="text"
          id="name"
          name="name"
          required
          autoComplete="name"
          aria-label="Name"
          placeholder="Enter your name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
 
      <div>
        <label htmlFor="email">Email:</label>
        <input
          type="email"
          id="email"
          name="email"
          required
          autoComplete="email"
          aria-label="Email"
          placeholder="Enter your email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
      </div>
 
      <div>
        <label htmlFor="message">Message:</label>
        <textarea
          id="message"
          name="message"
          required
          aria-label="Message"
          placeholder="Enter your message"
          value={message}
          onChange={(e) => setMessage(e.target.value)}
        ></textarea>
      </div>
 
      {/*  <!-- your other form fields go here --> */}
 
      <button type="submit">Submit</button>
    </form>
  );
};
 
export default FormComponent;

JavaScript Vue