quote-gen.js

<form id="quote-gen" style="text-align: center; font-size: 1.2em; background: #e9e9e9; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); padding: 2em">
<h1 style="text-align: center"> Get a quote now! </h1>
<label>How many panels do you have?</label>
<input type="number" name="panel-count" min="1" max="71"><br>

<br><label>What type of structure are your solar panels installed on?</label>  <br>
<div style="text-align: left; display: inline-block; width: 30em">
<input type="radio" name="structure" value="home" id="home-panels"> Home Roof Top<br>
<input type="radio" name="structure" value="commercial"> Commercial Building Roof Top<br>
<input type="radio" name="structure" value="packing-covers"> Packing Covers<br>
<input type="radio" name="structure" value="ground"> Ground<br>
</div>
<div id="quote-gen-story-input" style="display: none">
  <br><label>What story are they mounted on?</label> <br>
  <div style="text-align: left; display: inline-block; width: 30em">
    <input type="radio" name="level" value="1"> 1st<br>
    <input type="radio" name="level" value="2"> 2nd<br>
    <input type="radio" name="level" value="3"> 3rd<br>
    <input type="radio" name="level" value="4"> 4th<br>
  </div>
</div>
<br><br><label>Is there access to a water spigot/faucet?</label> <br>
<div style="text-align: left;  display: inline-block; width: 30em">
  <input type="radio" name="water" value="access"> Yes<br>
  <input type="radio" name="water" value="no-access"> No<br>
</div>
<br><br><label>Where did you here from us?</label> <br>
<input type="text" name="referrer"><br>
<br><label>Additional Details?</label> <br>
<textarea name="additional-details" rows="10" cols="80" style="resize: vertical"></textarea><br><br>
<br><br><label>How often do you want your solar panels cleaned?</label> <br>
<div style="text-align: left;  display: inline-block; width: 40em">
  <div id="quote-gen-frequency">
  <button type="button" name="frequency" value="bi-monthly">Bi-Monthly<br>(Every 2 weeks)<br><h4/></button>
  <button type="button" name="frequency" value="monthly">Monthly<br><h4/></button>
  <button type="button" name="frequency" value="quarterly">Quarterly<br>(Every 3 months)<br><h4/></button>
  <button type="button" name="frequency" value="semi-annually">Semi-Annually<br>(Twice a year)<br><h4/></button>
  <button type="button" name="frequency" value="annually">Annually<br>(Once a year)<br><h4/></button>
  <button type="button" name="frequency" value="whenever">Whenever Needed<br><h4/></button>
  </div>
</div>

<hr><h1 id="quote-gen-price" style="text-align: center"> </h1>
<button type="button" class="quote-gen-contact-us" style="width: 8em; height: 4em; border: 2px solid #e0e0e0"> Inquire further </button>
<div class="quote-gen-contact-details" style="display: none">
<br><br><label>Let us know how to contact you</label>
<input type="butto" name="contact-detail" class="quote-gen-name" placeholder="Name">
<input type="text" name="contact-detail" class="quote-gen-address" placeholder="Address">
<input type="text" name="contact-detail" class="quote-gen-number" placeholder="Phone Number">
<input type="text" name="contact-detail" class="quote-gen-email" placeholder="E-Mail">
<button type="button" class="quote-gen-submit" style="padding: 3px"> Submit </button>
<p class="quote-gen-message" style="padding: 0"></p><br>
<p style="padding: 0">Please disable your popup blocker</p><br>
</div>
</form>
<style>
#quote-gen-frequency {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
#quote-gen-frequency>button {
  font-size: 1.2em;
  font-weight: 500;
  width: 27%;
  height: 8em;
  margin: 3%;
  background: #f2f2f2;
  border: 8px solid #333;
  border-radius: 2px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3)
}
#quote-gen-frequency>button:hover {
  font-size: 1.2em;
  font-weight: 500;
  width: 27%;
  height: 8em;
  margin: 3%;
  background: #d8d8d8;
  border: 8px solid #222;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3)
}
</style>

