cant get my form to send...

[xnyjyh]

this is my code for my custom form which includes all html, scripts, and css. Can someone please help me to get this form to send please :-)

code:

Get A Free Quote

<!-- Promotional container with pricing information -->
<div class="promo-container">
    <p class="promo-text">⭐ Just $59.00 For The Entire First 4 Weeks!</p>
    <center><p style="font-weight:bold;">+ Get An Initial Cleanup For Free</p><p style="margin-top:-10px;">(A $29.00 Value at no cost to you!)</p></center>
</div>

<!-- Dog count slider with label and custom thumb -->
<div class="slider-section">
    <label for="dogCountSlider" class="slider-label"><b>Number of Dogs:</b></label>
    <div class="slider-wrapper">
        <input type="range" id="dogCountSlider" min="1" max="4" step="1" value="1" oninput="updateSliderBackground(this); updateDogCountLabel(this.value)">
        <div class="slider-labels">
            <span id="dogLabel1">1 Dog</span>
            <span id="dogLabel2">2 Dogs</span>
            <span id="dogLabel3">3 Dogs</span>
            <span id="dogLabel4">4 Dogs</span>
        </div>
    </div>
</div>

<!-- Frequency slider with label and custom thumb -->
<div class="slider-section frequency-section">
    <label for="frequencySlider" class="slider-label"><b>Cleanup Frequency:</b></label>
    <div class="slider-wrapper">
        <input type="range" id="frequencySlider" min="1" max="4" step="1" value="2" oninput="updateSliderBackground(this); updateFrequencyLabel(this.value)">
        <div class="slider-labels">
            <span id="freqLabel1">Twice A Week</span>
            <span id="freqLabel2" style="font-weight: bold;">Weekly</span>
            <span id="freqLabel3">Bi-weekly</span>
            <span id="freqLabel4">Monthly</span>
        </div>
    </div>
</div>

<!-- Button to trigger price calculation and show price and form -->
<button onclick="showPriceAndForm()" class="full-width-button">Get Free Quote</button>

<!-- Price Container (initially hidden, appears below button) -->
<div id="priceContainer" class="promo-container" style="display: none; margin-top: 20px;">
    <div class="estimate-container">
        <p class="estimate-title">WEEKLY SERVICE ESTIMATE</p>
        <p class="estimate-price">$<span id="totalPrice">0</span> <span class="per-cleanup">per cleanup</span></p>
        <p class="estimate-description">You’re just one step away from a cleaner, poop-free yard! Sign up below.</p>
        <hr style="color:#5BC0DE">
        <p class="FREE Initial Cleanup with Ongoing Service</p>
        <hr style="color:#5BC0DE">
        <p class="estimate-details">This estimate is based on a typical yard size. Limited to one promotion per customer.</p>
        <div class="quarterly-discount">
            <label><input type="checkbox"> Save 10% with Quarterly Billing!</label>
            <p>Enjoy a 10% discount on your subscription when you choose quarterly billing.</p>
        </div>
    </div>
</div>

<!-- Signup Form Container (initially hidden, appears below price container) -->
<div id="signupFormContainer" class="signup-form-container" style="display: none; margin-top: 20px;">
    <form id="contact-form" class="signup-form" data-service="service_dum6gqe" data-template="template_vyogkou" data-user="visRXDyBAVpOELQ4_">
<input type="hidden" id="hiddenDiscount" name="discount">

<label>First Name*<input type="text" name="firstName" required></label>
<label>Last Name*<input type="text" name="lastName" required></label>
<label>Phone Number*<input type="tel" name="phoneNumber" required></label>
<label>Your Email Address*<input type="email" name="email" required></label>
<label>Home Address*<input type="text" name="homeAddress" required></label>
<label>City*<input type="text" name="city" required></label>
<label>Province*
    <select name="province" required>
        <option value="">Please Select</option>
        <option value="AB">Alberta</option>
        <option value="BC">British Columbia</option>
        <option value="MB">Manitoba</option>
        <option value="NB">New Brunswick</option>
        <option value="NL">Newfoundland and Labrador</option>
        <option value="NS">Nova Scotia</option>
        <option value="ON">Ontario</option>
        <option value="PE">Prince Edward Island</option>
        <option value="QC">Quebec</option>
        <option value="SK">Saskatchewan</option>
        <option value="NT">Northwest Territories</option>
        <option value="NU">Nunavut</option>
        <option value="YT">Yukon</option>
    </select>
