ParrotForms Logo
ParrotForms
Sign inGet started

HTML Booking Form Generator

Let visitors book appointments or services

Back to Generator
HTMLReactNext.jsGatsbyJekyllHugoAlpine.jsVue.jsjQuery

Form Preview

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        .form-container {
            max-width: 600px;
            margin: 0 auto;
            background: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="email"],
        input[type="password"],
        input[type="tel"],
        input[type="number"],
        input[type="date"],
        select,
        textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 16px;
        }
        textarea {
            height: 100px;
        }
        .checkbox-group, .radio-group {
            margin-bottom: 10px;
        }
        .checkbox-item, .radio-item {
            margin-bottom: 5px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        .required:after {
            content: " *";
            color: red;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <form id="booking-form" action="#" method="POST">
            <div class="form-group">
                <label for="name" class="required">Full Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email" class="required">Email Address</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="phone" class="required">Phone Number</label>
                <input type="tel" id="phone" name="phone" required>
            </div>
            <div class="form-group">
                <label for="service" class="required">Service</label>
                <select id="service" name="service" required>
                    <option value="">Select an option</option>
                    <option value="Service A">Service A</option>
                    <option value="Service B">Service B</option>
                    <option value="Service C">Service C</option>
                </select>
            </div>
            <div class="form-group">
                <label for="date" class="required">Preferred Date</label>
                <input type="date" id="date" name="date" required>
            </div>
            <div class="form-group">
                <label for="time" class="required">Preferred Time</label>
                <select id="time" name="time" required>
                    <option value="">Select an option</option>
                    <option value="Morning">Morning</option>
                    <option value="Afternoon">Afternoon</option>
                    <option value="Evening">Evening</option>
                </select>
            </div>
            <div class="form-group">
                <button type="submit">Submit</button>
            </div>
        </form>
    </div>
    <script>
        document.getElementById('booking-form').addEventListener('submit', function(e) {
            e.preventDefault();
            console.log('Form submitted');
            // You would typically send the form data to a server here
            alert('Form submitted successfully!');
        });
    </script>
</body>
</html>

Installation

How to setup HTML Booking form

  1. 1

    Sign up to parrotforms.com

    Create your first form API endpoint then copy your endpoint.

    Screenshot Placeholder
  2. 2

    Copy the example code

    Use the copy button above to copy the entire code snippet.

    Screenshot Placeholder
  3. 3

    Paste the code and update the endpoint

    Replace the form API endpoint with the one you got in step 1.

    Screenshot Placeholder
  4. 4

    Collect submissions

    View and manage all form submissions in your parrotForms dashboard.

    Screenshot Placeholder

Need more advanced forms?

Create a free parrotForms account to access more templates, save your forms, and collect submissions.

Create a Free Account