Published on

A Complete Guide To Create A Responsive Contact Form #2 - Light Mode With Tailwind CSS

Responsive Contact Form #2 - Light Mode

In this article, we will be exploring how to create a responsive contact form #2 - light mode using Tailwind CSS. We will go through the step-by-step process of creating this UI component and explain why Tailwind CSS is a great choice for this task.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows developers to quickly and easily create custom designs without having to write CSS from scratch. It provides a wide range of pre-built CSS classes that can be used to create responsive and customizable UI components.

The description of Responsive Contact Form #2 - Light Mode ui component

The responsive contact form #2 - light mode UI component is a simple and elegant contact form that is designed to be used on websites and web applications. It features a clean and modern design that is easy to use and customize.

The form includes fields for name, email, subject, and message, as well as a submit button. The form is fully responsive and can be used on a variety of devices, including desktops, tablets, and smartphones.

Why use Tailwind CSS to create a Responsive Contact Form #2 - Light Mode ui component?

Tailwind CSS is a great choice for creating a responsive contact form #2 - light mode UI component because it provides a wide range of pre-built CSS classes that can be used to quickly and easily create custom designs.

Using Tailwind CSS also allows developers to create responsive designs without having to write media queries from scratch, which can save a lot of time and effort.

The preview of Responsive Contact Form #2 - Light Mode ui component.

Free download of the Responsive Contact Form #2 - Light Mode's source code

The source code of Responsive Contact Form #2 - Light Mode ui component.

<div class="w-full">
    <div class="bg-gradient-to-b from-blue-800 to-blue-600 h-96"></div>
    <div class="max-w-5xl mx-auto px-6 sm:px-6 lg:px-8 mb-12">
        <div class="bg-white w-full shadow rounded p-8 sm:p-12 -mt-72">
            <p class="text-3xl font-bold leading-7 text-center">Contact me</p>
            <form action="" method="post">
                <div class="md:flex items-center mt-12">
                    <div class="w-full md:w-1/2 flex flex-col">
                        <label class="font-semibold leading-none">Name</label>
                        <input type="text" class="leading-none text-gray-900 p-3 focus:outline-none focus:border-blue-700 mt-4 bg-gray-100 border rounded border-gray-200" />
                    </div>
                    <div class="w-full md:w-1/2 flex flex-col md:ml-6 md:mt-0 mt-4">
                        <label class="font-semibold leading-none">Phone</label>
                        <input type="email" class="leading-none text-gray-900 p-3 focus:outline-none focus:border-blue-700 mt-4 bg-gray-100 border rounded border-gray-200"/>
                    </div>
                </div>
                <div class="md:flex items-center mt-8">
                    <div class="w-full flex flex-col">
                        <label class="font-semibold leading-none">Subject</label>
                        <input type="text" class="leading-none text-gray-900 p-3 focus:outline-none focus:border-blue-700 mt-4 bg-gray-100 border rounded border-gray-200"/>
                    </div>
                    
                </div>
                <div>
                    <div class="w-full flex flex-col mt-8">
                        <label class="font-semibold leading-none">Message</label>
                        <textarea type="text" class="h-40 text-base leading-none text-gray-900 p-3 focus:oultine-none focus:border-blue-700 mt-4 bg-gray-100 border rounded border-gray-200"></textarea>
                    </div>
                </div>
                <div class="flex items-center justify-center w-full">
                    <button class="mt-9 font-semibold leading-none text-white py-4 px-10 bg-blue-700 rounded hover:bg-blue-600 focus:ring-2 focus:ring-offset-2 focus:ring-blue-700 focus:outline-none">
                        Send message
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

How to create a Responsive Contact Form #2 - Light Mode with Tailwind CSS?

To create a responsive contact form #2 - light mode with Tailwind CSS, follow these steps:

  1. Set up a new HTML file and include the necessary Tailwind CSS files.
  2. Create a container for the form and add the necessary HTML elements for the form fields.
  3. Use Tailwind CSS classes to style the form fields and container.
  4. Add JavaScript code to handle form validation and submission.

Let's go through each step in more detail.

Step 1: Set up a new HTML file and include the necessary Tailwind CSS files.

To get started, create a new HTML file and include the necessary Tailwind CSS files. You can either download the files and include them locally or use a CDN.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Contact Form #2 - Light Mode</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>
<body>
  <!-- Add form container and fields here -->
</body>
</html>

Step 2: Create a container for the form and add the necessary HTML elements for the form fields.

Next, create a container for the form and add the necessary HTML elements for the form fields. You can use the form and fieldset elements to create the form, and the input and textarea elements to create the form fields.