</label>

<!-- Number of Dogs Radio Buttons -->
<div class="radio-section dog-count-section">
    <span class="radio-section-title"><b>Number of Dogs:*</b></span>
    <div id="dogCountOptions">
        <label><input type="radio" name="dogCount" value="1" onclick="updateDogInfoFields(1)" required> 1 Dog</label>
        <label><input type="radio" name="dogCount" value="2" onclick="updateDogInfoFields(2)" required> 2 Dogs</label>
        <label><input type="radio" name="dogCount" value="3" onclick="updateDogInfoFields(3)" required> 3 Dogs</label>
        <label><input type="radio" name="dogCount" value="4" onclick="updateDogInfoFields(4)" required> 4 Dogs</label>
    </div>
</div>

<!-- Frequency Radio Buttons -->
<div class="radio-section frequency-section">
    <span class="radio-section-title"><b>Cleanup Frequency:*</b></span>
    <div id="frequencyOptions">

Weekly
Twice a Week
Bi-weekly
Monthly

<!-- Container for Dog Info Fields -->
<div id="dogInfoContainer"></div>

<label>Is it safe for us to be in the yard with your dog?*
    <select name="dogSafety" required>
        <option value="">Please Select</option>
        <option value="Yes">Yes</option>
        <option value="No">No</option>
    </select>
</label>
<label>Additional comments about your dog<input type="text" name="dogComments"></label>

<label>Where is your gate located?*
    <select name="gateLocation" required>
        <option value="">Please Select</option>
        <option value="left">Left</option>
        <option value="right">Right</option>
        <option value="alley">Alley</option>
        <option value="no_gate">No Gate</option>
        <option value="other">Other</option>
    </select>
</label>

<label>Cleanup Notifications
    <select name="cleanupNotification" required>
        <option value="">Please Select</option>
        <option value="on_the_way">On the way</option>
        <option value="complete">Complete</option>
    </select>
</label>
<small style="display: block; margin-top: -10px; font-size: 12px; color: #000;">What cleanup message would you like to receive?</small>

<label>Notification Type
    <select name="notificationType" required>
        <option value="">Please Select</option>
        <option value="text">Text</option>
        <option value="email">Email</option>
    </select>
</label>
<small style="display: block; margin-top: -10px; font-size: 12px; color: #000;">How would you like to receive cleanup notifications?</small>

<label>How did you hear about us?*
    <select name="referralSource" required>
        <option value="">Please Select</option>
        <option value="search_engine">Search Engine</option>
        <option value="previous_client">Previous Client</option>
        <option value="family_friends">Family or Friends</option>
        <option value="social_media">Social Media</option>
        <option value="flier">Flier</option>
        <option value="gift_certificate">Gift Certificate</option>
        <option value="other">Other</option>
    </select>

Get Started!

</label>

</div>

