Contact Us Page using ReactJS and Tailwind

A Contact Us page is an important page of the website using which the user’s can get in touch with the owner of the website or interact with the customer support team. The page also provides features using which the user can submit their feedback and suggestions as well as contact information of the various departments of the organisation.

The final page will look like:

Basic features of Contact Us Page:

• Address of the Organisation: Usually represented in a card and contains the basic information to reach the organisation
• Contact Information: Information such as email address and phone number is shown in this block
• Additional Information: It contains the contact information of other departments of the organisation
• Feedback Form: A feedback form using which the users can submit their suggestions and queries
• Map: A map using which user can be provided the physical location of the organisation
• Social Media Links: Display social media pages link of the organisation

Prerequisites:

• ReactJS
• Tailwind
• Forms in React

Approach to creating a Contact Us page:

• Set up a basic react project and install the required dependencies.
• Create the basic layout consisting of a Navbar and Welcome slide.
• Style the components using Tailwind.
• Add fixed icons to provide link to social media pages of the organisation

Step to create the project

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 folllows

/** @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 files Card.js, Feedback.js, Icons.js, Navbar.js, Welcome.js inside it.

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: Add the following code in respective files:

• App.js: This file imports all the component and displays map on the page
• Card.js: Two cards providing details to contact are shown using this component
• Feedback.js: A form to submit user queries is displayed in this component
• Icons.js: The link to social media pages is displayed.
• Navbar.js: Navgiation is provided using this component
• Welcome.js: A welcome slide is displayed in this component