// Prospect Form Embed Code // Copy and paste this code into your website to embed the prospect form (function() { // Create a container for the form var container = document.createElement('div'); container.id = 'prospect-form-container'; document.currentScript.parentNode.insertBefore(container, document.currentScript); // Create and append styles var styles = document.createElement('style'); styles.textContent = ` /* Base styles for the form */ #prospect-form-container { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #333; max-width: 800px; margin: 0 auto; } .prospect-form-wrapper { background-color: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 30px; margin: 20px 0; } .prospect-form-header { text-align: center; margin-bottom: 30px; } .prospect-form-header h2 { font-size: 24px; margin-bottom: 10px; color: #333; } .prospect-form-header p { font-size: 16px; color: #666; margin: 0; } /* Form progress bar */ .form-progress { display: flex; justify-content: space-between; margin-bottom: 30px; position: relative; } .form-progress::before { content: ''; position: absolute; top: 15px; left: 0; right: 0; height: 2px; background-color: #e0e0e0; z-index: 1; } .progress-step { position: relative; z-index: 2; text-align: center; flex: 1; } .step-number { width: 30px; height: 30px; border-radius: 50%; background-color: #e0e0e0; color: #666; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-weight: 600; font-size: 14px; } .step-number.active { background-color: var(--primary-color, #4a6fdc); color: white; } .step-number.completed { background-color: #4CAF50; color: white; } .step-label { font-size: 14px; color: #666; } /* Form layout */ .form-section { margin-bottom: 30px; } .form-section-title { font-size: 18px; margin-bottom: 20px; color: #333; border-bottom: 1px solid #eee; padding-bottom: 10px; } .form-row { display: flex; flex-wrap: wrap; margin: 0 -10px 15px; } .form-group { flex: 1 0 calc(50% - 20px); margin: 0 10px 15px; min-width: 200px; } /* Form controls */ .form-label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 14px; color: #333; } .form-required { color: #e53935; margin-left: 3px; } .form-input, .form-select, .form-textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; color: #333; background-color: #fff; transition: border-color 0.2s; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--primary-color, #4a6fdc); outline: none; } .form-input.error, .form-select.error, .form-textarea.error { border-color: #e53935; } .form-textarea { min-height: 100px; resize: vertical; } .form-error { display: none; color: #e53935; font-size: 12px; margin-top: 5px; } /* Checkbox and radio styles */ .form-checkbox-group, .form-radio-group { display: flex; flex-direction: column; gap: 10px; } .form-checkbox-item, .form-radio-item { display: flex; align-items: center; } .form-checkbox, .form-radio { margin-right: 10px; } .form-checkbox-label, .form-radio-label { font-size: 14px; color: #333; } /* Form actions */ .form-actions { display: flex; justify-content: flex-end; margin-top: 30px; } .form-submit { background-color: var(--primary-color, #4a6fdc); color: white; border: none; border-radius: 4px; padding: 12px 24px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.2s; } .form-submit:hover { background-color: var(--primary-hover, #3a5fc8); } .form-submit:disabled { background-color: #ccc; cursor: not-allowed; } /* Loading spinner */ .loading-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; animation: spin 1s ease-in-out infinite; margin-right: 8px; } @keyframes spin { to { transform: rotate(360deg); } } /* Success message */ .form-success { text-align: center; padding: 40px 20px; } .success-icon { width: 60px; height: 60px; background-color: #4CAF50; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 30px; } .success-title { font-size: 24px; margin-bottom: 15px; color: #333; } .success-message { font-size: 16px; color: #666; max-width: 500px; margin: 0 auto; } /* Responsive styles */ @media (max-width: 768px) { .form-group { flex: 1 0 100%; } .prospect-form-wrapper { padding: 20px; } } `; document.head.appendChild(styles); // Define the form initialization function window.initProspectForm = function(containerId, config) { // Default configuration const defaultConfig = { crmEndpoint: '', redirectUrl: '', companyName: 'Our Company', primaryColor: '#4a6fdc', showProgressBar: true, multiStep: true }; // Merge provided config with defaults const formConfig = { ...defaultConfig, ...config }; // Set primary color as CSS variable document.documentElement.style.setProperty('--primary-color', formConfig.primaryColor); document.documentElement.style.setProperty('--primary-hover', adjustColor(formConfig.primaryColor, -20)); // Get the container element const container = document.getElementById(containerId); if (!container) { console.error(`Container element with ID "${containerId}" not found.`); return; } // Form state let currentStep = 1; const totalSteps = 3; let formData = {}; let formErrors = {}; // Form field definitions const formFields = [ // Step 1: Personal Information { section: "Personal Information", step: 1, fields: [ { id: "firstName", label: "First Name", type: "text", required: true, placeholder: "Enter your first name" }, { id: "lastName", label: "Last Name", type: "text", required: true, placeholder: "Enter your last name" }, { id: "email", label: "Email Address", type: "email", required: true, placeholder: "Enter your email address" }, { id: "phone", label: "Phone Number", type: "tel", required: true, placeholder: "Enter your phone number" }, { id: "jobTitle", label: "Job Title", type: "text", required: true, placeholder: "Enter your job title" }, { id: "companyName", label: "Company Name", type: "text", required: true, placeholder: "Enter your company name" }, { id: "companyWebsite", label: "Company Website", type: "url", required: false, placeholder: "https://www.example.com" } ] }, // Step 2: Business Information { section: "Business Information", step: 2, fields: [ { id: "industryType", label: "Industry Type", type: "select", required: true, options: [ { value: "", label: "Select your industry" }, { value: "retail", label: "Retail" }, { value: "manufacturing", label: "Manufacturing" }, { value: "healthcare", label: "Healthcare" }, { value: "financial", label: "Financial Services" }, { value: "technology", label: "Technology" }, { value: "education", label: "Education" }, { value: "hospitality", label: "Hospitality" }, { value: "consulting", label: "Consulting" }, { value: "other", label: "Other" } ] }, { id: "companySize", label: "Company Size", type: "select", required: true, options: [ { value: "", label: "Select company size" }, { value: "1-10", label: "1-10 employees" }, { value: "11-50", label: "11-50 employees" }, { value: "51-200", label: "51-200 employees" }, { value: "201-500", label: "201-500 employees" }, { value: "501-1000", label: "501-1000 employees" }, { value: "1001+", label: "1001+ employees" } ] }, { id: "annualRevenue", label: "Annual Revenue", type: "select", required: false, options: [ { value: "", label: "Select annual revenue" }, { value: "less-1m", label: "Less than $1 million" }, { value: "1m-5m", label: "1-5 million" }, { value: "5m-10m", label: "5-10 million" }, { value: "10m-50m", label: "10-50 million" }, { value: "50m-100m", label: "50-100 million" }, { value: "100m+", label: "100+ million" } ] }, { id: "businessChallenges", label: "What are your biggest business challenges?", type: "checkbox", required: false, options: [ { value: "lead-generation", label: "Lead Generation" }, { value: "customer-retention", label: "Customer Retention" }, { value: "market-expansion", label: "Market Expansion" }, { value: "operational-efficiency", label: "Operational Efficiency" }, { value: "digital-transformation", label: "Digital Transformation" }, { value: "talent-acquisition", label: "Talent Acquisition" }, { value: "other", label: "Other" } ] }, { id: "decisionMaker", label: "Are you the decision maker for your company?", type: "radio", required: true, options: [ { value: "yes", label: "Yes" }, { value: "no", label: "No" }, { value: "partially", label: "Partially involved in decision making" } ] } ] }, // Step 3: Social Media & Marketing Information { section: "Social Media & Marketing Information", step: 3, fields: [ { id: "currentSocialMediaPlatforms", label: "Which social media platforms do you currently use for business?", type: "checkbox", required: false, options: [ { value: "facebook", label: "Facebook" }, { value: "instagram", label: "Instagram" }, { value: "twitter", label: "Twitter" }, { value: "linkedin", label: "LinkedIn" }, { value: "youtube", label: "YouTube" }, { value: "tiktok", label: "TikTok" }, { value: "pinterest", label: "Pinterest" }, { value: "none", label: "None" } ] }, { id: "socialMediaGoals", label: "What are your social media marketing goals?", type: "checkbox", required: false, options: [ { value: "brand-awareness", label: "Increase Brand Awareness" }, { value: "lead-generation", label: "Generate Leads" }, { value: "customer-engagement", label: "Improve Customer Engagement" }, { value: "website-traffic", label: "Drive Website Traffic" }, { value: "sales-conversion", label: "Increase Sales Conversion" }, { value: "customer-service", label: "Enhance Customer Service" }, { value: "other", label: "Other" } ] }, { id: "marketingBudget", label: "What is your monthly marketing budget?", type: "select", required: false, options: [ { value: "", label: "Select your budget range" }, { value: "less-1000", label: "Less than $1,000" }, { value: "1000-5000", label: "1,000-5,000" }, { value: "5000-10000", label: "5,000-10,000" }, { value: "10000-25000", label: "10,000-25,000" }, { value: "25000+", label: "25,000+" } ] }, { id: "currentMarketingChallenges", label: "What are your current marketing challenges?", type: "textarea", required: false, placeholder: "Please describe your current marketing challenges..." }, { id: "heardAboutUs", label: "How did you hear about us?", type: "select", required: false, options: [ { value: "", label: "Select an option" }, { value: "search", label: "Search Engine" }, { value: "social-media", label: "Social Media" }, { value: "referral", label: "Referral" }, { value: "advertisement", label: "Advertisement" }, { value: "event", label: "Event or Conference" }, { value: "other", label: "Other" } ] }, { id: "preferredContactMethod", label: "Preferred method of contact", type: "radio", required: true, options: [ { value: "email", label: "Email" }, { value: "phone", label: "Phone" }, { value: "both", label: "Both" } ] }, { id: "additionalComments", label: "Additional Comments or Questions", type: "textarea", required: false, placeholder: "Please share any additional information that might help us understand your needs better..." }, { id: "marketingConsent", label: "Marketing Consent", type: "checkbox", required: true, options: [ { value: "consent", label: `I agree to receive marketing communications from ${formConfig.companyName}. You can unsubscribe at any time.` } ] } ] } ]; // Render the form renderForm(); // Function to render the form function renderForm() { // Create form wrapper const formWrapper = document.createElement('div'); formWrapper.className = 'prospect-form-wrapper'; // Create form header const formHeader = document.createElement('div'); formHeader.className = 'prospect-form-header'; formHeader.innerHTML = `

