<div class="wrapper bg-color-ui-01">
<div class="grid-container">
<div class="spacer section"></div>
<!-- start page: contact-us -->
<div class="blocks-sc-2col-05 contact-us grid-x grid-padding-x gutter-medium" data-test="page-contact-us">
<div class="large-7 medium-7 small-12 cell">
<h2 class="spacer">Get in Touch</h2>
<p>Contact us about anything related to our company or services.<br>
We'll do our best to get back to you as soon as possible.</p>
<div class="spacer xx-large"></div>
<!-- form -->
<form id="blocks-sc-2col-05-form" class="grid-x grid-padding-x gutter">
<div class="large-6 medium-12 small-12 cell">
<ins-input validate id="first-name" label="First Name*" data-test="" name="first-name" value=""
placeholder="First name" error-message="First Name is required">
</ins-input>
</div>
<div class="large-6 medium-12 small-12 cell">
<ins-input validate id="last-name" label="Last Name*" data-test="" name="last-name" value=""
placeholder="Last name" error-message="Last Name is required">
</ins-input>
</div>
<div class="large-6 medium-12 small-12 cell">
<ins-input validate id="email" field="email" label="Email Address*" data-test="" name="email" value=""
placeholder="Email Address" error-message="Email is required">
</ins-input>
</div>
<div class="large-6 medium-12 small-12 cell">
<ins-input-tel id="phone-number-field" label="Mobile Phone" data-test="" phonenum-value=""
phonenum-placeholder="Mobile Phone" no-areacode>
</ins-input-tel>
</div>
<div class="large-12 medium-12 small-12 cell">
<ins-textarea validate id="message" label="Message*" data-test="" name="message" value=""
placeholder="How can we help you?" error-message="Message is required">
</ins-textarea>
</div>
<div class="large-12 medium-12 small-12 cell">
<ins-input-file id="document-input" label="Document" data-test=""></ins-input-file>
<input type="hidden" id="document" name="document-input" />
</div>
<div class="large-12 medium-12 small-12 cell text-right">
<ins-button id="blocks-sc-2col-05-submit" label="Submit" solid color="blue" type="submit" size="normal"
></ins-button>
</div>
</form>
<!-- /form -->
</div>
<div class="small-12 cell spacer xxx-large show-for-small-only"></div>
<div class="large-4 large-offset-1 medium-5 small-12 cell">
<a href="/" target="_blank" class="color-main">
<!-- google map image -->
<img src="https://insites.imgix.net/Dark.png" alt="placeholder">
</a>
<div class="spacer large"></div>
<ul class="contact-details no-bullet">
<li class="address-container spacer">
<a href="#" target="_blank" class="color-main" onclick="mapsSelector()" data-test="contact-us-get-directions">
<i class="icon-map"></i>
<span id="full-address">1 Insites Street, Melbourne VIC 3000 Australia</span>
</a>
</li>
<li class="phone-container spacer">
<a class="color-main">
<i class="icon-phone1"></i>
+1 520 467 4837
</a>
</li>
<li class="email-container">
<a class="color-main">
<i class="icon-mail1"></i>
template@insites.io
</a>
</li>
</ul>
<div class="spacer xxx-large"></div>
<h3>Opening Hours</h3>
<div class="spacer large"></div>
<div class="grid-x opening-hours color-font-head">
<!-- days -->
<div id="opening-sunday" class="small-12 cell grid-x">
<div class="small-4 cell">Sunday:</div>
<div class="small-8 cell">
<p>09:00 AM - 09:00 PM</p>
</div>
</div>
<div class="small-12 cell spacer x-small"></div>
<!-- /days -->
<!-- days -->
<div id="opening-monday" class="small-12 cell grid-x">
<div class="small-4 cell">Monday:</div>
<div class="small-8 cell">
<p>09:00 AM - 09:00 PM</p>
</div>
</div>
<div class="small-12 cell spacer x-small"></div>
<!-- /days -->
<!-- days -->
<div id="opening-tuesday" class="small-12 cell grid-x">
<div class="small-4 cell">Tuesday:</div>
<div class="small-8 cell">
<p>09:00 AM - 09:00 PM</p>
</div>
</div>
<div class="small-12 cell spacer x-small"></div>
<!-- /days -->
<!-- days -->
<div id="opening-wednesday" class="small-12 cell grid-x">
<div class="small-4 cell">Wednesday:</div>
<div class="small-8 cell">
<p>09:00 AM - 09:00 PM</p>
</div>
</div>
<div class="small-12 cell spacer x-small"></div>
<!-- /days -->
<!-- days -->
<div id="opening-thursday" class="small-12 cell grid-x">
<div class="small-4 cell">Thursday:</div>
<div class="small-8 cell">
<p>09:00 AM - 09:00 PM</p>
</div>
</div>
<div class="small-12 cell spacer x-small"></div>
<!-- /days -->
<!-- days -->
<div id="opening-friday" class="small-12 cell grid-x">
<div class="small-4 cell">Friday:</div>
<div class="small-8 cell">
<p>09:00 AM - 09:00 PM</p>
</div>
</div>
<div class="small-12 cell spacer x-small"></div>
<!-- /days -->
<!-- days -->
<div id="opening-saturday" class="small-12 cell grid-x">
<div class="small-4 cell">Saturday:</div>
<div class="small-8 cell">
<p>09:00 AM - 09:00 PM</p>
</div>
</div>
<div class="small-12 cell spacer x-small"></div>
<!-- /days -->
</div>
</div>
</div>
</div>
<div class="spacer section"></div>
</div>
.blocks-sc-2col-05 .ins-form-field-wrap.is-invalid .ins-form-error {
color: var(--color-error, #FF3366);
font-family: var(--font-family-03, sans-serif);
font-size: 12px;
line-height: 16px;
font-weight: 400;
}
// highlighted opening hours
let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let d = new Date();
let dayName = days[d.getDay()];
dayName = "opening-" + dayName.toLowerCase();
document.getElementById(dayName).classList.add('bold');
var blocksSc2Col05Form = document.getElementById('blocks-sc-2col-05-form');
var blocksSc2Col05SubmitBtn = document.getElementById('blocks-sc-2col-05-submit');
blocksSc2Col05Form.addEventListener('submit', validateForm);
async function validateForm(event) {
event.preventDefault();
// blocksSc2Col05SubmitBtn.loading = true;
if(await WebBlocks.validation.validateForm(blocksSc2Col05Form)) {
// form.submit();
console.log("form submit");
blocksSc2Col05SubmitBtn.loading = true;
return true;
} else {
blocksSc2Col05SubmitBtn.loading = false;
return false;
}
}