How to Build An Effective Contact Form in React.

Introduction

This topic covers the entire process of creating a form in a React application, including project setup, form creation, styling, handling form submission, and the use of the React state. It is a comprehensive guide that can help web developers and React enthusiasts create a functional and user-friendly contact form for their websites or applications.

A contact form serves as a direct line of communication between your website visitors, you, or your organization.

In this article, I will take you step by step on how to create a contact form in React.

Prerequisite:

• Knowledge of HTML, CSS, JavaScript, and React.

• Make sure you have Node.js installed on your computer.

Creating your project

First, you need to open the command line to use create-react-app. We will create our project by using npx create-react-app with the name of our project.

npx create-react-app contact-form

Then enter your project directory

cd contact-form

Creating our form

return(
        <div className="contact">
            <h2>Contact Me</h2>
            <form onSubmit={handleSubmit} className="form">  
                <input type="text" name="name" placeholder="Name" id="name" required
                value={name}
                onChange={(e) => {
                setName(e.target.value);
                }}
                />
                <input type="email" name="email" placeholder="Email" id="email" required
                value={email}
                onChange={(e) => {
                setEmail(e.target.value);
                }}
                />

                <input type="text" name="subject" placeholder="Subject" id="subject" required
                    value={subject}
                    onChange={(e) => {
                    setSubject(e.target.value);
                    }}/>

                <textarea placeholder="Message" required
                value={message}
                onChange={(e) => {
                setMessage(e.target.value);
                }}
                />
                <div>
                    <button className="button">Send</button>
                </div>

            </form> 
        </div>
)

Let’s add some styling to beautify our form

.contact {
  text-align: center;
  margin-top: 2rem;
}

.form {
  display: inline-block;
  text-align: left;
  padding: 1rem;
}

.form input{
  display: block;
  width: 400px;
  height: 30px;
  margin-bottom: 2rem;
}

.form textarea{
  width: 400px;
  height: 120px;
}

.button{
  background-color: black;
  color: white;
  width: 400px;
  margin-top: 1rem;
  height: 30px;
}

Now, let's view our form in our browser. We can do that by running “npm start” in our terminal.

npm start

Your web browser will automatically launch and load the contact form at the following address: https//:localhost:3000

Handling Form Submission

We can connect the form input to the state by setting the “value” attribute and on the change event handler to update the state when the user types into the input field.

import React, {useState}  from 'react';

const ContactForm = () => {
    const [name, setName] = useState();
    const [email, setEmail] = useState();
    const [subject, setSubject] = useState();
    const [message, setMessage] = useState();

Add an event handler "onSubmit" to your form to handle the form submission.

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

    console.log('Name:', name);
    console.log('Email:', email);
    console.log('Subject:', subject);
    console.log('Message:', message);

    setName("");
    setEmail("");
    setSubject("");
    setMessage("");
};

NOTE: The lines of code setName(“ ”), setEmail(“ “), setSubject(“ “), and setMessage(“ ”) functions are used to reset or clear the values of (email, name, subject, message) to empty strings after submission.

Full Code here:

import React, {useState}  from 'react';

const ContactForm = () => {
    const [name, setName] = useState();
    const [email, setEmail] = useState();
    const [subject, setSubject] = useState();
    const [message, setMessage] = useState();

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

    console.log('Name:', name);
    console.log('Email:', email);
    console.log('Subject:', subject);
    console.log('Message:', message);

    setName("");
    setEmail("");
    setSubject("");
    setMessage("");
};

    return(
        <div className="contact">
            <h2>Contact Me</h2>
            <form onSubmit={handleSubmit} className="form">  
                <input type="text" name="name" placeholder="Name" id="name" required
                value={name}
                onChange={(e) => {
                setName(e.target.value);
                }}
                />
                <input type="email" name="email" placeholder="Email" id="email" required
                value={email}
                onChange={(e) => {
                setEmail(e.target.value);
                }}
                />

                <input type="text" name="subject" placeholder="Subject" id="subject" required
                    value={subject}
                    onChange={(e) => {
                    setSubject(e.target.value);
                    }}/>

                <textarea placeholder="Message" required
                value={message}
                onChange={(e) => {
                setMessage(e.target.value);
                }}
                />
                <div>
                    <button className="button">Send</button>
                </div>

            </form> 
        </div>
)
}

export default ContactForm;

Conclusion

We have now come to the end of our tutorial. In summary, building a contact form in React is a valuable skill for any web developer. It is a way of communicating with the website’s users. By following the steps outlined in this guide, you can confidently create and customize contact forms that meet your needs.

Happy coding!