Contact Form in React Js using TailwindCSS

Introduction

Web application users have the chance to contact the developer or team of the web app by using a contact form. Typically, “contact us” pages employ email as the primary form of communication. The necessary elements, including name, email id, and message, must be filled out by the user. The information is delivered to your email address. Today, we’ll have a look at how this procedure works and see how Reactjs may be used to construct a contact form.

Getting Started

In this guide, we will concentrate on the front-end functionality of the contact form where the user inputs information. The backend is responsible for sending a form submission email and confirmation email to the user. You need a pre-existing React application to include your contact component. If you do not have one you can create one using the create-react-app package

npm install create-react-app

We are going to use TailwindCSS to custom CSS code in the contact form too. Our example application will include a regular option with three fields: name, email address, and message. Subsequently, there will be a button to submit this data.

Code Example

//contact.jsx
import React, { useState } from "react";

const FORM_ENDPOINT = "";

const ContactForm = () => {
  const [submitted, setSubmitted] = useState(false);
  const handleSubmit = () => {
    setTimeout(() => {
      setSubmitted(true);
    }, 100);
  };

  if (submitted) {
    return (
      <>
        <div className="text-2xl">Thank you!</div>
        <div className="text-md">We'll be in touch soon.</div>
      </>
    );
  }

  return (
    <div
      className="h-screen flex flex-col 
      items-center justify-center"
    >
      <div className="mb-3 pt-0">
        <h3 className="text-center text-gray-400 text-s">Contact Us</h3>
      </div>
      <form
        className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
        action={FORM_ENDPOINT}
        onSubmit={handleSubmit}
        method="POST"
        target="_blank"
      >
        <div className="mb-3 pt-0">
          <input
            type="text"
            placeholder="Your name"
            name="name"
            className="px-3 py-3 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full"
            required
          />
        </div>
        <div className="mb-3 pt-0">
          <input
            type="email"
            placeholder="Email"
            name="email"
            className="px-3 py-3 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full"
            required
          />
        </div>
        <div className="mb-3 pt-0">
          <textarea
            placeholder="Your message"
            name="message"
            className="px-3 py-3 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border-0 shadow outline-none focus:outline-none focus:ring w-full"
            required
          />
        </div>
        <div className="mb-3 pt-0">
          <button
            className="bg-blue-500 text-white active:bg-blue-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
            type="submit"
          >
            Send a message
          </button>
        </div>
      </form>
    </div>
  );
};

export default ContactForm;

//App.js
//Includes the tailwind.css stylesheet link for our css customizations
import { useEffect } from "react";
import ContactForm from "./contact";

function App() {
  useEffect(() => {
    if (document) {
      const stylesheet = document.createElement("link");
      stylesheet.rel = "stylesheet";
      stylesheet.href =
        "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css";

      document.head.appendChild(stylesheet);
    }
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <div className="py-6">
          <ContactForm />
        </div>
      </header>
    </div>
  );
}

export default App;

In the contact form code above:

1. We import useState from React, as we will need to use it for the input fields. We customize the Form Attribute and added the tailwind css properties to beautify it.
2. Then we assign the first value useState to the input as false and add an handleSubmit event listener for updating the state. Make sure you only pass the value of the input to the set function that you can reach.
3. We return a message informing us the message has been sent. This happens after we added a onClick callback for the button in the code example. This will call the submit function that we’ve defined in our return statement.

Import the contact.jsx file to the main App.js file. Then you can re-run your application.

It proceeds to show the contact form which in submission shows the static content of a thank you note.

Live Demo