async _out => {
await breadcrumbs(env, _out)
- p {'Do you require more information, or assistance with integrating the projects on this site? We’d love to hear from you.'}
+ p/*.mt-3*/ {'Do you require more information, or assistance with integrating the projects on this site? We’d love to hear from you.'}
form#form {
div.row {
div.row {
div.col-md-12 {
div.form-group {
- label.form-label(for="message1") {'Message *'}
- textarea.form-control#message1(placeholder="I would like to..." required rows=6 maxlength=65536) {
+ label.form-label(for="message") {'Message *'}
+ textarea.form-control#message(placeholder="I am interested in..." required rows=6 maxlength=65536) {
if (contact_draft)
`${contact_draft.message}`
}
}
if (contact_draft !== null)
- button.btn.btn-success#send-enquiry(type="button") {
+ button.btn.btn-success.mb-3#send-enquiry(type="button") {
div.icon24-outer.mr-2#icon {
div.icon24-inner {_out.push(fa_envelope)}
}
'Send enquiry'
}
else
- button.btn.btn-success#send-enquiry(type="button" disabled) {
+ button.btn.btn-success.mb-3#send-enquiry(type="button" disabled) {
div.icon24-outer.mr-2#icon {
div.icon24-inner {_out.push(fa_envelope)}
}
'Send enquiry'
}
- p.'mt-3'.mb-0#message(hidden) {}
+ div.alert#alert(hidden) {}
- p.text-muted.mt-3 {'* These fields are required.'}
+ p.text-muted {'* These fields are required.'}
},
// scripts
async _out => {
document.addEventListener(
'DOMContentLoaded',
() => {
+ let id_alert = document.getElementById('alert')
let id_company = document.getElementById('company')
let id_cross = document.getElementById('cross')
let id_email = document.getElementById('email')
let id_given_names = document.getElementById('given-names')
let id_icon = document.getElementById('icon')
let id_message = document.getElementById('message')
- let id_message1 = document.getElementById('message1')
let id_send_enquiry = document.getElementById('send-enquiry')
let id_spinner = document.getElementById('spinner')
let id_tick = document.getElementById('tick')
id_family_name.value.length === 0 &&
id_company.value.length === 0 &&
id_email.value.length === 0 &&
- id_message1.value.length === 0 ?
+ id_message.value.length === 0 ?
null :
{
given_names: id_given_names.value.slice(0, 256),
family_name: id_family_name.value.slice(0, 256),
company: id_company.value.slice(0, 256),
email: id_email.value.slice(0, 256).toLowerCase(),
- message: id_message1.value.slice(0, 65536)
+ message: id_message.value.slice(0, 65536)
}
)
}
id_family_name.value.length === 0 &&
id_company.value.length === 0 &&
id_email.value.length === 0 &&
- id_message1.value.length === 0
+ id_message.value.length === 0
id_icon.hidden = false
id_tick.hidden = true
id_cross.hidden = true
id_spinner.hidden = true
- id_message.hidden = true
+ id_alert.hidden = true
}
id_given_names.addEventListener('input', edited)
id_family_name.addEventListener('input', edited)
id_company.addEventListener('input', edited)
id_email.addEventListener('input', edited)
- id_message1.addEventListener('input', edited)
+ id_message.addEventListener('input', edited)
id_send_enquiry.addEventListener(
'click',
id_tick.hidden = true
id_cross.hidden = true
id_spinner.hidden = true
- // the below causes an ugly flicker, so just keep the message
- //id_message.hidden = true
+ // the below causes an ugly flicker, so just keep the alert
+ //id_alert.hidden = true
if (!id_form.checkValidity()) {
id_form.classList.add('was-validated');
family_name: id_family_name.value.slice(0, 256),
company: id_company.value.slice(0, 256),
email: id_email.value.slice(0, 256).toLowerCase(),
- message: id_message1.value.slice(0, 65536)
+ message: id_message.value.slice(0, 65536)
}
)
}
id_cross.hidden = false
id_spinner.hidden = true
- id_message.textContent = problem.detail
- //id_message.classList.remove('text-success')
- id_message.classList.add('text-danger')
- id_message.hidden = false
+ id_alert.textContent = problem.detail
+ id_alert.classList.remove('alert-success')
+ id_alert.classList.add('alert-danger')
+ id_alert.hidden = false
return
}
id_tick.hidden = false
id_spinner.hidden = true
- id_message.textContent = 'We have received your enquiry. We will be in touch as soon as possible.'
- //id_message.classList.add('text-success')
- id_message.classList.remove('text-danger')
- id_message.hidden = false
+ id_alert.textContent = 'We have received your enquiry. We will be in touch as soon as possible.'
+ id_alert.classList.add('alert-success')
+ id_alert.classList.remove('alert-danger')
+ id_alert.hidden = false
}
)
}