Hello, im having a very hard time getting my custom form to work. My form is completely custom HTML CSS and scripts. I cannot get my form to send… I’m using EMAILJS to handle the form sending etc. This is my complete code below:
<div class="price-calculator-container">
<center><h2 class="main-title">Get A Free Quote</h2></center>
<!-- 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>...*<input type="tel" name="..." 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="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">
<label><input type="radio" name="frequency" value="Weekly" required> Weekly</label>
<label><input type="radio" name="frequency" value="Twice a Week" required> Twice a Week</label>
<label><input type="radio" name="frequency" value="Bi-weekly" required> Bi-weekly</label>
<label><input type="radio" name="frequency" value="Monthly" required> Monthly</label>
</div>
</div>
<!-- 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>
<!-- Submit Button -->
<button type="submit" class="full-width-button">Get Started!</button>
</label>
</form>
</div>
</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 = `
<div class="dog-info">
<label>Dog ${i}'s Name<input type="text" name="dog${i}Name" required></label>
<label>Is it safe for us to be in the yard with your dog?
<select name="dog${i}Safety" 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="dog${i}Comments"></label>
</div>
`;
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>
<!-- EmailJS SDK -->
<!-- Form Submission Script for Contact Form -->
<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>
