Html and Tailwind CSS Contact Us form code snippet

Html and Tailwind CSS Contact Us form code snippet | component

This code snippet presents a contact form component implemented using HTML and Tailwind CSS. The design is clean and straightforward, featuring input fields for the user's name, email, subject, and message. Each input field is accompanied by an icon from the Font Awesome icon library, enhancing visual appeal and usability. The form code snippet is enclosed within a bordered container with rounded corners, creating a well-defined visual separation from the surrounding content. Additionally, there is a "Send Message" button at the bottom of the form for submitting the user's inquiry. Overall, this contact us form component offers a user-friendly interface for individuals to contact the website or application owner easily.

<div class="sm:p-4 lg:p-11 xl:p-20 2xl:p-52 relative">
      <div class="flex justify-center">
        <div class="max-w-2xl w-full m-auto p-6">
          <!-- Main form details begins here -->
          <div class="bg-white rounded-md shadow p-6">
            <h3 class="mb-6 text-2xl leading-normal font-medium">
              Get in touch !
            </h3>

            <form
              method="post"
              name="myForm"
              id="myForm"
              onsubmit="return validateForm()"
            >
              <p class="mb-0" id="error-msg"></p>
              <div id="simple-msg"></div>
              <div class="grid lg:grid-cols-12 lg:gap-6">
                <div class="lg:col-span-6 mb-5">
                  <div class="text-start">
                    <label for="name" class="font-semibold">Your Name:</label>
                    <div class="relative mt-2">
                      <i class="fas fa-user w-4 h-4 absolute top-3 start-4"></i>
                      <input
                        name="name"
                        id="name"
                        type="text"
                        class="ps-11 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-blue-600 focus:ring-0"
                        placeholder="Name :"
                      />
                    </div>
                  </div>
                </div>

                <div class="lg:col-span-6 mb-5">
                  <div class="text-start">
                    <label for="email" class="font-semibold">Your Email:</label>
                    <div class="relative mt-2">
                      <i
                        class="fas fa-envelope w-4 h-4 absolute top-3 start-4"
                      ></i>
                      <input
                        name="email"
                        id="email"
                        type="email"
                        class="ps-11 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-blue-600 focus:ring-0"
                        placeholder="Email :"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div class="grid grid-cols-1">
                <div class="mb-5">
                  <div class="text-start">
                    <label for="subject" class="font-semibold"
                      >Your Question:</label
                    >
                    <div class="relative mt-2">
                      <i class="fas fa-book w-4 h-4 absolute top-3 start-4"></i>
                      <input
                        name="subject"
                        id="subject"
                        class="ps-11 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-blue-600 focus:ring-0"
                        placeholder="Subject :"
                      />
                    </div>
                  </div>
                </div>

                <div class="mb-5">
                  <div class="text-start">
                    <label for="comments" class="font-semibold"
                      >Your Comment:</label
                    >
                    <div class="relative mt-2">
                      <i
                        class="fas fa-comment w-4 h-4 absolute top-3 start-4"
                      ></i>
                      <textarea
                        name="comments"
                        id="comments"
                        class="ps-11 w-full py-2 px-3 h-28 bg-transparent rounded outline-none border border-gray-200 focus:border-blue-600 focus:ring-0"
                        placeholder="Message :"
                      ></textarea>
                    </div>
                  </div>
                </div>
              </div>
              <button
                type="submit"
                id="submit"
                name="send"
                class="py-2 px-5 font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-blue-600 hover:bg-blue-700 border-blue-600 hover:border-blue-700 text-white rounded-md justify-center flex items-center"
              >
                Send Message
              </button>
            </form>
          </div>
          <!-- Main form details ends here -->
        </div>
      </div>
    </div>

Categories

Html and Tailwind CSS Contact Us form code snippet | component