React is an easy to use JavaScript framework that lets us create front end apps.
In this article, we’ll look at how to create a contact form with React and JavaScript.
Create the Project
We can create the React project with Create React App.
To install it, we run:
npx create-react-app contact-form
with NPM to create our React project.
Create the Contact Form App
To create the contact form app, we write:
import React, { useState } from "react";
export default function App() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const submit = (e) => {
e.preventDefault();
const formValid =
name.length > 0 &&
/(.+)@(.+){2,}.(.+){2,}/.test(email) &&
message.length > 0;
if (!formValid) {
return;
}
if (!localStorage.getItem("messages")) {
localStorage.setItem("messages", JSON.stringify([]));
}
const messages = JSON.parse(localStorage.getItem("messages"));
messages.push({
name,
email,
message
});
localStorage.setItem("messages", JSON.stringify(messages));
};
const onReset = () => {
setName("");
setEmail("");
setMessage("");
};
return (
<div className="App">
<form onSubmit={submit} onReset={onReset}>
<div>
<label>name</label>
<input value={name} onChange={(e) => setName(e.target.value)} />
</div>
<div>
<label>email</label>
<input
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<label>message</label>
<textarea
value={message}
onChange={(e) => setMessage(e.target.value)}
></textarea>
</div>
<button type="submit">submit</button>
<button type="reset">reset</button>
</form>
</div>
);
}
We have the name , email , and message states created with the useState hook.
Then we create the submit function to let users submit the contact form.
In it, we call e.preventDefault() to let us do client-side form submission.
Then we check if the values entered are valid.
And then we check is a local storage entry with key messages exists.
If it doesn’t exist, then we add a new entry with the message key.
Then we add a new entry to the JSON array with the key message into local storage.
We parse the JSON array string with JSON.parse .
Then we call push on the parsed array.
And then we call setItem to save the updated array.
Next, we define the onReset function to set all the state values to empty strings.
Then we add a form with inputs.
value prop has the inputted value from the state.
And the onChange prop of reach input is set to a function that gets the inputted value and set them as the value of various states.
The onSubmit prop is triggered when we click the submit button.
onReset is triggered when we click the reset button.
Conclusion
We can create a contact form easily with React and JavaScript.
