NextJS & React
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.
Prerequisites
Before you begin, make sure you have:
- A Basestack Forms account
- A React or Next.js project with a form component
This guide works with both React and Next.js applications. The implementation is the same for both frameworks.
Quick Setup Guide
Follow these steps to integrate Basestack Forms with your React or Next.js application:
Choose your HTTP client
You can use any HTTP client to send form data from your React component. Common options include:
- Fetch API - Built into browsers, no additional dependencies
- Axios - Popular library with interceptors and better error handling
- Any other HTTP client that supports POST requests
Include mode=rest in your endpoint URL query string to receive JSON responses. This allows you to handle success and error states in your component.
For more advanced form handling, consider using libraries like React Hook Form or Formik. These can simplify form state management and validation.
Implement form submission handler
Copy the example component below into your React project. The example demonstrates:
- Form state management using React hooks
- Form submission handling with Fetch API
- Basic error handling and success feedback
Customize the form fields and submission logic to match your requirements.
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-api.basestack.co/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;