<script> // Initialize the slider background on page load function updateSliderBackground(slider) { const value = (slider.value - slider.min) / (slider.max - slider.min) * 100; slider.style.background = `linear-gradient(to right, #5BC0DE ${value}%, #D3D3D3 ${value}%)`; } function updateDogCountLabel(value) { document.querySelectorAll('.slider-labels span').forEach(el => el.style.fontWeight = 'normal'); document.getElementById(`dogLabel${value}`).style.fontWeight = 'bold'; } function updateFrequencyLabel(value) { document.querySelectorAll('.slider-labels span').forEach(el => el.style.fontWeight = 'normal'); document.getElementById(`freqLabel${value}`).style.fontWeight = 'bold'; } function calculatePrice() { const dogCount = parseInt(document.getElementById('dogCountSlider').value); const frequencyValue = parseInt(document.getElementById('frequencySlider').value); const frequencies = { 1: 'twice', 2: 'weekly', 3: 'biweekly', 4: 'monthly' }; const prices = { 1: { twice: 60, weekly: 40, biweekly: 30, monthly: 20 }, 2: { twice: 110, weekly: 70, biweekly: 55, monthly: 35 }, 3: { twice: 130, weekly: 90, biweekly: 70, monthly: 45 }, 4: { twice: 150, weekly: 100, biweekly: 85, monthly: 55 }, }; const frequency = frequencies[frequencyValue]; let totalPrice = prices[dogCount][frequency]; // Apply 10% discount if quarterly billing is selected const discountCheckbox = document.getElementById('discountCheckbox'); if (discountCheckbox && discountCheckbox.checked) { totalPrice = (totalPrice * 0.9).toFixed(2); // Apply 10% discount } document.getElementById('totalPrice').innerText = totalPrice; } function showPriceAndForm() { calculatePrice(); document.getElementById('priceContainer').style.display = 'block'; document.getElementById('signupFormContainer').style.display = 'block'; } // Add event listener to update the price when the checkbox is changed const discountCheckbox = document.getElementById('discountCheckbox'); if (discountCheckbox) { discountCheckbox.addEventListener('change', calculatePrice); } // Initialize slider backgrounds on page load document.querySelectorAll('input[type="range"]').forEach(slider => { updateSliderBackground(slider); }); function updateDogInfoFields(dogCount) { const dogInfoContainer = document.getElementById("dogInfoContainer"); dogInfoContainer.innerHTML = ""; // Clear previous fields for (let i = 1; i <= dogCount; i++) { const dogInfoField = `

Dog ${i}'s Name Is it safe for us to be in the yard with your dog? Please Select Yes No Additional comments about your dog

