:root {
–primary-red: #EE2525;
–dark-red: #d41f1f;
–bg-red: #EE2525;
–text-dark: #121315;
–white: #ffffff;
–gray-light: #f8f9fa;
–border-color: #eee;
}
/* Hide Theme Header and Footer */
html, body {
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden;
}
#pxl-header-elementor,
#pxl-footer-elementor,
footer,
.pxl-header-elementor-main,
.pxl-footer-elementor-main {
display: none !important;
}
#pxl-main {
padding: 0 !important;
}
#pxl-wapper {
padding: 0 !important;
}
#booking-form-wrapper {
background-color: var(–bg-red);
min-height: 100vh;
font-family: ‘Poppins’, ‘DM Sans’, sans-serif;
color: var(–text-dark);
padding: 40px 20px;
box-sizing: border-box;
}
.booking-container {
max-width: 850px;
margin: 0 auto;
}
/* Header */
.booking-header {
display: flex !important;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.booking-header img {
height: 95px;
width: auto;
}
.booking-header .tel-link {
color: var(–white);
text-decoration: none;
font-weight: 800;
font-size: 1.3rem;
display: flex;
align-items: center;
gap: 10px;
}
/* Progress Bar */
.progress-section {
margin-bottom: 40px;
}
.progress-bar-container {
height: 8px;
background: rgba(255,255,255,0.25);
border-radius: 10px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: var(–white);
width: 14.28%;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.step-info {
display: flex;
justify-content: space-between;
color: var(–white);
font-size: 0.95rem;
margin-top: 10px;
font-weight: 600;
}
/* Form Steps */
.form-step {
background: var(–white);
border-radius: 12px;
padding: 60px;
box-shadow: 0 30px 60px rgba(0,0,0,0.2);
display: none;
min-height: 400px;
}
.form-step.active {
display: block;
animation: slideUp 0.4s ease-out;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
0% { transform: scale(0.5); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
h2.step-title {
font-size: 1.8rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 35px;
color: var(–text-dark);
}
/* Step 1 Specific */
.address-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 15px;
margin-bottom: 25px;
}
/* Inputs */
.input-field-wrap {
margin-bottom: 25px;
}
.input-field-wrap label {
display: block;
font-weight: 800;
text-transform: uppercase;
font-size: 0.85rem;
margin-bottom: 12px;
}
.form-input {
width: 100%;
padding: 20px 25px;
background: var(–gray-light);
border: 2px solid var(–gray-light);
border-radius: 10px;
font-size: 1.1rem;
font-weight: 500;
transition: all 0.3s ease;
box-sizing: border-box;
}
.form-input:focus {
border-color: var(–primary-red);
background: #fff;
outline: none;
box-shadow: 0 10px 20px rgba(238, 37, 37, 0.05);
}
/* Service Grid (Step 2 & 3) */
.options-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.option-btn {
background: #fff;
border: 2px solid #f0f0f0;
border-radius: 12px;
padding: 40px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 20px;
}
.option-btn:hover {
border-color: var(–primary-red);
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}
.option-btn.selected {
border-color: var(–primary-red);
background: var(–gray-light);
box-shadow: inset 0 0 0 2px var(–primary-red);
}
.option-btn i {
font-size: 3rem;
color: var(–primary-red);
}
.option-btn span {
font-weight: 800;
text-transform: uppercase;
font-size: 1rem;
letter-spacing: 0.5px;
}
/* Buttons */
.btn-container {
margin-top: 40px;
}
.primary-btn {
background: #000;
color: #fff;
border: none;
padding: 22px 40px;
border-radius: 10px;
font-weight: 900;
text-transform: uppercase;
font-size: 1.2rem;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
}
.primary-btn:hover {
background: var(–primary-red);
transform: translateY(-2px);
}
/* Footer Info (Prices) */
.price-info {
margin-top: 40px;
padding-top: 40px;
border-top: 2px solid #eee;
}
.price-info h3 {
font-weight: 900;
font-size: 1.4rem;
margin-bottom: 20px;
}
.price-info ul {
list-style: none;
padding: 0;
}
.price-info ul li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
font-weight: 600;
}
.price-info ul li::before {
content: “•”;
color: var(–primary-red);
font-weight: 900;
position: absolute;
left: 0;
}
/* Summary Grid */
.summary-box {
background: var(–gray-light);
border-radius: 12px;
padding: 30px;
}
.summary-item {
display: flex;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid #ddd;
}
.summary-item:last-child { border-bottom: none; }
.summary-item strong { font-weight: 800; }
/* Responsive */
@media (max-width: 768px) {
.form-step { padding: 40px 20px; }
.options-grid { grid-template-columns: 1fr; }
.address-grid { grid-template-columns: 1fr; }
.booking-header img { height: 50px; }
.booking-header .tel-link { font-size: 1rem; }
}
let currentStep = 1;
let selectedService = ”;
let selectedLocation = ”;
const stepNames = [“Adres”, “Dienst”, “Locatie”, “Probleem”, “Planning”, “Gegevens”, “Overzicht”];
function goToStep(step) {
document.querySelectorAll(‘.form-step’).forEach(s => s.classList.remove(‘active’));
document.getElementById(‘step-‘ + step).classList.add(‘active’);
currentStep = step;
updateProgress();
if (step === 7) buildSummary();
window.scrollTo(0,0);
}
function updateProgress() {
const fill = document.getElementById(‘progress-fill’);
fill.style.width = (currentStep / 7) * 100 + ‘%’;
document.getElementById(‘step-counter’).innerText = currentStep + ‘/7’;
document.getElementById(‘step-name’).innerText = stepNames[currentStep-1];
}
function handleServiceSelection(service, element) {
/* Remove selected class from all and add to current */
document.querySelectorAll(‘#step-2 .option-btn’).forEach(btn => btn.classList.remove(‘selected’));
element.classList.add(‘selected’);
selectedService = service;
/* Show price info */
document.getElementById(‘service-price-info’).style.display = ‘block’;
/* Update button behavior */
const actionContainer = document.getElementById(‘step-2-action-container’);
if (service === ‘Verstopping’ || service === ‘Riool aanleg of reparatie’) {
actionContainer.innerHTML = ‘Volgende ‘;
} else {
/* Other services change button to TEL link */
actionContainer.innerHTML = ‘${loc.n} `;
btn.onclick = () => {
selectedLocation = loc.n;
goToStep(4);
};
grid.appendChild(btn);
});
goToStep(3);
}
function buildSummary() {
const fullAddress = `${document.getElementById(‘postcode’).value} nr. ${document.getElementById(‘huisnummer’).value}${document.getElementById(‘toevoeging’).value}`;
const summary = `
Adres: ${fullAddress}
Dienst: ${selectedService}
Locatie: ${selectedLocation}
Planning: ${document.getElementById(‘urgency-choice’).value}
Naam: ${document.querySelector(‘input[name=”gender”]:checked’).value} ${document.getElementById(‘cust-name’).value}
Telefoon: ${document.getElementById(‘cust-phone’).value}
`;
document.getElementById(‘final-summary’).innerHTML = summary;
}
// Submit via AJAX
document.getElementById(‘booking-form’).onsubmit = function(e) {
e.preventDefault();
const submitBtn = this.querySelector(‘button[type=”submit”]’);
submitBtn.innerText = “Verzenden…”;
submitBtn.disabled = true;
const fullAddress = `${document.getElementById(‘postcode’).value} nr. ${document.getElementById(‘huisnummer’).value}${document.getElementById(‘toevoeging’).value}`;
const data = new FormData();
data.append(‘action’, ‘submit_booking_form’);
data.append(‘brs_nonce’, (typeof window.brsBookingAjaxNonce !== ‘undefined’) ? window.brsBookingAjaxNonce : ”);
data.append(‘name’, document.getElementById(‘cust-name’).value);
data.append(’email’, document.getElementById(‘cust-email’).value);
data.append(‘phone’, document.getElementById(‘cust-phone’).value);
data.append(‘address’, fullAddress);
data.append(‘service’, selectedService);
data.append(‘location’, selectedLocation);
data.append(‘description’, document.getElementById(‘problem-desc’).value);
data.append(‘urgency’, document.getElementById(‘urgency-choice’).value);
data.append(‘gender’, document.querySelector(‘input[name=”gender”]:checked’).value);
console.log(“Form data built, sending fetch…”);
fetch(‘/wp-admin/admin-ajax.php’, {
method: ‘POST’,
body: data
})
.then(res => {
console.log(“Response received:”, res);
return res.json();
})
.then(res => {
console.log(“JSON parsed:”, res);
if (res.success) {
/* Hide progress section on success */
if (document.querySelector(‘.progress-section’)) {
document.querySelector(‘.progress-section’).style.display = ‘none’;
}
goToStep(8);
/* Launch Confetti */
if (typeof confetti === ‘function’) {
confetti({
particleCount: 150,
spread: 70,
origin: { y: 0.6 },
colors: [‘#EE2525’, ‘#ffffff’, ‘#000000’]
});
}
} else {
alert(‘Fout: ‘ + res.data);
submitBtn.innerText = “Bevestigen”;
submitBtn.disabled = false;
}
})
.catch(err => {
console.error(err);
alert(‘Er is een technische fout opgetreden.’);
submitBtn.innerText = “Bevestigen”;
submitBtn.disabled = false;
});
};
053 – 2340606