// Paperform Page Load Scripts - Calendly Integration + Form Validation Fixes
console.log('🚀 Calendly integration loading...');
// Your Calendly booking URL
const CALENDLY_URL = 'https://calendly.com/sebastian-m-jpi/30min';
// Wait for page to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
console.log('📄 Page loaded, starting Calendly integration...');
// Fix form validation issues first
fixFormValidationIssues();
// Then add Calendly booking link
addCalendlyBookingLink();
});
function fixFormValidationIssues() {
console.log('🔧 Fixing form validation issues...');
// Fix form elements that are missing id/name attributes
const formElements = document.querySelectorAll('input, select, textarea');
formElements.forEach((element, index) => {
if (!element.id && !element.name) {
// Generate a unique id based on the element type and index
const elementType = element.type || element.tagName.toLowerCase();
const generatedId = `${elementType}_field_${index}`;
element.id = generatedId;
element.name = generatedId;
console.log(`✅ Added id/name to element: ${generatedId}`);
}
});
// Fix labels that don't have proper "for" attributes
const labels = document.querySelectorAll('label');
labels.forEach((label, index) => {
if (!label.getAttribute('for')) {
// Try to find the associated input
const input = label.querySelector('input, select, textarea') ||
label.nextElementSibling?.querySelector('input, select, textarea') ||
label.parentElement?.querySelector('input, select, textarea');
if (input) {
if (!input.id) {
const elementType = input.type || input.tagName.toLowerCase();
const generatedId = `${elementType}_field_${index}`;
input.id = generatedId;
input.name = generatedId;
}
label.setAttribute('for', input.id);
console.log(`✅ Fixed label association: ${input.id}`);
}
}
});
// Fix any radio button groups that might be missing proper names
const radioButtons = document.querySelectorAll('input[type="radio"]');
const radioGroups = new Map();
radioButtons.forEach((radio, index) => {
if (!radio.name) {
// Try to group by parent container or adjacent radios
const container = radio.closest('.form-field, .field-container, .radio-group');
let groupName = `radio_group_${index}`;
if (container) {
const containerIndex = Array.from(document.querySelectorAll('.form-field, .field-container, .radio-group')).indexOf(container);
groupName = `radio_group_${containerIndex}`;
}
// Apply the same name to all radios in the same container
const siblingRadios = container ? container.querySelectorAll('input[type="radio"]') : [radio];
siblingRadios.forEach(siblingRadio => {
if (!siblingRadio.name) {
siblingRadio.name = groupName;
}
});
console.log(`✅ Fixed radio group: ${groupName}`);
}
});
console.log('✅ Form validation fixes completed');
}
function addCalendlyBookingLink() {
// Find the form container
const forms = document.querySelectorAll('form, .form-container, .paperform-form, .form-content');
if (forms.length > 0) {
const form = forms[0];
// Create the Calendly booking section
const calendlySection = document.createElement('div');
calendlySection.innerHTML = `
📅 Ready to Schedule Your Call?
Click the button below to view available times and book your 30-minute consultation instantly.
🚀 Book Your Time Slot Now
Available times shown in your timezone • Takes less than 1 minute
`;
// Try different insertion methods
try {
// Method 1: Insert at the beginning of the form
if (form.firstChild) {
form.insertBefore(calendlySection, form.firstChild);
console.log('✅ Added Calendly booking link at top of form');
} else {
form.appendChild(calendlySection);
console.log('✅ Added Calendly booking link to form');
}
} catch (insertError) {
console.log('⚠️ Could not insert in form, trying alternatives:', insertError.message);
// Method 2: Try inserting after the form
try {
form.parentNode.insertBefore(calendlySection, form.nextSibling);
console.log('✅ Added Calendly booking link after form');
} catch (afterError) {
console.log('⚠️ Could not insert after form, trying body:', afterError.message);
// Method 3: Add to page body as absolute fallback
try {
document.body.insertBefore(calendlySection, document.body.firstChild);
console.log('✅ Added Calendly booking link to page body');
} catch (bodyError) {
console.log('❌ All insertion methods failed:', bodyError.message);
}
}
}
// Add tracking for the link click
const bookingLink = calendlySection.querySelector('a');
if (bookingLink) {
bookingLink.addEventListener('click', function() {
console.log('🎯 User clicked Calendly booking link');
// Optional: Track this event if you have analytics
if (typeof gtag !== 'undefined') {
gtag('event', 'calendly_link_click', {
'event_category': 'scheduling',
'event_label': 'booking_link'
});
}
});
}
} else {
console.log('⚠️ No form container found');
// Fallback: Add to page body
try {
const calendlySection = document.createElement('div');
calendlySection.innerHTML = `
`;
document.body.appendChild(calendlySection);
console.log('✅ Added floating Calendly booking button');
} catch (floatingError) {
console.log('❌ Could not add floating button:', floatingError.message);
}
}
}
// Optional: Auto-populate form if user comes back from Calendly
// Check if there's a return parameter or specific URL pattern
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('scheduled') === 'true') {
console.log('🎉 User returned from successful Calendly booking');
// You could show a success message or auto-fill some fields
setTimeout(() => {
const successMessage = document.createElement('div');
successMessage.innerHTML = `
✅ Great! Your call is scheduled. Please complete this form to prepare for our meeting.
`;
const forms = document.querySelectorAll('form, .form-container, .paperform-form');
if (forms.length > 0) {
forms[0].insertBefore(successMessage, forms[0].firstChild);
}
}, 500);
}