Every website have a contact us form. A contact us form is used to contact to website owner or team. Contact Us page is use the email or call method for communication. User need to fill the form like name, mobile number, email, subject, message etc. In this post you will learn how to implement contact us form with React.

Building the contact form

Create the React app
install the create-react-app package with 

npm install create-react-app

Create the contact form
I have created a ContactForm Component and used Bootstrap 5 to design Contact page with name, email, mobile number, subject and message field.

<form>

<div className='form-group'>

    <label>Name</label>

    <input type="text" name="name" className='form-control' onChange={formHandler} value={data.name} placeholder='Enter Name'/>

</div>

<div className='form-group'>

    <label>Mobile Number</label>

    <input type="text" name="mobno" className='form-control' onChange={formHandler}  value={data.mobno} placeholder='Enter Mobile Number'/>

</div>

<div className='form-group'>

    <label>Subject</label>

    <input type="text" name="subject" className='form-control' onChange={formHandler}  value={data.subject} placeholder='Enter Subject'/>

</div>

<div className='form-group'>

    <label>Message</label>

    <textarea type="text" name="message" className='form-control' onChange={formHandler}  value={data.message} placeholder='Write Your Message...'>

    </textarea>

</div>

<div className='form-group mt-3 text-center'>

    <input type="button" value="Submit" className='btn btn-success btn-sm' onClick={SubmitHandler} />

</div>

</form>

I will use useState hooks to store the form data.

import {useState} from 'react'

const [data,setData]=useState({

        name:'',

        mobno:'',

        subject:'',

        message:''

    });

when user change the input field we trigger an event onChange Handler and handle with formHandler Function.

 const formHandler = (e)=>{

        const name=e.target.name;

        const value=e.target.value;

        setData({...data,[name]:value})

    }

and when user click on submit button. we handle it with SubmitHandler function. Here we can send the data to backend to process and according to response will show alert message.

Full Code 

import {useState} from 'react'

const ContactForm = () => {

    const [data,setData]=useState({

        name:'',

        mobno:'',

        subject:'',

        message:''

    });

    const formHandler = (e)=>{

        const name=e.target.name;

        const value=e.target.value;

        setData({...data,[name]:value})

    }

    const SubmitHandler = () =>{

       console.log(data);

       //process with backend

    }

  return (

    <div className='container'>

        <div className='row py-4'>

            <div className='col-md-6'>

                <form>

                    <div className='form-group'>

                        <label>Name</label>

                        <input type="text" name="name" className='form-control' onChange={formHandler} value={data.name} placeholder='Enter Name'/>

                    </div>

                    <div className='form-group'>

                        <label>Mobile Number</label>

                        <input type="text" name="mobno" className='form-control' onChange={formHandler}  value={data.mobno} placeholder='Enter Mobile Number'/>

                    </div>

                    <div className='form-group'>

                        <label>Subject</label>

                        <input type="text" name="subject" className='form-control' onChange={formHandler}  value={data.subject} placeholder='Enter Subject'/>

                    </div>

                    <div className='form-group'>

                        <label>Message</label>

                        <textarea type="text" name="message" className='form-control' onChange={formHandler}  value={data.message} placeholder='Write Your Message...'>

                        </textarea>

                    </div>

                    <div className='form-group mt-3 text-center'>

                        <input type="button" value="Submit" className='btn btn-success btn-sm' onClick={SubmitHandler} />

                    </div>

                    </form>

            </div>

        </div>

    </div>

  )

}

export default ContactForm