World's Best MERN Stack Course

Welcome, 🚀 Join us in building an amazing Contact Page! Learn how to design the complete contact page UI, style it using CSS, and even add Google Maps. Getting the users data from contact form and storing into the react state too. Plus, grab the free source code. Let's code together! 👩‍💻🌟

Here is the CSS Code

/** -----------------------
** contact section css
** -------------------------  */
.section-contact {
  & .contact-content {
    padding: 0;

    & h1 {
      margin-bottom: 3.2rem;
    }
  }
  & .container {
    padding-top: 3.2rem;
  }
  & .contact-img {
    display: flex;
    justify-content: start;
    align-items: center;
    & img {
      width: 80%;
      height: auto;
    }
  }

  & .section-form {
    & form {
      display: flex;
      flex-direction: column;
      gap: 3.2rem;
    }
    & label {
      display: block;
      margin-bottom: 1.2rem;
      text-transform: capitalize;
    }

    & input,
    textarea {
      width: 80%;
      padding: 0.4rem 0.6rem;
    }
  }
}

Here is the complete Contact Us Page Code

import { useState } from "react";

export const Contact = () => {
  const [contact, setContact] = useState({
    username: "",
    email: "",
    message: "",
  });

  // lets tackle our handleInput
  const handleInput = (e) => {
    const name = e.target.name;
    const value = e.target.value;

    setContact({
      ...contact,
      [name]: value,
    });
  };

  // handle fomr getFormSubmissionInfo
  const handleSubmit = (e) => {
    e.preventDefault();

    console.log(contact);
  };

//  Help me reach 1 Million subs 👉 https://youtube.com/thapatechnical

  return (
    <>
      <section className="section-contact">
        <div className="contact-content container">
          <h1 className="main-heading">contact us</h1>
        </div>
        {/* contact page main  */}
        <div className="container grid grid-two-cols">
          <div className="contact-img">
            <img src="/images/support.png" alt="we are always ready to help" />
          </div>

          {/* contact form content actual  */}
          <section className="section-form">
            <form onSubmit={handleSubmit}>
              <div>
                <label htmlFor="username">username</label>
                <input
                  type="text"
                  name="username"
                  id="username"
                  autoComplete="off"
                  value={contact.username}
                  onChange={handleInput}
                  required
                />
              </div>

              <div>
                <label htmlFor="email">email</label>
                <input
                  type="email"
                  name="email"
                  id="email"
                  autoComplete="off"
                  value={contact.email}
                  onChange={handleInput}
                  required
                />
              </div>

              <div>
                <label htmlFor="message">message</label>
                <textarea
                  name="message"
                  id="message"
                  autoComplete="off"
                  value={contact.message}
                  onChange={handleInput}
                  required
                  cols="30"
                  rows="6"
                ></textarea>
              </div>

              <div>
                <button type="submit">submit</button>
              </div>
            </form>
          </section>
        </div>

        <section className="mb-3">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3782.2613173278896!2d73.91411937501422!3d18.562253982539413!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2c147b8b3a3bf%3A0x6f7fdcc8e4d6c77e!2sPhoenix%20Marketcity%20Pune!5e0!3m2!1sen!2sin!4v1697604225432!5m2!1sen!2sin"
            width="100%"
            height="450"
            allowFullScreen
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          ></iframe>
        </section>
      </section>
    </>
  );
};