Home
Ti To
popup modal contact form

popup modal contact form

Working modal popup contact form in tailwind CSS
Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

This tailwind example is contributed by Ti To, on 14-Dec-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Get in touch, Contact form,popup,dialog

Form Contact us Modal

Author Ti To

4.2k

Fork Fullscreen

<!---

This form uses the Form Backend Service FabForm.io

--->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

#contact-form {
            display: none;
        }

#powered-by {
            position: fixed;
            bottom: 10px;
            right: 10px;
            color: #666;
            font-size: 12px;
            z-index: 1000;
        }

#open-popup-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #3498db;
            color: #fff;
            border: none;
            border-radius: 50%;
            padding: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

#open-popup-btn i {
            font-size: 24px;
        }
    </style>
</head>
<body class="font-sans">

<div id="contact-form" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded shadow-lg">
    <button id="close-btn" class="text-gray-700 hover:text-red-600 font-bold text-xl absolute top-2 right-2" onclick="closeForm()">X</button>
    <h2 class="text-2xl font-semibold mb-4">Contact Us</h2>
<form action="https://fabform.io/f/{form-id}" method="post" class="space-y-4">
        <div>
            <label for="name" class="block text-sm font-medium text-gray-600">Name:</label>
            <input type="text" id="name" name="name" required
                   class="mt-1 p-2 w-full border rounded-md focus:outline-none focus:border-blue-500">
        </div>

<div>
            <label for="email" class="block text-sm font-medium text-gray-600">Email:</label>
            <input type="email" id="email" name="email" required
                   class="mt-1 p-2 w-full border rounded-md focus:outline-none focus:border-blue-500">
        </div>

<div>
            <label for="message" class="block text-sm font-medium text-gray-600">Message:</label>
            <textarea id="message" name="message" rows="4" required
                      class="mt-1 p-2 w-full border rounded-md focus:outline-none focus:border-blue-500"></textarea>
        </div>

<button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Submit
        </button>
    </form>
  <a href="https://fabform.io" target="_blank" id="powered-by" class="text-gray-700 hover:text-blue-500">
    Powered By FabForm.io
</a>
</div>

openPopupBtn.addEventListener('click', function () {
        if (contactForm.style.display === 'block') {
            contactForm.style.display = 'none';
            popupIcon.classList.remove('fa-comment');
            popupIcon.classList.add('fa-comment-alt');
        } else {
            contactForm.style.display = 'block';
            popupIcon.classList.remove('fa-comment-alt');
            popupIcon.classList.add('fa-comment');
        }
    });

function closeForm() {
        contactForm.style.display = 'none';
        popupIcon.classList.remove('fa-comment');
        popupIcon.classList.add('fa-comment-alt');
    }

contactForm.addEventListener('click', function (e) {
        if (e.target === this) {
            closeForm();
        }
    });
</script>

</body>
</html>

Related Examples