How to add a button that pre-fills a meeting location in the booking form

Modified on Thu, 4 Dec at 11:33 AM

How to add a button that pre-fills a meeting location in the booking form

Sometimes you want to give customers a quick way to choose a fixed meeting location — for example, your office address, showroom, or a standard meeting point.

On this page

Jump to any section using the links below

Add a button to book a meeting at a predefined location

Table of Contents

Add a button to book a meeting at a predefined location
1. Example: “Book meeting at our office” button
2. How it works
3. Recommended placement

✔ Form Part 1
✔ Styling → Custom JavaScript
✔Recommended: Inside an HTML component

4. When to use this pattern

Sometimes you want to give customers a quick way to choose a fixed meeting location — for example, your office address, showroom, or a standard meeting point.

You can do this by adding a custom button to the booking form that automatically fills the address field and updates any related fields.

This is done using a small JavaScript function inside the booking form (typically in Form Part 1 or in an HTML component so the button can be reused across multiple booking forms).

1. Example: “Book meeting at our office” button

<button type="button" onclick="selectOfficeLocation()"
        class="btn btn-success"
        style="background-color: #1D5FED; border-color: #1D5FED;">
    Book meeting at our office
</button>
<br>

<script>
function selectOfficeLocation() {
    // Pre-fill the address field
    $('.dawa-address')
        .val('Vesterbrogade 39, 1., 1620 København V')
        .trigger('blur');

    // Ensure the address block is visible
    const targetDiv = document.getElementById("location_div");
    if (targetDiv) {
        targetDiv.style.display = "block";
    }

    // Optional: Set a related field value
    $("#telefonmoede").val('0');
}
</script>

2. How it works

.dawa-address
Targets the address input used by Hubhus’ DAWA/geo lookup.
.trigger('blur') ensures the system re-validates and resolves the address.
location_div
Makes sure the address section is shown (Hubhus hides/shows it dynamically).
telefonmoede
Example of setting an additional field — you can adapt this to your own fields.

3. Recommended placement

You can place this snippet in:

✔ Form Part 1

Runs early and is ideal for custom UI elements.

✔ Styling → Custom JavaScript

Good for JS-only logic.

✔ Recommended: Inside an HTML component

This makes the button reusable across multiple booking forms:

<hh-html.office-booking-button />

Then maintain the script in one place.

4. When to use this pattern

You offer meetings at your office or showroom
You have multiple fixed meeting locations
You want faster booking for standard scenarios
You need to toggle additional fields when a location is chosen
You want a cleaner UI without exposing full address fields

? Common searches

booking setup • calendar setup • appointment scheduling • booking configuration

? Also known as

appointment • scheduling • reservation • calendar event

Randomizing Resource Weights in Booking Forms
Working with Data Fields in bookingforms (Advanced JSON Storage)
Creating and managing booking forms
How do I configure booking duration and time restrictions?
How do I configure booking form error and info messages?