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:
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 zambiatek 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@zambiatek.com" 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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
