Contact Us Form Using ReactJS and Tailwind

A Contact Us Form is an integral part of an organization’s website. It helps the users to reach out to the organization team and share their views. A Contact Form can be used for various purposes such as giving a suggestion, asking queries, and giving feedback.

The final feature will look like this:

Contact Us Form

Basic Features of a Contact Us Page:

• Form: It contains all the required details which the user has to fill out to submit a query
• Send Button: A button that checks if all the required fields are filled and then submits the query
• Input Boxes: A group of boxes where the user inputs their detail and queries/suggestion
• Welcome Banner: A banner to introduce the User to the page

Advantages of Contact Us Page:

• Provides a way to contact the organization directly
• Makes it easier to give suggestions/feedback
• Companies are aware of how the users feel about their product

Prerequisites:

• React
• Tailwind

Steps to create the form:

Step 1: Set up the project using the command

 npx create-react-app <<Project_Name>>

Step 2: Navigate to the folder using the command

cd <<Project_Name>>

Step 3: Install the required dependencies using the command

npm install -D tailwindcss

Step 4: Create the tailwind config file using the command

npx tailwindcss init

Step 5: Rewrite the tailwind.config.js file as follows

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 6: Create a folder called components in src directory and create the files Banner.js, Contact.js

Project Structure:

The updated dependencies in package.json will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }
"devDependencies": {
    "tailwindcss": "^3.3.3"
  }

Example: Write the following code in respective files:

• App.js: This file imports the components and renders them on the screen
• Banner.js: This component displays the welcome screen
• Contact.js: This component contains the form to collect reviews/suggestions

Javascript

// App.js

import './App.css';
import Contact from './components/Contact';
import Banner from './components/Banner';
function App() {
  return (
    <div className="App">
      <Banner/>
      <Contact/>
    </div>
  );
}

export default App;

Javascript

// Banner.js

export default function Banner() {
    return (
        <div className="h-24 w-full border-2 flex items-center
                        justify-center bg-emerald-500 text-white">
        <p className="text-2xl"> Welcome to GeeksforGeeks Contact Page!!!</p>
        </div>
    )
}

Javascript

// Contact.js

export default function Contact() {
    return (
        <div className="py-2 px-4 mx-auto max-w-screen-md">
            <h2 className="mb-4 text-4xl font-extrabold
                           text-center text-gray-900">
                Contact Us
            </h2>
            <p className="mb-4 font-light text-left
                          text-gray-500 sm:text-xl">
                Got a issue? Want to send feedback?
                Need details about our Courses? Let us know.
            </p>
            <form action="#">
                <div className="flex flex-row">
                    <div className="w-1/2 pr-2 ">
                        <label for="firstName"
                               className="block my-2 text-left
                                          text-sm font-medium text-gray-900">
                            First Name
                        </label>
                        <input type="text"
                               className="shadow-sm bg-gray-50 border
                                          border-gray-300 text-gray-900
                                          text-sm rounded-lg block w-full p-2.5"
                               placeholder="Enter First Name"
                               required/>
                    </div>
                    <div className="w-1/2 pl-2">
                        <label for="firstName"
                               className="block my-2 text-left text-sm
                                          font-medium text-gray-900">
                            Last Name
                        </label>
                        <input type="text"
                               className="shadow-sm bg-gray-50 border
                                          border-gray-300 text-gray-900
                                          text-sm rounded-lg block w-full p-2.5"
                               placeholder="Enter Last Name"/>
                    </div>
                </div>
                <div>
                    <label for="email"
                           className="block my-2 text-left text-sm
                                      font-medium text-gray-900">
                        Your email
                    </label>
                    <input type="email"
                           className="shadow-sm bg-gray-50 border
                                      border-gray-300 text-gray-900
                                      text-sm rounded-lg block w-full p-2.5"
                           placeholder="abc@geeksforgeeks.org"
                           required />
                </div>
                <div>
                    <label for="subject"
                           className="block my-2 text-left
                                      text-sm font-medium text-gray-900">
                        Subject
                    </label>
                    <input type="text"
                           className="block p-3 w-full text-sm
                                      text-gray-900 bg-gray-50 rounded-lg
                                      border border-gray-300 shadow-sm "
                           placeholder="What issue/suggestion do you have?"
                           required />
                </div>
                <div >
                    <label for="message"
                           className="block my-2 text-left
                                      text-sm font-medium text-gray-900 ">
                        Your message
                    </label>
                    <textarea rows="6"
                              className="block p-2.5 w-full text-sm
                                         text-gray-900 bg-gray-50 rounded-lg
                                         shadow-sm border border-gray-300 "
                              placeholder="Query/Suggestion..."/>
                </div>
                <button type="submit"
                        className="mt-2 p-2 float-right text-white
                                   rounded-lg border-green-600
                                   bg-green-600 hover:scale-105">
                    Send message
                </button>
            </form>
        </div>
    )
}

CSS

/* index.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Steps to run the application:

Step 1: Type the following command in the terminal of your project directory

npm start

Step 2: Open the following link in your web browser

http://localhost:3000/

Output: