Adding a Contact Modal Button

The contact modal is the “Get in Touch” pop-up. It is part of the standard site footer, so it is available on every page that uses that footer. Pages on a different footer template (form pages, print pages, checkout) don’t have it.

The home page “Email Us” button opens it, and so can any button you add to page content.

What the modal contains

Part	What it shows
Title	”Get in Touch”, unless an enquiry button sets its own title
Call tile	Greyed out and reads “Closed” unless at least one store is open right now. When any store is open, it shows the main company phone number, the COMPANY_PHONE setting ((02) 4941 4499 on 21 October 2026), and dials it
Email tile	Opens an email to hello@altapac.com. The address is fixed in the theme and can’t be changed in the cPanel
Visit Us list	Every Store Finder store with its address, hours, phone, email and an “open now” or “closed” marker. Large screens only; hidden on phones and most tablets
Form	The contact-modal form page, shown inside the modal. Fields: Name and Email Address (both required), Contact Phone Number and Message

The modal has no store tabs. The per-store tabs and forms are on the /contact-altapac/ page.

”Open” is worked out from each store’s hours in Store Finder and the site-wide closing exceptions. The check runs once, when the page loads. See Store hours for the settings.

Caution

If the closing-exceptions setting is empty or malformed, or a " is typed into any Store Finder record, every store shows “closed” and the Call tile stays grey on every page. Nothing warns you. See Store hours.

Not live yet

On altapac.com today, the second tile is Chat, not Email (checked 21 October 2026). Like Call, it is greyed out, reads “Closed” and can’t be clicked until a store is open. When a store is open it reads “Live & Ready” (from theme source; not seen live) and opens an email to hello@altapac.com. Closed tiles also use white text on a pale grey background, which is hard to read. The always-on Email tile and readable closed tiles arrive with the next theme release (AUD-33, AUD-82).

Add a plain contact button

To open the modal from page content, add a tag (usually a button) with these attributes:

data-target="#contactModal"
data-toggle="modal"
type="button"

For example:

<button
    class="btn btn-primary"
    data-target="#contactModal"
    data-toggle="modal"
    type="button">
        Contact Us
</button>

This opens the modal as it is, with an empty form.

Note

Any HTML tag can open the modal this way, but a button is the most common and is the easiest to style.

Prefill the modal with an enquiry button

A button can also open the modal with its own title, a product line under the title, and the Message box already filled in, for example “Book a fitting” or “Get a quote”. These buttons use data-contact-enquiry and the data-enquiry-title, data-enquiry-intro, data-enquiry-product and data-enquiry-sku attributes, instead of data-toggle and data-target. Use one style or the other, not both.

For snippets, the attribute reference and the mistakes that break the message, see Contact forms and enquiry buttons.

The form inside the modal

The form in the modal is the content page form/contact-modal/. Enquiry buttons fill its Message field, which is named inp-msg, by passing the message in the form’s address. If that page is renamed, the modal shows an empty box. If the Message field is renamed, every enquiry button opens with an empty message. Neither shows an error.

Before editing that page, read Editing a form page.

For developers

• src/templates/footers/includes/contactModal.template.html: modal markup, the store list, the any-store-open Call logic and the data-contact-enquiry script.
• src/templates/footers/template.html: loads the modal include.
• src/templates/cms/home.template.html: the home page “Email Us” trigger.
• The table follows the theme’s development branch. The Chat-to-Email change is commit 902e5ae (AUD-33, AUD-82). It is on development and not on main, which matches the live modal.
• Form fields come from Altapac-Content pages/form/contact-modal/Description1.html.