How to Build A Simple Contact Form in React Js App

In this tutorial, we will learn how to create a simple static contact form component in the React js application using Bootstrap module from scratch.

To build the contact form component, we will use the simple react hook and show you how to get the contact form data provided by users.

This step-by-step guide will demonstrate how to create a simple yet beautiful contact form in React using the bootstrap form control component. Building a contact form in React is not that difficult; it may be if you are a newbie.

A contact us page is an essential page that enables the communication between your site and the users. Ideally, a user fills the required fields such as name, email, and message.

We will add these fields to our contact form and get the information using the React useState hook.

React Js Contact Form Component using useState Hook Example

• Step 1: Install React App
• Step 2: Add Bootstrap Library
• Step 3: Create Component File
• Step 4: Create Contact Form Component
• Step 5: Add Component in App.js
• Step 6: View App in Browser

Install React App

If you are willing to build a brand new project, you will have to install the create-react-app package in your system.

Head over to the command-line tool and invoke the following command:

npm install create-react-app --global

You are now ready to install a new React app; use the suggested command:

npx create-react-app react-contact-form

Then, enter into the project’s root:

cd react-contact-form

Add Bootstrap Library

Bootstrap helps in building the UI component in very less time, execute the command to add the bootstrap in React.

npm install bootstrap

Open the App.js file, import the bootstrap module’s CSS path within the file.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

Create Component File

In the src/ folder, create another folder name it /components then create ContactForm.js file inside this folder.

In the subsequent step, we will be writing down the contact form code in this file.

import React from 'react'
function ContactForm() {
  return (
    <div>
        
    </div>
  )
}
export default ContactForm

Create Contact Form Component

To create the contact form, in the contact form component you have to open the ContactForm.js file and add the following code into the file.

import React from 'react'
const ContactForm = () => {
  const [formStatus, setFormStatus] = React.useState('Send')
  const onSubmit = (e) => {
    e.preventDefault()
    setFormStatus('Submitting...')
    const { name, email, message } = e.target.elements
    let conFom = {
      name: name.value,
      email: email.value,
      message: message.value,
    }
    console.log(conFom)
  }
  return (
    <div className="container mt-5">
      <h2 className="mb-3">React Contact Form Component Example</h2>
      <form onSubmit={onSubmit}>
        <div className="mb-3">
          <label className="form-label" htmlFor="name">
            Name
          </label>
          <input className="form-control" type="text" id="name" required />
        </div>
        <div className="mb-3">
          <label className="form-label" htmlFor="email">
            Email
          </label>
          <input className="form-control" type="email" id="email" required />
        </div>
        <div className="mb-3">
          <label className="form-label" htmlFor="message">
            Message
          </label>
          <textarea className="form-control" id="message" required />
        </div>
        <button className="btn btn-danger" type="submit">
          {formStatus}
        </button>
      </form>
    </div>
  )
}
export default ContactForm

Add Component in App.js

In this step, we are going to embed contact form contact in the react app.

Head over to the App.js file that you can find in your src folder, then import the component and define the component inside the App() function.

import './App.css'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import ContactForm from './components/ContactForm'
function App() {
  return (
    <div className="App">
      <ContactForm />
    </div>
  )
}
export default App

View App in Browser

The contact form component in React app is almost developed; you can now run the react server:

npm start

If you are testing the app locally, here is the url that will open the app on the browser:

http://localhost:3000

Conclusion

We believe you loved this simple post in which we created a static contact form in React js application using React hooks.

We also learned how to use bootstrap to spruce up the contact form looks in React.