Powered By Paperform
// 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 = `

📅 Schedule Your Call

Book Now
`; 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); }