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:
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
// 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= "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>
)
} |
/* 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: