React

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.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

How to Add Active Class in Map Items in React Js

In this quick tutorial, we will show you how to quite easily add the active…

2 days ago

How to Create and Use Redux Store in React Js

In this tutorial, we will learn how to create a Redux Store in React application.…

5 days ago

How to Build Dynamic Load More Feature in React Js

This detailed guide will cover how to create the Load More button and display data…

1 week ago

How to Integrate Redux Persist to React Redux Store

In this tutorial, we will step by step learn how to configure redux persist in…

2 weeks ago

React Redux Save Data in Local Storage with Persist Tutorial

In this comprehensive tutorial, we will learn how to persist redux store's states in React…

2 weeks ago

React Js Tailwind CSS Add Light and Dark Mode Toggler Tutorial

In this guide, we are going to learn how to add dark mode and light…

2 weeks ago