Contact Us Form Using ReactJS and Tailwind
Last Updated :
24 Apr, 2025
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:
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;
// 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>
)
}
// 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="[email protected]"
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>
)
}
/* 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:
Similar Reads
Contact Us Page using ReactJS and Tailwind
The Contact Us page is crucial for user interaction, allowing users to connect with the website owner or customer support, submit feedback, and suggestions, and access departmental contact information.Preview of final output: Let us have a look at how the final output will look like.Prerequisites:Re
6 min read
Create Footers Using React And Tailwind CSS
We will learn how to create a responsive footer using React and Tailwind CSS with a modern design. The footer will feature a green background with white text providing a clean and professional look. We will create three sections: Contacts social media and Services to display important information an
3 min read
Create Feeds UI using React and Tailwind CSS
In the world of social networking, feeds are the primary way users interact with content. Whether it is on LinkedIn, Facebook, or Twitter the feed showcases posts updates, and activities from people or organizations. This article will help you build a LinkedIn-style feed UI using React and Tailwind
4 min read
Create Form Layouts using React and Tailwind CSS
We will create a responsive form layout using React and Tailwind CSS. We will design the form with input fields, buttons, and icons to create a modern UI. This form layout can be used in various applications such as login pages sign-up forms and contact forms. Forms are essential components of web a
4 min read
Contact Us Form using Next.js
Creating a Contact Us form in Next.js involves setting up a form component, handling form submissions, and potentially integrating with a backend service or API to send the form data. In this article, we will create a Contact Us Form with NextJS.Output Preview: Let’s have a look at what our final pr
6 min read
Create FAQs using React and Tailwind CSS
A Frequently Asked Questions section is a common feature found on websites and applications that helps users find answers to common queries in an organized manner. A well-designed FAQ can improve user experience reduce support requests and provide users with quick and easy access to helpful informat
5 min read
Create Navbars UI using React and Tailwind CSS
A UI plays an important role because a clean, well-designed interface creates a positive first impression and if the UI is good then users can stay on our website some more time and if the UI is bad then they can not stay on our site for more time. we will see how to Create Navbars UI using React an
5 min read
Create Buttons UI using React and Tailwind CSS
Tailwind CSS is a utility-first CSS framework that allows developers to quickly build responsive and reusable components. We'll explore how to create buttons with different styles such as primary, secondary, and disabled states, and buttons of various sizes.PrerequisitesReact JavaScriptNodeJSTailwin
2 min read
Design a Contact Form Using Tailwind CSS
A Contact Form Builder is a web application that allows users to create custom contact forms for their websites with ease. This Tailwind project aims to build a user-friendly interface for creating and customizing contact forms.Approach:Design a simple and intuitive UI using the Tailwind CSS for the
2 min read
Create Header using React and Tailwind CSS
In modern web development building responsive and customizable user interfaces is crucial. One of the essential elements of any web application is the header which typically contains navigation links branding or other important controls. we will create a responsive header section using React and Tai
4 min read