`; dogInfoContainer.insertAdjacentHTML("beforeend", dogInfoField); } } // Update hidden discount value based on checkbox selection if (discountCheckbox) { discountCheckbox.addEventListener('change', function() { document.getElementById('hiddenDiscount').value = this.checked ? '10% Off' : ''; }); } </script> <script> document.getElementById('contactForm').addEventListener('submit', function(event) { event.preventDefault(); // Prevent default form submission behavior // Replace with your actual service and template IDs const serviceID = 'service_dum6gqe'; const templateID = 'template_vyogkou'; emailjs.sendForm(serviceID, templateID, this) .then(function(response) { console.log('SUCCESS!', response.status, response.text); alert('SUCCESS! Your form has been submitted.'); }, function(error) { console.error('FAILED...', error); alert('FAILED... Please try again later.'); }); }); </script> <style> /* Main container styling */ .price-calculator-container { max-width: 600px; margin: 20px auto; padding: 40px; border-radius: 30px; background-color: #ffffff; font-family: 'Montserrat', sans-serif; padding-top:0px; } /* Main title styling */ .main-title { font-size: 55px; font-family: 'Lilita One', sans-serif; color: black; } /* Promo container styling */ .promo-container { background-color: rgba(91, 192, 222, 0.25); border: 3px solid #5BC0DE; border-radius: 15px; padding: 15px; margin: 30px 0; text-align: center; } .promo-text { font-size: 17px; font-weight: bold; color: black; } /* Slider section styling */ .slider-section { margin-bottom: 50px; } .frequency-section { margin-top: 90px; } /* Slider label alignment */ .slider-wrapper { position: relative; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 5px; background: #D3D3D3; outline: none; margin-bottom: 10px; } /* Custom thumb images for sliders */ #dogCountSlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 50px; height: 50px; background: url('https://cdn.shopify.com/s/files/1/0911/5890/5107/files/dog-slider_597de404-82e3-4d00-a679-abe57518cd01.png?v=1731122352') no-repeat center center; background-size: contain; cursor: pointer; } #dogCountSlider::-moz-range-thumb { width: 50px; height: 50px; background: url('https://cdn.shopify.com/s/files/1/0911/5890/5107/files/dog-slider_597de404-82e3-4d00-a679-abe57518cd01.png?v=1731122352') no-repeat center center; background-size: contain; cursor: pointer; } #frequencySlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 50px; height: 50px; background: url('https://cdn.shopify.com/s/files/1/0911/5890/5107/files/frequency_eefc549b-d40f-403d-a67c-8d376b384cfb.png?v=1731122137') no-repeat center center; background-size: contain; cursor: pointer; } #frequencySlider::-moz-range-thumb { width: 50px; height: 50px; background: url('https://cdn.shopify.com/s/files/1/0911/5890/5107/files/frequency_eefc549b-d40f-403d-a67c-8d376b384cfb.png?v=1731122137') no-repeat center center; background-size: contain; cursor: pointer; } /* Perfectly centered slider labels */ .slider-labels { display: flex; justify-content: space-between; font-size: 0.9em; color: black; margin-top: -20px; position: relative; top: 15px; text-align: center; } .slider-labels span { flex-basis: 25%; color: black; white-space: nowrap; } /* Full-width button styling */ .full-width-button { width: 100%; padding: 15px; font-size: 22px; border-radius: 50px; background-color: #FFD966; color: black; cursor: pointer; border: none; transition: background-color 0.3s, color 0.3s; font-family: 'Lilita One', sans-serif; margin-top: 60px; margin-bottom: 40px; } .full-width-button:hover { background-color: #000; color: #fff; } /* Positioning for dog count labels */ #dogLabel1 { position: absolute; left: 4%; /* Adjust percentage as needed */ transform: translateX(-50%); } #dogLabel2 { position: absolute; left: 35.5%; /* Adjust percentage as needed */ transform: translateX(-50%); } #dogLabel3 { position: absolute; left: 65.5%; /* Adjust percentage as needed */ transform: translateX(-50%); } #dogLabel4 { position: absolute; left: 94%; /* Adjust percentage as needed */ transform: translateX(-50%); } /* Positioning for frequency labels */ #freqLabel1 { position: absolute; left: 11%; /* Adjust percentage as needed */ transform: translateX(-50%); } #freqLabel2 { position: absolute; left: 36%; /* Adjust percentage as needed */ transform: translateX(-50%); } #freqLabel3 { position: absolute; left: 66%; /* Adjust percentage as needed */ transform: translateX(-50%); } #freqLabel4 { position: absolute; left: 94%; /* Adjust percentage as needed */ transform: translateX(-50%); } /* General positioning settings for slider labels */ .slider-labels { position: relative; top: 40px; /* Adjust this as needed to position labels closer or further from slider */ } .slider-label { display: block; margin-bottom: 20px; /* Adjust this value to increase or decrease spacing */ color: black; font-weight: bold; } </style> <style> /* Condensed Price Box Styling */ #priceContainer { background-color: #eaf6f6; /* Soft background color */ border: 2px solid #5BC0DE; border-radius: 15px; padding: 15px; margin-top: 0px; font-family: 'Montserrat', sans-serif; color: black; text-align: left; } .estimate-title { font-size: 18px; font-weight: bold; color: black; margin-bottom: 10px; } .estimate-price { font-size: 36px; color: #5BC0DE; /* Color for price */ font-weight: bold; margin: 10px 0; } .per-cleanup { font-size: 18px; color: black; } .estimate-description { font-size: 16px; color: #000; margin: 10px 0; } .first-cleanup { font-size: 18px; color: #5BC0DE; font-weight: bold; margin: 15px 0; } .estimate-details { font-size: 14px; color: black; margin: 10px 0; } .quarterly-discount { background-color: #FFECB3; padding: 10px; border-radius: 10px; text-align: left; margin-bottom: 20px; } .quarterly-discount label { font-weight: bold; color: black; display: block; margin-bottom: 5px; } .quarterly-discount p { font-size: 14px; color: black; margin: 0; } #priceContainer hr { margin: 10px 0; /* Reduced top and bottom margins */ border: none; border-top: 1px solid #5BC0DE; } </style> <style> /* Signup Form Styling */ .signup-form { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; } .signup-form label { font-weight: bold; color: black; font-family: 'Montserrat', sans-serif; display: flex; flex-direction: column; font-size: 16px; } .signup-form input[type="text"], .signup-form input[type="email"], .signup-form select { width: 100%; padding: 10px; font-size: 14px; border-radius: 6px; border: 1px solid #5BC0DE; background-color: rgba(91, 192, 222, 0.15); outline: none; font-family: 'Montserrat', sans-serif; } .signup-form input[type="text"]:focus, .signup-form input[type="email"]:focus, .signup-form select:focus { border-color: #FFD966; background-color: rgba(91, 192, 222, 0.25); } .signup-form input[type="text"]::placeholder, .signup-form input[type="email"]::placeholder { color: #888; font-style: italic; } .signup-form select { cursor: pointer; } .signup-form select option { color: black; background-color: white; } .signup-form p { margin: 0; font-size: 14px; color: #333; } </style> <style> /* Style for dynamically generated dog info sections */ .dog-info-section { display: flex; flex-direction: column; gap: 8px; /* Space between elements within each dog section */ margin-bottom: 20px; /* Space between each dog's section */ } /* Ensure dropdowns and inputs have consistent heights and spacing */ .dog-info-section label { font-weight: bold; color: black; margin-bottom: 5px; /* Reduces extra spacing under each label */ } .dog-info-section select, .dog-info-section input { margin-bottom: 10px; /* Adjusts spacing at the bottom of each field */ } </style> <style> input[type="tel"], input[type="text"], input[type="email"], select { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #D3D3D3; border-radius: 5px; box-sizing: border-box; background-color: #E0F7FA; /* Adjust if needed */ color: #333; } input[type="tel"]:focus, input[type="text"]:focus, input[type="email"]:focus, select:focus { border-color: #5BC0DE; outline: none; } </style> <style> /* Style the container for radio buttons */ .radio-section { margin-bottom: 20px; padding: 10px 0; } /* Style each radio label for uniform appearance */ .radio-section label { font-family: 'Montserrat', sans-serif; font-weight: normal; color: black; margin-right: 15px; display: inline-block; } /* Style radio buttons */ .radio-section input[type="radio"] { margin-right: 8px; margin-top:-4px; transform: scale(1.2); /* Adjust for desired size */ vertical-align: middle; } /* Optional: Style the section title */ .radio-section-title { font-weight: bold; color: black; margin-bottom: 5px; font-size: 1em; display: block; } form .dog-count-section { margin-bottom: -15px; /* Adjust as needed */ } form .frequency-section { margin-top: 0px; /* Adjust as needed */ margin-bottom: 0px; } form .dog-count-section label, form .frequency-section label { font-size: 0.9em; /* Adjust this value to match the slider label text size */ font-weight: normal; /* Match the style of the slider labels */ } .signup-form label { display: block; margin-bottom: 5px; /* Adjust as needed for desired spacing */ } .signup-form label input, .signup-form label select { margin-top: 0px; /* Adds a bit of space between the label and input */ } </style>

[xr0master]

Please fix the code
https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

[xr0master]

You have the issue with the form ID

[xnyjyh]

Do you mean this id - <form id="contact-form"?

[xnyjyh]

i corrected the ID in this script to match the <form id...- <script> document.getElementById('contact-form').addEventListener('submit', function(event) { event.preventDefault(); // Prevent default form submission behavior // Replace with your actual service and template IDs const serviceID = 'service_dum6gqe'; const templateID = 'template_vyogkou'; emailjs.sendForm(serviceID, templateID, this) .then(function(response) { console.log('SUCCESS!', response.status, response.text); alert('SUCCESS! Your form has been submitted.'); }, function(error) { console.error('FAILED...', error); alert('FAILED... Please try again later.'); }); }); </script>

After testing still doesn't send. I have no idea what I'm doing wrong lol, but its frustrating :-(

This is the link to live form - https://www.unpooped.com/pages/pricing