<script>
// SCRIPT TAG HERE===========================================================================
(function(){
  function updatePrice(){

      if (structure === 'home') {
        jQuery('#quote-gen-story-input').attr('style', '');
      } else {
        jQuery('#quote-gen-story-input').attr('style', 'display: none');
      }

      if
      (
        number && water &&
        ((structure === 'home' && level) || (structure))
      ) {
        // SET THE INITIAL COST HERE
        var total = 120;
        // SET THE PER PANEL COSTS HERE
        if (number <= 8) {
          total += number * 14;
        } else if (number <= 20) {
          total += number * 12;
        } else if (number <= 30) {
          total += number * 8;
        } else if (number <= 49) {
          total += number * 7;
        } else if (number <= 70) {
          total += number * 5;
        } else { // IF THE LOGIC GETS HERE THERE IS MORE THAN 70 PANELS
          jQuery('#quote-gen-price').text('Contact us for a commercial estimate.');
          return;
        }
        // CHANGE THE WATER ADDITIONAL COST HERE
        if (water === 'no-access') {
          total += 120;
        }
        // SET THE MOUNTING LEVEL COSTS HERE
        if (structure === 'home') {
          var levelCosts = {
            '1':0,
            '2':100,
            '3':150,
            '4':200
          }
          total += levelCosts[level];
        }
        var finalText = '';
        // CHANGE PACKAGE BOX PRICES HERE BY CHANGING THE 0.8, 0.82 etc. AT THE END OF THE LINE
        jQuery('button[name="frequency"]').filter('[value="bi-monthly"]').children('h4').text('$'+Math.ceil(total*0.8));
        jQuery('button[name="frequency"]').filter('[value="monthly"]').children('h4').text('$'+Math.ceil(total*0.82));
        jQuery('button[name="frequency"]').filter('[value="quarterly"]').children('h4').text('$'+Math.ceil(total*0.85));
        jQuery('button[name="frequency"]').filter('[value="semi-annually"]').children('h4').text('$'+Math.ceil(total*0.9));
        jQuery('button[name="frequency"]').filter('[value="annually"]').children('h4').text('$'+Math.ceil(total*0.95));
        jQuery('button[name="frequency"]').filter('[value="whenever"]').children('h4').text('$'+Math.ceil(total));
        // CHANGE THE FINAL PRICE AND TEXT HERE
        if (frequency) {
          if (frequency==='bi-monthly') {
            total = Math.ceil(total * 0.8);
            finalText = 'Cost: $'+total+' per clean, twice a month.';
          } else if (frequency==='monthly') {
            total = Math.ceil(total * 0.82);
            finalText = 'Cost: $'+total+' per clean, once a month.';
          } else if (frequency==='quarterly') {
            total = Math.ceil(total * 0.85);
            finalText = 'Cost: $'+total+' per clean, four times per year.';
          } else if (frequency==='semi-annually') {
            total = Math.ceil(total * 0.9);
            finalText = 'Cost: $'+total+' per clean, two times per year.';
          } else if (frequency==='annually') {
            total = Math.ceil(total * 0.95);
            finalText = 'Cost: $'+total+' per clean, once per year.';
          } else if (frequency==='whenever') {
            total = Math.ceil(total * 1);
            finalText = 'Cost: $'+total+' per clean, as needed.';
          }
          jQuery('#quote-gen-price').text(finalText);
          quotePrice = total;
        }
      }
  }

  var sent = false;
  var quotePrice = 0;
  var frequency = null;
  var number = null;
  var structure = null;
  var level = null;
  var water = null;
  var referrer = null;
  var details = null;

  jQuery('button[name="frequency"]').on('click', function(e){
    frequency = jQuery(this)[0].value;
    jQuery('button[name="frequency"]:not([value="'+frequency+'"])').attr('style', '');
    jQuery('button[name="frequency"]').filter('[value="'+frequency+'"]').attr('style', 'border: 8px solid rgb(242,102,33)');
    updatePrice();
  });

  jQuery('#quote-gen').on('change', function(e){

    number = jQuery('input[name="panel-count"]').val();
    structure = jQuery('input[name="structure"]:checked').val();
    level = jQuery('input[name="level"]:checked').val();
    water = jQuery('input[name="water"]:checked').val();
    referrer = jQuery('input[name="referrer"]').val();
    details = jQuery('textarea[name="additional-details"]').val();
    updatePrice();

  });

  jQuery('.quote-gen-contact-us').on('click', function(){
    jQuery('.quote-gen-contact-details').attr('style', '');
    jQuery('.quote-gen-contact-us').attr('style', 'display: none');
  });

  jQuery('.quote-gen-submit').on('click', function(){
    //var number = jQuery('input[name="panel-count"]').val();
    //var structure = jQuery('input[name="structure"]:checked').val();
    //var level = jQuery('input[name="level"]:checked').val();
    //var water = jQuery('input[name="water"]:checked').val();
    //var frequency = jQuery('input[name="frequency"]:checked').val();
    //var referrer = jQuery('input[name="referrer"]').val();
    //var details = jQuery('textarea[name="additional-details"]').val();

    if (sent) {
      return;
    }
    sent = true;

    var name = jQuery('.quote-gen-name').val();
    var address = jQuery('.quote-gen-address').val();
    var phone = jQuery('.quote-gen-number').val();
    var email = jQuery('.quote-gen-email').val();

    if (!name) {
      jQuery('.quote-gen-message').text('You are missing a name.');
    } else if (!address) {
      jQuery('.quote-gen-message').text('You are missing an address.');
    } else if (!phone) {
      jQuery('.quote-gen-message').text('You are missing a phone number.');
    } else if (!email) {
      jQuery('.quote-gen-message').text('You are missing an E-Mail.');
    } else if (!number) {
      jQuery('.quote-gen-message').text('You are missing the panel count.');
    } else if (!structure) {
      jQuery('.quote-gen-message').text('You are missing the structure the panels are mounted on.');
    } else if (structure === 'home' && !level) {
      jQuery('.quote-gen-message').text('You are missing the level the panels are mounted on.');
    } else if (!water) {
      jQuery('.quote-gen-message').text('You are missing the water access.');
    } else if (!frequency) {
      jQuery('.quote-gen-message').text('You are missing the cleaning frequency.');
    } else {
      var message = '<h3>Quote Report</h3><ul style="list-style: none">' +
        '<li>Number of panels:'+number+'</li>'+
        '<li>Type of Structure:'+structure+'</li>'+
        '<li>Mounting Level:'+level+'</li>'+
        '<li>Water Access:'+water+'</li>'+
        '<li>Cleaning Frequency:'+frequency+'</li>'+
        '<li>Referrer:'+referrer+'</li>'+
        '<li>Aditional Information:'+details+'</li>'+
        '<li>Customer Name:'+name+'</li>'+
        '<li>Customer Address:'+address+'</li>'+
        '<li>Customer Phone Number:'+phone+'</li>'+
        '<li>Customer EMail:'+email+'</li></ul>' +
        '<h4>Quote: $'+quotePrice+'</h4>';

      jQuery('#quote-gen-price').text('Sending email...');

      jQuery.ajax({
        type: 'POST',
        url: 'https://mandrillapp.com/api/1.0/messages/send.json',
        data: {
          'key': 'yBiwQSj8pLLqjl5S1K9sUg',
          'message': {
            'from_email': 'sales@solarmaintenanceco.com',
            'to': [
                {
                  'email': 'sales@solarmaintenanceco.com',
                  'name': 'solar',
                  'type': 'to'
                }
              ],
            'autotext': 'true',
            'subject': 'Quote Report',
            'html': message
          }
        }
      }).done(function(response){
        if (response[0].status === 'sent') {
          jQuery('#quote-gen-price').text('Successfully sent!');
        }
      });
    }
  });  //src="https://rawgit.com/Ntropish/quote-form/master/form-script.js"
})();

</script>