Tell Us About You

Please provide your information to help us understand your needs better.

`; formWrapper.appendChild(formHeader); // Create form element const form = document.createElement('form'); form.className = 'prospect-form'; form.id = 'prospect-form'; form.noValidate = true; // Add progress bar if enabled if (formConfig.showProgressBar && formConfig.multiStep) { const progressBar = createProgressBar(); form.appendChild(progressBar); } // Filter fields for current step const currentStepFields = formConfig.multiStep ? formFields.filter(section => section.step === currentStep) : formFields; // Add form sections and fields currentStepFields.forEach(section => { const sectionElement = document.createElement('div'); sectionElement.className = 'form-section'; // Add section title const sectionTitle = document.createElement('h3'); sectionTitle.className = 'form-section-title'; sectionTitle.textContent = section.section; sectionElement.appendChild(sectionTitle); // Group fields into rows (2 fields per row where possible) let currentRow; section.fields.forEach((field, index) => { // Start a new row for every two fields or for textarea/checkbox/radio fields if (index % 2 === 0 || field.type === 'textarea' || field.type === 'checkbox' || field.type === 'radio') { currentRow = document.createElement('div'); currentRow.className = 'form-row'; sectionElement.appendChild(currentRow); } // Create field element const fieldElement = createFormField(field); // Full width for textarea, checkbox, and radio fields if (field.type === 'textarea' || field.type === 'checkbox' || field.type === 'radio') { fieldElement.style.flex = '1 0 100%'; } currentRow.appendChild(fieldElement); }); form.appendChild(sectionElement); }); // Add form actions const formActions = document.createElement('div'); formActions.className = 'form-actions'; // Add back button if not on first step if (formConfig.multiStep && currentStep> 1) { const backButton = document.createElement('button'); backButton.type = 'button'; backButton.className = 'form-back'; backButton.textContent = 'Previous'; backButton.style.marginRight = '10px'; backButton.style.backgroundColor = '#f0f0f0'; backButton.style.color = '#333'; backButton.style.border = 'none'; backButton.style.borderRadius = '4px'; backButton.style.padding = '12px 24px'; backButton.style.fontSize = '16px'; backButton.style.fontWeight = '600'; backButton.style.cursor = 'pointer'; backButton.addEventListener('click', () => { currentStep--; renderForm(); }); formActions.appendChild(backButton); } // Add next/submit button const submitButton = document.createElement('button'); submitButton.type = 'submit'; submitButton.className = 'form-submit'; if (formConfig.multiStep && currentStep < totalSteps) { submitButton.textContent = 'Next'; } else { submitButton.textContent = 'Submit'; } formActions.appendChild(submitButton); form.appendChild(formActions); // Add form to wrapper formWrapper.appendChild(form); // Clear container and add form wrapper container.innerHTML = ''; container.appendChild(formWrapper); // Add form submission handler form.addEventListener('submit', handleFormSubmit); // Populate form with existing data populateFormWithData(); } // Function to create progress bar function createProgressBar() { const progressContainer = document.createElement('div'); progressContainer.className = 'form-progress'; for (let i = 1; i <= totalSteps; i++) { const stepElement = document.createElement('div'); stepElement.className = 'progress-step'; const stepNumber = document.createElement('div'); stepNumber.className = 'step-number'; if (i < currentStep) { stepNumber.className += ' completed'; stepNumber.innerHTML = '✓'; } else if (i === currentStep) { stepNumber.className += ' active'; stepNumber.textContent = i; } else { stepNumber.textContent = i; } const stepLabel = document.createElement('div'); stepLabel.className = 'step-label'; // Set step labels switch(i) { case 1: stepLabel.textContent = 'Personal Info'; break; case 2: stepLabel.textContent = 'Business Info'; break; case 3: stepLabel.textContent = 'Marketing Info'; break; default: stepLabel.textContent = `Step ${i}`; } stepElement.appendChild(stepNumber); stepElement.appendChild(stepLabel); progressContainer.appendChild(stepElement); } return progressContainer; } // Function to create form field function createFormField(field) { const fieldContainer = document.createElement('div'); fieldContainer.className = 'form-group'; // Create label const label = document.createElement('label'); label.className = 'form-label'; label.setAttribute('for', field.id); label.textContent = field.label; // Add required indicator if (field.required) { const requiredSpan = document.createElement('span'); requiredSpan.className = 'form-required'; requiredSpan.textContent = '*'; label.appendChild(requiredSpan); } fieldContainer.appendChild(label); // Create field based on type switch (field.type) { case 'text': case 'email': case 'tel': case 'url': const input = document.createElement('input'); input.type = field.type; input.id = field.id; input.name = field.id; input.className = 'form-input'; input.placeholder = field.placeholder || ''; input.required = field.required; // Add validation attributes if (field.type === 'email') { input.pattern = "[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"; } else if (field.type === 'tel') { input.pattern = "[0-9\-\+\s\(\)]+"; } fieldContainer.appendChild(input); // Add error message element const errorElement = document.createElement('div'); errorElement.className = 'form-error'; errorElement.textContent = `Please enter a valid ${field.label.toLowerCase()}`; fieldContainer.appendChild(errorElement); break; case 'select': const select = document.createElement('select'); select.id = field.id; select.name = field.id; select.className = 'form-select'; select.required = field.required; field.options.forEach(option => { const optionElement = document.createElement('option'); optionElement.value = option.value; optionElement.textContent = option.label; select.appendChild(optionElement); }); fieldContainer.appendChild(select); // Add error message element const selectError = document.createElement('div'); selectError.className = 'form-error'; selectError.textContent = `Please select a ${field.label.toLowerCase()}`; fieldContainer.appendChild(selectError); break; case 'textarea': const textarea = document.createElement('textarea'); textarea.id = field.id; textarea.name = field.id; textarea.className = 'form-textarea'; textarea.placeholder = field.placeholder || ''; textarea.required = field.required; fieldContainer.appendChild(textarea); // Add error message element const textareaError = document.createElement('div'); textareaError.className = 'form-error'; textareaError.textContent = `Please enter a valid ${field.label.toLowerCase()}`; fieldContainer.appendChild(textareaError); break; case 'checkbox': const checkboxGroup = document.createElement('div'); checkboxGroup.className = 'form-checkbox-group'; field.options.forEach(option => { const checkboxItem = document.createElement('div'); checkboxItem.className = 'form-checkbox-item'; const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.id = `${field.id}-${option.value}`; checkbox.name = field.id; checkbox.value = option.value; checkbox.className = 'form-checkbox'; const checkboxLabel = document.createElement('label'); checkboxLabel.className = 'form-checkbox-label'; checkboxLabel.setAttribute('for', `${field.id}-${option.value}`); checkboxLabel.textContent = option.label; checkboxItem.appendChild(checkbox); checkboxItem.appendChild(checkboxLabel); checkboxGroup.appendChild(checkboxItem); }); fieldContainer.appendChild(checkboxGroup); // Add error message element if required if (field.required) { const checkboxError = document.createElement('div'); checkboxError.className = 'form-error'; checkboxError.textContent = `Please select at least one option`; fieldContainer.appendChild(checkboxError); } break; case 'radio': const radioGroup = document.createElement('div'); radioGroup.className = 'form-radio-group'; field.options.forEach(option => { const radioItem = document.createElement('div'); radioItem.className = 'form-radio-item'; const radio = document.createElement('input'); radio.type = 'radio'; radio.id = `${field.id}-${option.value}`; radio.name = field.id; radio.value = option.value; radio.className = 'form-radio'; radio.required = field.required; const radioLabel = document.createElement('label'); radioLabel.className = 'form-radio-label'; radioLabel.setAttribute('for', `${field.id}-${option.value}`); radioLabel.textContent = option.label; radioItem.appendChild(radio); radioItem.appendChild(radioLabel); radioGroup.appendChild(radioItem); }); fieldContainer.appendChild(radioGroup); // Add error message element if (field.required) { const radioError = document.createElement('div'); radioError.className = 'form-error'; radioError.textContent = `Please select an option`; fieldContainer.appendChild(radioError); } break; } return fieldContainer; } // Function to populate form with existing data function populateFormWithData() { Object.keys(formData).forEach(fieldId => { const field = document.getElementById(fieldId); if (field) { if (field.type === 'checkbox') { field.checked = formData[fieldId]; } else { field.value = formData[fieldId]; } } else { // Handle checkbox groups and radio buttons if (Array.isArray(formData[fieldId])) { // Checkbox groups formData[fieldId].forEach(value => { const checkbox = document.getElementById(`${fieldId}-${value}`); if (checkbox) { checkbox.checked = true; } }); } else { // Radio buttons const radio = document.getElementById(`${fieldId}-${formData[fieldId]}`); if (radio) { radio.checked = true; } } } }); } // Function to collect form data function collectFormData() { const form = document.getElementById('prospect-form'); const formElements = form.elements; // Get all form fields for the current step const currentStepFields = formConfig.multiStep ? formFields.filter(section => section.step === currentStep) : formFields; const flatFields = currentStepFields.flatMap(section => section.fields); // Process each field flatFields.forEach(field => { if (field.type === 'checkbox') { // Handle checkbox groups const checkboxValues = []; field.options.forEach(option => { const checkbox = document.getElementById(`${field.id}-${option.value}`); if (checkbox && checkbox.checked) { checkboxValues.push(option.value); } }); if (checkboxValues.length> 0 || field.required) { formData[field.id] = checkboxValues; } } else if (field.type === 'radio') { // Handle radio groups field.options.forEach(option => { const radio = document.getElementById(`${field.id}-${option.value}`); if (radio && radio.checked) { formData[field.id] = option.value; } }); } else { // Handle other input types const input = document.getElementById(field.id); if (input && input.value) { formData[field.id] = input.value; } } }); return formData; } // Function to validate form function validateForm() { const form = document.getElementById('prospect-form'); const formElements = form.elements; let isValid = true; formErrors = {}; // Get all form fields for the current step const currentStepFields = formConfig.multiStep ? formFields.filter(section => section.step === currentStep) : formFields; const flatFields = currentStepFields.flatMap(section => section.fields); // Validate each field flatFields.forEach(field => { if (field.required) { if (field.type === 'checkbox') { // Check if at least one checkbox is checked let isChecked = false; field.options.forEach(option => { const checkbox = document.getElementById(`${field.id}-${option.value}`); if (checkbox && checkbox.checked) { isChecked = true; } }); if (!isChecked) { isValid = false; formErrors[field.id] = 'Please select at least one option'; // Highlight the first checkbox in the group const firstCheckbox = document.getElementById(`${field.id}-${field.options[0].value}`); if (firstCheckbox) { firstCheckbox.parentElement.classList.add('error'); } } } else if (field.type === 'radio') { // Check if a radio button is selected let isSelected = false; field.options.forEach(option => { const radio = document.getElementById(`${field.id}-${option.value}`); if (radio && radio.checked) { isSelected = true; } }); if (!isSelected) { isValid = false; formErrors[field.id] = 'Please select an option'; // Highlight the first radio in the group const firstRadio = document.getElementById(`${field.id}-${field.options[0].value}`); if (firstRadio) { firstRadio.parentElement.classList.add('error'); } } } else { // Validate other input types const input = document.getElementById(field.id); if (input) { let fieldValid = true; // Check if empty if (!input.value.trim()) { fieldValid = false; formErrors[field.id] = `Please enter your ${field.label.toLowerCase()}`; } // Validate email format else if (field.type === 'email' && !/^[^s@]+@[^s@]+.[^s@]+$/.test(input.value)) { fieldValid = false; formErrors[field.id] = 'Please enter a valid email address'; } // Validate phone format else if (field.type === 'tel' && !/^[0-9-+s()]+$/.test(input.value)) { fieldValid = false; formErrors[field.id] = 'Please enter a valid phone number'; } // Validate URL format else if (field.type === 'url' && input.value && !/^(https?://)?([da-z.-]+).([a-z.]{2,6})([/w .-]*)*/?$/.test(input.value)) { fieldValid = false; formErrors[field.id] = 'Please enter a valid URL'; } if (!fieldValid) { isValid = false; input.classList.add('error'); // Show error message const errorElement = input.nextElementSibling; if (errorElement && errorElement.classList.contains('form-error')) { errorElement.textContent = formErrors[field.id]; errorElement.style.display = 'block'; } } else { input.classList.remove('error'); // Hide error message const errorElement = input.nextElementSibling; if (errorElement && errorElement.classList.contains('form-error')) { errorElement.style.display = 'none'; } } } } } }); return isValid; } // Function to handle form submission function handleFormSubmit(event) { event.preventDefault(); // Collect form data collectFormData(); // Validate form const isValid = validateForm(); if (isValid) { if (formConfig.multiStep && currentStep < totalSteps) { // Move to next step currentStep++; renderForm(); } else { // Submit form data submitFormData(); } } } // Function to submit form data to CRM function submitFormData() { // Show loading state const form = document.getElementById('prospect-form'); const submitButton = form.querySelector('.form-submit'); const originalButtonText = submitButton.textContent; submitButton.disabled = true; submitButton.innerHTML = 'Submitting...'; // Prepare data for CRM const crmData = { ...formData, // Add any additional metadata submittedAt: new Date().toISOString(), source: window.location.href }; // If there's no CRM endpoint configured, simulate success if (!formConfig.crmEndpoint) { setTimeout(() => { showSuccessMessage(); }, 1500); return; } // Submit data to CRM endpoint fetch(formConfig.crmEndpoint, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(crmData) }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { // Show success message showSuccessMessage(); }) .catch(error => { console.error('Error submitting form:', error); // Show error message submitButton.disabled = false; submitButton.innerHTML = originalButtonText; // Create error message if it doesn't exist let errorMessage = form.querySelector('.form-error-message'); if (!errorMessage) { errorMessage = document.createElement('div'); errorMessage.className = 'form-error-message'; errorMessage.style.color = 'var(--error-color, #e53935)'; errorMessage.style.textAlign = 'center'; errorMessage.style.marginTop = '15px'; form.querySelector('.form-actions').appendChild(errorMessage); } errorMessage.textContent = 'There was an error submitting your form. Please try again.'; }); } // Function to show success message function showSuccessMessage() { const container = document.getElementById(containerId); const formWrapper = container.querySelector('.prospect-form-wrapper'); // Create success message const successMessage = document.createElement('div'); successMessage.className = 'form-success'; successMessage.innerHTML = `

Thank You!

Your information has been submitted successfully. We'll be in touch with you shortly.

`; // Replace form with success message formWrapper.innerHTML = ''; formWrapper.appendChild(successMessage); // Redirect if URL is provided if (formConfig.redirectUrl) { setTimeout(() => { window.location.href = formConfig.redirectUrl; }, 3000); } } }; // Helper function to adjust color brightness function adjustColor(color, amount) { return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2)); } // Initialize the form with the provided configuration initProspectForm('prospect-form-container', { crmEndpoint: 'https://your-crm-endpoint.com/api/prospects', // Replace with your actual CRM endpoint redirectUrl: 'https://your-domain.com/thank-you', // Optional: URL to redirect after submission companyName: 'Your Company Name', // Replace with your company name primaryColor: '#4a6fdc', // Optional: Customize the primary color showProgressBar: true, // Optional: Show/hide progress bar multiStep: true // Optional: Enable/disable multi-step form }); })();