Contact Form for React.js
Example of a contact form that can be used on React.js projects with FormBold.
Working Contact Form Code for React.js
React is a JavaScript library for building user interfaces. It's easy to use and fast, making it perfect for web and mobile development. Contact Form a React component code example that can be used to create simple contact forms with FormBold API
import { useState } from "react";
export default function Form() {
const [responseMessage, setResponseMessage] = useState("");
async function handleSubmit(event) {
event.preventDefault();
const formData = new FormData(event.target);
const object = Object.fromEntries(formData);
const json = JSON.stringify(object);
const response = await fetch("https://formbold.com/s/unique_form_id", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
body: json,
});
const result = await response.json();
if (response.ok) {
setResponseMessage(result.message);
event.target.reset();
}
setResponseMessage(result.message || "Something went wrong");
setTimeout(() => setResponseMessage(""), 3000);
}
return (
<>
<div className="container">
<div className="form-wrapper">
<form onSubmit={handleSubmit}>
<div>
<input
type="email"
name="email"
id="email"
placeholder="Your Email"
required
/>
</div>
<div>
<input
type="text"
name="subject"
id="subject"
placeholder="Your subject"
required
/>
</div>
<div>
<textarea
name="message"
id="message"
rows="6"
placeholder="Your Message"
required
></textarea>
</div>
<div>
<button type="submit">Submit</button>
</div>
<div>
<p>{responseMessage}</p>
</div>
</form>
</div>
</div>
</>
);
}