Mobile Responsive Form with Sticky Buttons


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Responsive Form</title>
    <style>
         body {
        font-family: Arial, sans-serif;
    }

    .sticky-buttons {
        position: fixed;
        bottom: 20px;
        left: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .call-now-button,
    .spot-booking-button,
    .refer-earn-button {
        display: inline-block;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        text-align: center;
        text-decoration: none;
        background-color: #ea2831;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .call-now-button:hover,
    .spot-booking-button:hover,
    .refer-earn-button:hover {
        background-color: #c493a4;
    }

    .form-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9999;
    }

    .form-popup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 1px solid #ccc;
        border-radius: 5px;
        z-index: 10000;
        max-width: 90%;
        background-color: #FFFFFF;
    }

        .form-popup form {
            margin: 20px;
        }

        .form-header {
            font-size: 24px;
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 20px;
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        textarea {
            display: block;
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }

			.form-popup form input[type="text"],
			.form-popup form input[type="email"],
			.form-popup form input[type="tel"],
			.form-popup form textarea {
				max-width: 80%;
			}
        input[type="submit"] {
            display: block;
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            font-weight: bold;
            color: #fff;
            text-align: center;
            text-decoration: none;
            background-color: #4CAF50;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #3e8e41;
        }

        .form-popup.show {
            display: block;
        }

        .form-overlay.show {
            display: block;
        }

        .close-btn {
            position: absolute;
            top: 5px;
            right: 10px;
            font-size: 20px;
            font-weight: bold;
            color: #999;
            cursor: pointer;
        }

        .close-btn:hover {
            color: #666;
        }

        @media (max-width: 767px) {
            .form-popup {
                max-width: 100%;
            }

            input[type="text"],
            input[type="email"],
            input[type="tel"],
            textarea {
                font-size: 14px;
            }

            input[type="submit"] {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="sticky-buttons">
        <a href="tel:1234567890" class="call-now-button">Call now</a>
        <button class="spot-booking-button">Spot Booking Offer</button>
        <button class="refer-earn-button">Refer and Earn</button>
    </div>

    <div class="form-overlay" onclick="closeForm()"></div>

    <div class="form-popup" id="spot-booking-form">
        <span class="close-btn" onclick="closeForm()">&times;</span>
			<form id="spot-booking-form" action="send1.php" method="POST">

            <h2 class="form-header">Spot Booking Offer</h2>
            <input type="text" name="name" placeholder="Name" required>
            <input type="tel" name="phone" placeholder="Phone" required>
            <input type="email" name="email" placeholder="Email" required>
            <textarea name="message" placeholder="Message"></textarea>
            <input type="submit" value="Submit">
        </form>
    </div>

    <div class="form-popup" id="refer-earn-form">
        <span class="close-btn" onclick="closeForm()">&times;</span>
			<form id="refer-earn-form" action="send1.php" method="POST">

            <h2 class="form-header">Refer and Earn</h2>
            <input type="text" name="name" placeholder="Name" required>
            <input type="tel" name="phone" placeholder="Phone" required>
            <input type="email" name="email" placeholder="Email" required>
            <input type="text" name="friend_name" placeholder="Friend's Name" required>
            <input type="tel" name="friend_phone" placeholder="Friend's Phone" required>
            <input type="submit" value="Submit">
        </form>
    </div>

    <script>
        document.querySelector(".spot-booking-button").addEventListener("click", function() {
            openForm("spot-booking-form");
        });

        document.querySelector(".refer-earn-button").addEventListener("click", function() {
            openForm("refer-earn-form");
        });

        function openForm(formId) {
            document.getElementById(formId).classList.add("show");
            document.querySelector(".form-overlay").classList.add("show");
        }

        function closeForm() {
            document.querySelector(".form-overlay").classList.remove("show");
            document.querySelectorAll(".form-popup").forEach(function(form) {
                form.classList.remove("show");
            });
        }
    </script>
</body>
</html>