<body>
  <div class="container mx-auto py-8">
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      <fieldset>
        <legend class="text-gray-700 font-bold mb-2">Contact Form</legend>
        <div class="mb-4">
          <label class="block text-gray-700 font-bold mb-2" for="name">
            Name
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Enter your name">
        </div>
        <div class="mb-4">
          <label class="block text-gray-700 font-bold mb-2" for="email">
            Email
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
        </div>
        <div class="mb-4">
          <label class="block text-gray-700 font-bold mb-2" for="subject">
            Subject
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="subject" type="text" placeholder="Enter the subject">
        </div>
        <div class="mb-6">
          <label class="block text-gray-700 font-bold mb-2" for="message">
            Message
          </label>
          <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="message" placeholder="Enter your message"></textarea>
        </div>
        <div class="flex items-center justify-between">
          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
            Submit
          </button>
        </div>
      </fieldset>
    </form>
  </div>
</body>

Step 3: Use Tailwind CSS classes to style the form fields and container.

Now that we have the HTML elements in place, we can use Tailwind CSS classes to style the form fields and container. We can use the bg-* classes to set the background color of the container, the shadow-* classes to add a shadow effect, and the rounded class to round the corners of the container.

We can also use the appearance-none class to remove the default styling of the form fields, and the focus:outline-none and focus:shadow-outline classes to add focus styles.

<body>
  <div class="container mx-auto py-8">
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      <fieldset>
        <legend class="text-gray-700 font-bold mb-2">Contact Form</legend>
        <div class="mb-4">
          <label class="block text-gray-700 font-bold mb-2" for="name">
            Name
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Enter your name">
        </div>
        <div class="mb-4">
          <label class="block text-gray-700 font-bold mb-2" for="email">
            Email
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
        </div>
        <div class="mb-4">
          <label class="block text-gray-700 font-bold mb-2" for="subject">
            Subject
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="subject" type="text" placeholder="Enter the subject">
        </div>
        <div class="mb-6">
          <label class="block text-gray-700 font-bold mb-2" for="message">
            Message
          </label>
          <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="message" placeholder="Enter your message"></textarea>
        </div>
        <div class="flex items-center justify-between">
          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
            Submit
          </button>
        </div>
      </fieldset>
    </form>
  </div>
</body>

Step 4: Add JavaScript code to handle form validation and submission.

Finally, we can add JavaScript code to handle form validation and submission. We can use the addEventListener method to listen for the click event on the submit button, and then use the preventDefault method to prevent the form from submitting.

We can also use the RegExp object to validate the email address and display an error message if the email address is not valid.

<body>
  <div class="container mx-auto py-8">
    <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
      <fieldset>
        <legend class="text-gray-700 font-bold mb-2">Contact Form</legend>
        <div class="mb-4">
          <label class="block text-gray-700 font-bold mb-2" for="name">
            Name
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="Enter your name">
        </div>
        <div class="mb-4">
          <label class="block text-gray-700 font-bold mb-2" for="email">
            Email
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
          <p id="email-error" class="text-red-500 text-xs hidden">Please enter a valid email address.</p>
        </div>
        <div class="mb-4">
          <label class="block text-gray-700 font-bold mb-2" for="subject">
            Subject
          </label>
          <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="subject" type="text" placeholder="Enter the subject">
        </div>
        <div class="mb-6">
          <label class="block text-gray-700 font-bold mb-2" for="message">
            Message
          </label>
          <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="message" placeholder="Enter your message"></textarea>
        </div>
        <div class="flex items-center justify-between">
          <button id="submit-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
            Submit
          </button>
        </div>
      </fieldset>
    </form>
  </div>
  <script>
    const emailInput = document.getElementById('email');
    const emailError = document.getElementById('email-error');
    const submitButton = document.getElementById('submit-button');

    const emailRegex = new RegExp(/^\S+@\S+\.\S+$/);

    submitButton.addEventListener('click', (event) => {
      event.preventDefault();
      if (!emailRegex.test(emailInput.value)) {
        emailError.classList.remove('hidden');
      } else {
        emailError.classList.add('hidden');
        // Handle form submission here
      }
    });
  </script>
</body>

Conclusion

In this article, we have explored how to create a responsive contact form #2 - light mode using Tailwind CSS. We have gone through the step-by-step process of creating this UI component and explained why Tailwind CSS is a great choice for this task.

By following the steps outlined in this article, you can create your own custom contact form that is fully responsive and easy to use. With Tailwind CSS, you can quickly and easily create custom designs without having to write CSS from scratch, which can save a lot of time and effort.