Published on

Learn How To Create A Working Contact Form (send email without Backend server) With Tailwind CSS Like an Expert

Tags
Working Contact Form (send email without Backend server)

As a FrontEnd technology blogger, it's essential to keep up with the latest trends and tools in the industry. One such tool that has gained popularity in recent times is Tailwind CSS. Tailwind CSS is a utility-first CSS framework that helps you create custom designs quickly and efficiently. In this article, we'll learn how to create a Working Contact Form (send email without Backend server) with Tailwind CSS.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined CSS classes that you can use to create custom designs. It's different from other CSS frameworks like Bootstrap or Foundation, which provide pre-built components. With Tailwind CSS, you have complete control over the design and can create custom designs quickly and efficiently.

The description of Working Contact Form (send email without Backend server) ui component

A Working Contact Form (send email without Backend server) is a UI component that allows users to send an email to the website owner without the need for a backend server. This is achieved by using third-party services like Formspree or Netlify Forms. The Working Contact Form UI component typically includes fields for the user's name, email address, subject, and message.

Why use Tailwind CSS to create a Working Contact Form (send email without Backend server) ui component?

Tailwind CSS provides a set of pre-defined CSS classes that you can use to create custom designs quickly and efficiently. This makes it an ideal choice for creating a Working Contact Form UI component. Additionally, Tailwind CSS is lightweight, which means that it won't slow down your website's performance.

The preview of Working Contact Form (send email without Backend server) ui component.

To create a Working Contact Form (send email without Backend server) UI component, we'll use Tailwind CSS classes to style the form elements. The form will include fields for the user's name, email address, subject, and message.

Free download of the Working Contact Form (send email without Backend server)'s source code

The source code of Working Contact Form (send email without Backend server) ui component.

To create a Working Contact Form (send email without Backend server) UI component, we'll use HTML and Tailwind CSS classes. The HTML code will include form elements for the user's name, email address, subject, and message. We'll also include a submit button that will trigger the email sending process.

<!-- 
    =======================================================================

    This is a working contact form. To receive email, 
    Replace YOUR_ACCESS_KEY_HERE with your actual Access Key.

    Create Access Key here 👉 https://web3forms.com/

    Surjith S M (@surjithctly)
    =======================================================================
 -->


<div class="flex items-center min-h-screen bg-gray-50 dark:bg-gray-900">
    <div class="container mx-auto">
        <div class="max-w-md mx-auto my-10 bg-white p-5 rounded-md shadow-sm">
            <div class="text-center">
                <h1 class="my-3 text-3xl font-semibold text-gray-700 dark:text-gray-200">Contact Us</h1>
                <p class="text-gray-400 dark:text-gray-400">Fill up the form below to send us a message.</p>
            </div>
            <div class="m-7">
                <form action="https://api.web3forms.com/submit" method="POST" id="form">

                    <input type="hidden" name="apikey" value="YOUR_ACCESS_KEY_HERE">
                    <input type="hidden" name="subject" value="New Submission from Web3Forms">
                    <input type="checkbox" name="botcheck" id="" style="display: none;">


                    <div class="mb-6">
                        <label for="name" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Full Name</label>
                        <input type="text" name="name" id="name" placeholder="John Doe" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
                    </div>
                    <div class="mb-6">
                        <label for="email" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Email Address</label>
                        <input type="email" name="email" id="email" placeholder="[email protected]" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
                    </div>
                    <div class="mb-6">

                        <label for="phone" class="text-sm text-gray-600 dark:text-gray-400">Phone Number</label>
                        <input type="text" name="phone" id="phone" placeholder="+1 (555) 1234-567" required class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" />
                    </div>
                    <div class="mb-6">
                        <label for="message" class="block mb-2 text-sm text-gray-600 dark:text-gray-400">Your Message</label>

                        <textarea rows="5" name="message" id="message" placeholder="Your Message" class="w-full px-3 py-2 placeholder-gray-300 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-indigo-100 focus:border-indigo-300 dark:bg-gray-700 dark:text-white dark:placeholder-gray-500 dark:border-gray-600 dark:focus:ring-gray-900 dark:focus:border-gray-500" required></textarea>
                    </div>
                    <div class="mb-6">
                        <button type="submit" class="w-full px-3 py-4 text-white bg-indigo-500 rounded-md focus:bg-indigo-600 focus:outline-none">Send Message</button>
                    </div>
                    <p class="text-base text-center text-gray-400" id="result">
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
const form = document.getElementById('form');
const result = document.getElementById('result');

form.addEventListener('submit', function(e) {
    const formData = new FormData(form);
    e.preventDefault();
    var object = {};
    formData.forEach((value, key) => {
        object[key] = value
    });
    var json = JSON.stringify(object);
    result.innerHTML = "Please wait..."

    fetch('https://api.web3forms.com/submit', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: json
        })
        .then(async (response) => {
            let json = await response.json();
            if (response.status == 200) {
                result.innerHTML = json.message;
                 result.classList.remove('text-gray-500');
                result.classList.add('text-green-500');
            } else {
                console.log(response);
                result.innerHTML = json.message;
                 result.classList.remove('text-gray-500');
                 result.classList.add('text-red-500');
            }
        })
        .catch(error => {
            console.log(error);
            result.innerHTML = "Something went wrong!";
        })
        .then(function() {
            form.reset();
            setTimeout(() => {
                result.style.display = "none"; 
            }, 5000);
        });
})
</script>

How to create a Working Contact Form (send email without Backend server) with Tailwind CSS?

Now that we have an understanding of what a Working Contact Form (send email without Backend server) UI component is and why we should use Tailwind CSS to create it, let's dive into the steps to create one.

Step 1: Create a new HTML file

Create a new HTML file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Contact Form</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css">
</head>
<body>
  
</body>
</html>

Step 2: Add the form elements

Add the form elements for the user's name, email address, subject, and message. We'll also include a submit button that will trigger the email sending process.

<form action="https://formspree.io/f/{form_id}" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Your name" class="border rounded-md p-2 w-full mb-4">

  <label for="email">Email:</label>
  <input type="email" id="email" name="_replyto" placeholder="Your email" class="border rounded-md p-2 w-full mb-4">

  <label for="subject">Subject:</label>
  <input type="text" id="subject" name="subject" placeholder="Subject" class="border rounded-md p-2 w-full mb-4">

  <label for="message">Message:</label>
  <textarea id="message" name="message" placeholder="Your message" class="border rounded-md p-2 w-full mb-4"></textarea>

  <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Send
  </button>
</form>

Note that we're using Formspree to handle the email sending process. You'll need to replace {form_id} with your own Formspree form ID.

Step 3: Style the form elements

We'll use Tailwind CSS classes to style the form elements. Here's the CSS code:

label {
  display: block;
  margin-bottom: 0.5rem;
}

input,
textarea {
  display: block;
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
}

button {
  background-color: #3490dc;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background-color: #2779bd;
}

Step 4: Test the form

Test the form by filling in the fields and clicking the submit button. You should receive an email with the form data.

Conclusion

In this article, we learned how to create a Working Contact Form (send email without Backend server) with Tailwind CSS. We saw that Tailwind CSS provides a set of pre-defined CSS classes that you can use to create custom designs quickly and efficiently. We also saw that we can use third-party services like Formspree to handle the email sending process. With this knowledge, you can now create custom Working Contact Form UI components for your website or web application.