React Js Create Static Contact Form with Bootstrap Tutorial

In this guide, you will understand how to easily build a static contact form in the React js application with the help of the Bootstrap library.

Contact as the name suggests, meeting, talking to or writing to somebody else. Theoretically, a contact form is a page in web applications that lets users communicate with the site owner.

A contact page may have name, email, address or message form fields. You can see the contact page on almost every product or company website. By using the contact form, you can raise any concerns or ask any questions to site owners.

The contact form is designed using simple HTML attributes and CSS attributes. However, in this post, we will use the bootstrap form components for developing a contact form in React js app.

How to Build Contact Form in React Js with useState Hook

  • Step 1: Download React Project
  • Step 2: Install Bootstrap Package
  • Step 3: Create Contact Component
  • Step 4: Develop Contact Form
  • Step 5: Register Global Component
  • Step 6: Start React App

Download React Project

We assume you have already installed node and npm in your system, go ahead and execute the command to download a new react app.

npx create-react-app react-demo

To start the development step inside the project folder:

cd react-demo

Install Bootstrap Package

Bootstrap library will be helping us design the custom contact form, ensure that you executed the provided command.

npm install bootstrap

Create Contact Component

We can create a new components folder, and also create the Contact.js file inside the suggested folder.

import React from 'react'

function Contact() {
  return (
    <div>Contact</div>
  )
}

export default Contact

Develop Contact Form

Head over to Contact.js file, define the useState and the form state in the function component.

Use the bootstrap custom class to structure the contact form in react.

Bind the contact form to the onSubmit event handler; this event handler will invoke when the user clicks on the submit button.

import React, { useState } from 'react'

const Contact = () => {
  const [form, setForm] = useState('Submit')

  const onFormSubmit = (e) => {
    e.preventDefault()
    setForm('Submitting ...')
    const { name, email, message } = e.target.elements
    let contactForm = {
      name: name.value,
      email: email.value,
      message: message.value,
    }

    console.log(contactForm)
  }
  return (
    <div className="container">
      <h2 className="mb-2">React Contact Form Component Example</h2>
      <form onSubmit={onFormSubmit}>
        <div className="mb-2">
          <label className="form-label" htmlFor="name">
            Name
          </label>
          <input className="form-control" type="text" id="name" required />
        </div>
        <div className="mb-2">
          <label className="form-label" htmlFor="email">
            Email
          </label>
          <input className="form-control" type="email" id="email" required />
        </div>
        <div className="mb-2">
          <label className="form-label" htmlFor="message">
            Message
          </label>
          <textarea className="form-control" id="message" required />
        </div>
        <div className="d-grid">
          <button className="btn btn-primary" type="submit">
            {form}
          </button>
        </div>
      </form>
    </div>
  )
}

export default Contact

Register Global Component

The react app is managed by a central component you can find that component in App.js file. You require to register the contact form component in this file.

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import Contact from './components/Contact'

function App() {
  return (
    <div>
      <Contact />
    </div>
  )
}

export default App

Start React App

You are now ready to run the react app, therefore evoke the suggested command.

npm start

We can check the contact form using the following url.

http://localhost:3000

React Js Create Static Contact Form with Bootstrap Tutorial

Summary

In this post, we have explained how to create a contact form component in React js environment. We learned how to use the bootstrap library to develop a contact form in react swiftly.

Not just that, we have also explored the react hook; we learned how to use the useState hook to manage the contact form state.