Shuttle/Taxi/Private Transportation Booking Bar

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.

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 gatwick airport taxi location options to choose from.

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

I have not got as far as coding in SquareSpace although my domains were transferred from Google. Since I prefer custom coding rather than Templates I would look at libraries such as JQueryUI and jqwidgets (there are others).