Dawn theme - custom form - Need experienced Pro for EMAILJS

xnyjyh · ‎11-12-2024

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>

tim · ‎11-13-2024

Looks kinda proper except missing a link to emailjs JS SDK.

Ideally would need to see the implementation on your site to suggest anything.

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

xnyjyh · ‎11-13-2024

Its all in a custom liquid block. i corrected the form id to match as it didnt match prior. but still not sending. This is the link to the form page. you'd have to click the Get Free Quote to see the rest of form - https://www.unpooped.com/pages/pricing

xnyjyh · ‎11-13-2024

oh and this is in my theme.liquid.

  <head>

<!-- Load EmailJS SDK -->
<script src="https://cdn.emailjs.com/sdk/3.2.0/email.min.js"></script>

<!-- Initialize EmailJS with your User ID -->
<script>
    emailjs.init('visRXDyBAVpOELQ4_');
    console.log('EmailJS initialized');
</script>

i think this is what you mean?

tim · ‎11-13-2024

Had to do a couple of amendments:

1. This does not work

<script src="https://cdn.emailjs.com/sdk/3.2.0/email.min.js"></script>

Used this instead

<script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>

2. form ID in JS does not match one in HTML.

Replaced this

   document.getElementById('contactForm').addEventListener('submit', function(event) {

with this:

   document.getElementById('contact-form').addEventListener('submit', function(event) {

Codepen: https://codepen.io/tairli/pen/abeXKaL

Result:

If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.
I can be reached via e-mail tairli@yahoo.com

Dawn theme - custom form - Need experienced Pro for EMAILJS

Dawn theme - custom form - Need experienced Pro for EMAILJS

Community Blog Articles