reliance.staging.junctiondesign.com
Open in
urlscan Pro
143.198.43.178
Public Scan
Submitted URL: http://reliance.staging.junctiondesign.com/
Effective URL: https://reliance.staging.junctiondesign.com/
Submission: On January 01 via api from US — Scanned from US
Effective URL: https://reliance.staging.junctiondesign.com/
Submission: On January 01 via api from US — Scanned from US
Form analysis 1 forms found in the DOM
POST /
<form method="post" enctype="multipart/form-data" id="gform_1" action="/" novalidate="">
<div class="gform_body gform-body">
<div id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below">
<div id="field_1_1" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" data-js-reload="field_1_1"><label class="gfield_label" for="input_1_1">I'm Interested In<span
class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label>
<div class="ginput_container ginput_container_select"><select name="input_1" id="input_1_1" class="large gfield_select" aria-required="true" aria-invalid="false">
<option value="New AC">New AC</option>
<option value="New Furnace and AC System">New Furnace and AC System</option>
<option value="New Furnace / Boiler">New Furnace / Boiler</option>
<option value="New Humidifier / Air Quality">New Humidifier / Air Quality</option>
<option value="Smart Home Solutions">Smart Home Solutions</option>
<option value="Water Purification">Water Purification</option>
<option value="Water Softener">Water Softener</option>
<option value="Tankless Water Heater">Tankless Water Heater</option>
<option value="New Water Heater">New Water Heater</option>
<option value="Regular Maintenance and Tune-Up">Regular Maintenance and Tune-Up</option>
<option value="Repair and Service">Repair and Service</option>
<option value="Plumbing">Plumbing</option>
<option value="Electrical">Electrical</option>
<option value="Garage Heaters">Garage Heaters</option>
<option value="Generators">Generators</option>
<option value="EV Chargers">EV Chargers</option>
<option value="Heat Pump">Heat Pump</option>
</select></div>
</div>
<div id="field_1_4" class="gfield gfield--width-full trigger-booker field_sublabel_below field_description_below gfield_visibility_visible" data-js-reload="field_1_4"><label class="gfield_label" for="input_1_4">Book Appointment</label>
<div class="ginput_container ginput_container_text"><input name="input_4" id="input_1_4" type="text" value="" class="large" placeholder="Pick your preferred date and time" aria-invalid="false"> </div>
</div>
<div id="field_1_2" class="gfield gfield--width-half temp-hidden date-input gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" data-js-reload="field_1_2"><label class="gfield_label"
for="input_1_2">Date<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label>
<div class="ginput_container ginput_container_date">
<input name="input_2" id="input_1_2" type="text" value="" class="datepicker mdy datepicker_no_icon gdatepicker-no-icon hasDatepicker initialized" placeholder="mm/dd/yyyy" aria-describedby="input_1_2_date_format" aria-invalid="false"
aria-required="true">
<span id="input_1_2_date_format" class="screen-reader-text">MM slash DD slash YYYY</span>
</div>
<input type="hidden" id="gforms_calendar_icon_input_1_2" class="gform_hidden" value="https://reliance.staging.junctiondesign.com/wp-content/plugins/gravityforms/images/datepicker/datepicker.svg">
</div>
<div id="field_1_6" class="gfield gfield--width-half temp-hidden time-input gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" data-js-reload="field_1_6"><label class="gfield_label"
for="input_1_6">Time<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label>
<div class="ginput_container ginput_container_select"><select name="input_6" id="input_1_6" class="large gfield_select" aria-required="true" aria-invalid="false">
<option value="Select a time">Select a time</option>
<option value="10:00 AM">10:00 AM</option>
<option value="11:00 AM">11:00 AM</option>
<option value="12:00 PM">12:00 PM</option>
<option value="1:00 PM">1:00 PM</option>
<option value="2:00 PM">2:00 PM</option>
<option value="3:00 PM">3:00 PM</option>
<option value="4:00 PM">4:00 PM</option>
<option value="5:00 PM">5:00 PM</option>
<option value="6:00 PM">6:00 PM</option>
<option value="7:00 PM">7:00 PM</option>
<option value="8:00 PM">8:00 PM</option>
</select></div>
</div>
<div id="field_1_5" class="gfield gfield--width-full gfield_html gfield_html_formatted gfield_no_follows_desc field_sublabel_below field_description_below gfield_visibility_visible" data-js-reload="field_1_5">
<script type="text/javascript">
(function($) {
// define constants
const today = new Date();
// today.setHours(today.getHours() - 6);
const varTitle = new Date(today);
const dayAhead = new Date(today);
dayAhead.setDate(dayAhead.getDate() + 1);
const twoDaysAhead = new Date(dayAhead);
twoDaysAhead.setDate(twoDaysAhead.getDate() + 1);
const hoursAvailToday = today.getHours() < 16;
// making sure Date datepicker doesn't allow dates before today
gform.addFilter('gform_datepicker_options_pre_init', function(optionsObj, formId, fieldId) {
optionsObj.minDate = hoursAvailToday ? 0 : 1;
return optionsObj;
});
// triggering the modal
$('.trigger-booker').on('click', function() {
let varButtons = '';
if (hoursAvailToday) {
varButtons += `<div class="booker__options__title">${varTitle.toDateString()}</div><div class="booker__options__list">`;
let startTime = new Date(today);
startTime.setMinutes(0);
if (startTime.getHours() < 8) {
startTime.setHours(8);
} else {
startTime.setHours(startTime.getHours() + 2);
}
while (startTime.getHours() <= 18) {
startTime.setHours(startTime.getHours() + 2);
varButtons += '<button>' + formatAMPM(startTime) + '</button>';
}
varButtons += '</div>';
}
let options = `
<div class="booker__options">
${varButtons}
<div class="booker__options__title">${dayAhead.toDateString()}</div>
<div class="booker__options__list">
<button>10:00 AM</button>
<button>12:00 PM</button>
<button>2:00 PM</button>
<button>4:00 PM</button>
<button>6:00 PM</button>
<button>8:00 PM</button>
</div>
<div class="booker__options__title">${twoDaysAhead.toDateString()}</div>
<div class="booker__options__list">
<button>10:00 AM</button>
<button>12:00 PM</button>
<button>2:00 PM</button>
<button>4:00 PM</button>
<button>6:00 PM</button>
<button>8:00 PM</button>
</div>
</div>`;
$('body').append(`<div class="booker-wrap"><div class="booker">${options}<button class="request-other">Show More Booking Options</button></div></div>`);
});
$('body').on('click', '.booker-wrap', function(e) {
if ($(e.target).hasClass('booker-wrap')) {
fadeBooker();
}
});
$('body').on('click', '.request-other', function() {
$('.temp-hidden').removeClass('temp-hidden');
$('.trigger-booker').addClass('temp-hidden');
$('.datepicker').eq(0).focus();
fadeBooker();
});
$('body').on('click', '.booker__options__list button', function() {
const day = $(this).closest('.booker__options__list').prev().text();
const time = $(this).text();
const newDateString = day + ' ' + time;
const newDate = new Date(newDateString);
const yyyy = newDate.getFullYear();
let mm = newDate.getMonth() + 1; // Months start at 0!
let dd = newDate.getDate();
if (dd < 10) dd = '0' + dd;
if (mm < 10) mm = '0' + mm;
const formattedDate = mm + '/' + dd + '/' + yyyy;
$('.trigger-booker').find('input').val(newDate);
$('.date-input').find('input').val(formattedDate).trigger('change');
$('.time-input').find('select').val(time);
fadeBooker();
});
// ensuring manually chosen date shows proper times available
$('.date-input input').on('change', function() {
const dateString = $(this).val();
const dateArr = dateString.split('/');
const dateCombined = dateArr[0] + '/' + dateArr[1] + '/' + dateArr[2];
const date = new Date(dateCombined);
const isToday = today.toDateString() == date.toDateString();
if (isToday) {
let varOptions = '<option value="Select a time">Select a time</option>';
let startTime = new Date(today);
startTime.setMinutes(0);
if (startTime.getHours() < 8) {
startTime.setHours(8);
} else {
startTime.setHours(startTime.getHours() + 2);
}
while (startTime.getHours() <= 18) {
startTime.setHours(startTime.getHours() + 2);
const formatTime = formatAMPM(startTime);
varOptions += '<option value="' + formatTime + '">' + formatTime + '</option>';
}
$('.time-input select').empty().append(varOptions);
} else {
$('.time-input select').empty().append(
`<option value="Select a time">Select a time</option><option value="10:00 AM">10:00 AM</option><option value="11:00 AM">11:00 AM</option><option value="12:00 PM">12:00 PM</option><option value="1:00 PM">1:00 PM</option><option value="2:00 PM">2:00 PM</option><option value="3:00 PM">3:00 PM</option><option value="4:00 PM">4:00 PM</option><option value="5:00 PM">5:00 PM</option><option value="6:00 PM">6:00 PM</option><option value="7:00 PM">7:00 PM</option><option value="8:00 PM">8:00 PM</option>`
);
}
// focus time input if visible
const timeVisible = $('.time-input select:visible');
if (timeVisible.length) {
setTimeout(function() {
timeVisible.focus();
});
}
});
// helper fxns
function fadeBooker() {
$('.booker-wrap').fadeOut(function() {
$(this).remove();
});
}
function formatAMPM(date) {
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0' + minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
}
})(jQuery);
</script>
<style type="text/css">
.booker-wrap {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
}
.booker {
background: white;
padding: 20px;
position: absolute;
width: 90%;
max-width: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.booker__options__list {
display: flex;
flex-wrap: wrap;
margin: 0 -2px;
}
.booker__options__list button {
margin: 0 2px;
}
.request-other {
margin-top: 20px;
}
.temp-hidden {
display: none !important;
}
</style>
</div>
</div>
</div>
<div class="gform_footer top_label"> <input type="submit" id="gform_submit_button_1" class="gform_button button" value="Submit"
onclick="if(window["gf_submitting_1"]){return false;} if( !jQuery("#gform_1")[0].checkValidity || jQuery("#gform_1")[0].checkValidity()){window["gf_submitting_1"]=true;} "
onkeypress="if( event.keyCode == 13 ){ if(window["gf_submitting_1"]){return false;} if( !jQuery("#gform_1")[0].checkValidity || jQuery("#gform_1")[0].checkValidity()){window["gf_submitting_1"]=true;} jQuery("#gform_1").trigger("submit",[true]); }">
<input type="hidden" class="gform_hidden" name="is_submit_1" value="1">
<input type="hidden" class="gform_hidden" name="gform_submit" value="1">
<input type="hidden" class="gform_hidden" name="gform_unique_id" value="">
<input type="hidden" class="gform_hidden" name="state_1" value="WyJbXSIsIjRiYTIyMDI3MWYyMGFlZjAwNWRhMzc0ZmVlOTlhNTJmIl0=">
<input type="hidden" class="gform_hidden" name="gform_target_page_number_1" id="gform_target_page_number_1" value="0">
<input type="hidden" class="gform_hidden" name="gform_source_page_number_1" id="gform_source_page_number_1" value="1">
<input type="hidden" name="gform_field_values" value="">
</div>
</form>Text Content
Skip to content I'm Interested In(Required) New ACNew Furnace and AC SystemNew Furnace / BoilerNew Humidifier / Air QualitySmart Home SolutionsWater PurificationWater SoftenerTankless Water HeaterNew Water HeaterRegular Maintenance and Tune-UpRepair and ServicePlumbingElectricalGarage HeatersGeneratorsEV ChargersHeat Pump Book Appointment Date(Required) MM slash DD slash YYYY Time(Required) Select a time10:00 AM11:00 AM12:00 PM1:00 PM2:00 PM3:00 PM4:00 PM5:00 PM6:00 PM7:00 PM8:00 PM * Corporate * Brampton * region1 (Region1) * Toronto This site is registered on wpml.org as a development site. Notifications