Day 91 of React: Building a Contact Form for Our TiruRestaurant Website

In this tutorial, we will be creating a contact form for the contact page of our tiruRestaurant website using React. This will allow users to easily get in touch with us and provide feedback or ask questions about our restaurant.

Step 1: Set Up Your React Application
Before we can start working on our contact form, we need to set up a new React application. You can do this by running the following command in your terminal:

npx create-react-app tiruRestaurant

This will create a new React application called tiruRestaurant in a directory with the same name.

Step 2: Create the Contact Page Component
Next, we need to create a new component for our contact page. Inside the src folder of your React application, create a new folder called components. Inside this folder, create a new file called ContactPage.js. In this file, we will define the ContactPage component:

import React from 'react';

const ContactPage = () => {
    return (
        <div>
            <h1>Contact Us</h1>
            // Add contact form here
        </div>
    );
}

export default ContactPage;

Step 3: Add the Contact Form to the Contact Page
Next, we need to add the actual contact form to our ContactPage component. In the same ContactPage.js file, add the following code inside the // Add contact form here comment:

<form>
    <label htmlFor="name">Name:</label>
    <input type="text" id="name" name="name" />

    <label htmlFor="email">Email:</label>
    <input type="email" id="email" name="email" />

    <label htmlFor="message">Message:</label>
    <textarea id="message" name="message" rows="4" />

    <button type="submit">Submit</button>
</form>

Step 4: Handle Form Submission
Now that we have our contact form set up, we need to handle form submission. We will create a new state to store the values entered by the user in the input fields, and add an onSubmit event handler to the form that will log the values to the console for now.

In your ContactPage.js file, add the following code inside the ContactPage component:

const [formData, setFormData] = React.useState({
    name: '',
    email: '',
    message: ''
});

const handleChange = (e) => {
    setFormData({
        ...formData,
        [e.target.name]: e.target.value
    });
};

const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
};

Update the form element in your ContactPage.js file to include the handleChange and handleSubmit functions:

<form onSubmit={handleSubmit}>
    <label htmlFor="name">Name:</label>
    <input type="text" id="name" name="name" value={formData.name} onChange={handleChange} />

    <label htmlFor="email">Email:</label>
    <input type="email" id="email" name="email" value={formData.email} onChange={handleChange} />

    <label htmlFor="message">Message:</label>
    <textarea id="message" name="message" rows="4" value={formData.message} onChange={handleChange} />

    <button type="submit">Submit</button>
</form>

Step 5: Styling the Contact Form
To make our contact form look more appealing, we can add some CSS styling to it. Create a new file called ContactPage.css inside the components folder, and add the following code:

form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input,
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

Step 6: Import the CSS File
Finally, import the ContactPage.css file in your ContactPage.js file to apply the styles to our contact form:

import './ContactPage.css';

And that’s it! You have now successfully created a contact form for the contact page of our tiruRestaurant website using React. You can further customize the form and add more functionality as needed.