Jump to content

Shuttle/Taxi/Private Transportation Booking Bar

Recommended Posts

Hi there,

I'm looking for a way to put a shuttle style booking widget/plugin on a squarespace website. I'll post some photos as examples of what I'm looking for. I'd love to do it using Acuity, but I don't think this is possible. So, I'm open to any suggestions.

I'd like the option to have separate fields for "pick up" and "drop off, with a drop down menu of location options to choose from.

Screenshot 2024-05-25 at 7.30.11 AM.png

Screenshot 2024-05-25 at 7.30.32 AM.png

Screenshot 2024-05-25 at 7.31.42 AM.png

Link to comment
  • 1 month later...
  • Replies 2
  • Views 745
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

On 5/25/2024 at 7:02 PM, Dagoddez said:

Hi there,

I'm looking for a way to put a shuttle style booking widget/plugin on a squarespace website. I'll post some photos as examples of what I'm looking for. I'd love to do it using Acuity, but I don't think this is possible. So, I'm open to any suggestions.

I'd like the option to have separate fields for "pick up" and "drop off, with a drop down menu of location options to choose from.

Screenshot 2024-05-25 at 7.30.11 AM.png

Screenshot 2024-05-25 at 7.30.32 AM.png

Screenshot 2024-05-25 at 7.31.42 AM.png

To create a shuttle-style booking widget on a Squarespace website with separate fields for "pick up" and "drop off," along with a dropdown menu of location options, you can consider the following solutions:

  • Use an External Booking Service:

    • Checkfront: Checkfront is an online booking system that can integrate with Squarespace. It allows you to customize booking forms with dropdown fields for locations. You can embed the booking widget on your Squarespace site using HTML code.

    • FareHarbor: FareHarbor is another booking platform that supports transportation services. It offers customizable booking forms that can be embedded on your Squarespace site.

  • Use Custom Code and APIs:

    If you're comfortable with some coding, you can create a custom booking form using Squarespace's Code Block. Here's a simple approach:

    • Google Maps API: Use Google Maps API to allow users to select pickup and drop-off locations. This can be integrated into a custom form.

    • JavaScript Form: Create a custom form using HTML and JavaScript. Use dropdown menus for predefined location options. You can then handle the form submissions with custom JavaScript to email the details to you or store them in a database.

    • Here is a basic example of what the HTML form might look like:

  • <form id="booking-form">
      <label for="pickup">Pick Up Location:</label>
      <select id="pickup" name="pickup">
        <option value="location1">Location 1</option>
        <option value="location2">Location 2</option>
        <!-- Add more locations as needed -->
      </select>
    
      <label for="dropoff">Drop Off Location:</label>
      <select id="dropoff" name="dropoff">
        <option value="location1">Location 1</option>
        <option value="location2">Location 2</option>
        <!-- Add more locations as needed -->
      </select>
    
      <button type="submit">Book Now</button>
    </form>
    
    <script>
      document.getElementById('booking-form').addEventListener('submit', function(event) {
        event.preventDefault();
        // Add your form submission logic here (e.g., send an email or save to a database)
        alert('Booking submitted!');
      });
    </script>

    Hope this helps. Thanks

Edited by amelia678
code correction
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.