Container for my script so it saves the data that is entered

Question: i have a code for my website users to set up appointments with me but it wont save and it wont send the entries to me either and that is the whole point of the html script i am pasting below. i am new to this completely and have spent hours trying to figure out how to create a mysql thing or whatever it is called and i cannot figure this out

website link i am using it on: bjsfrombj.net

<html>

<head>
    <title>Book Billie - Homepage</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Book Billie</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="tip_menu.html">Tip Menu</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="rate_your_date.html">Rate Your Date</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="directory.html">Directory</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <section class="section">
        <div class="container">
            <h1 class="text-center">Book Billie</h1>
            <h2 class="text-center">Book an Appointment</h2>
            <div class="row">
                <div class="col-md-6">
                    <h3 class="text-center">Incall</h3>
                    <ul>
                        <li>1 hour: $250</li>
                        <li>30 minutes: $150</li>
                        <li>15 minutes: $100</li>
                    </ul>
                    <form>
                        <div class="mb-3">
                            <label for="appointment-type" class="form-label">Appointment Type:</label>
                            <select class="form-select" id="appointment-type">
                                <option value="1-hour">1 hour</option>
                                <option value="30-minutes">30 minutes</option>
                                <option value="15-minutes">15 minutes</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="appointment-date" class="form-label">Date:</label>
                            <input type="date" class="form-control" id="appointment-date">
                        </div>
                        <div class="mb-3">
                            <label for="appointment-time" class="form-label">Time:</label>
                            <input type="time" class="form-control" id="appointment-time">
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">Book Now</button>
                        </div>
                    </form>
                </div>
                <div class="col-md-6">
                    <h3 class="text-center">Outcall</h3>
                    <ul>
                        <li>1 hour: $300</li>
                        <li>30 minutes: $200</li>
                        <li>15 minutes: $150</li>
                    </ul>
                    <form>
                        <div class="mb-3">
                            <label for="appointment-type" class="form-label">Appointment Type:</label>
                            <select class="form-select" id="appointment-type">
                                <option value="1-hour">1 hour</option>
                                <option value="30-minutes">30 minutes</option>
                                <option value="15-minutes">15 minutes</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="location" class="form-label">Location:</label>
                            <input type="text" class="form-control" id="location">
                        </div>
                        <div class="mb-3">
                            <label for="appointment-date" class="form-label">Date:</label>
                            <input type="date" class="form-control" id="appointment-date">
                        </div>
                        <div class="mb-3">
                            <label for="appointment-time" class="form-label">Time:</label>
                            <input type="time" class="form-control" id="appointment-time">
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">Book Now</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
</body>

</html>

Hi @bjx0xx and welcome to the community!

Can you post your backend code that you use to proccess the form data?

2 Likes