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 neveropen 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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen 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!
