tabbit

Mon Aug 29 2016
Copied to clipboard! Copy reply
<style>
  @font-face {
    font-family: 'effra';
    src: url("../assets/effra_std.woff") format("woff");
  }

  @font-face {
    font-family: 'efframedium';
    src: url("../assets/effra_md.woff") format("woff");
  }

  @font-face {
    font-family: 'effrareg';
    src: url("../assets/effra_rg.woff") format("woff");
  }

  .__eande_formoverlay {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2000;
      background-color: rgba(0,0,0,.7);
      box-sizing: border-box;
      max-height: 100vh;
      min-width: 100%;
      overflow-y: scroll;
      overflow-x: hidden;
      padding: 5rem 0 5rem 0;
      cursor: pointer;
      text-align: left;
  }

  .__eande_formoverlay form {
      width: 80%;
      margin: auto;
      min-height: 10vh;
      background-color: hsla(0,0%,85%,1);
      display: flex;
      flex-flow: row wrap;
      border-top: 20px solid #0295CE;
      position: relative;
      box-sizing: border-box;
      cursor: default;
  }

  .__eande_formoverlay form .formcopy {

      flex: 1;
      padding: 2rem;
      background-color: white;

  }

  @media screen and (max-width: 1000px) {
      .__eande_formoverlay form .formcopy {
			min-width: 51%;
      }

      .__eande_formoverlay form figcaption {
			min-width: 80%;
			flex-basis: 80%;
      }

  }

  .__eande_formoverlay .formcopy .vertical_title {
     font-family: "effra", sans-serif;
     font-size: 1.33em;
  }
  .__eande_formoverlay .formcopy .undertitle {
     font-family: "effra", sans-serif;
     color: hsla(220, 95%, 55%, 1);
     font-size: 3em;
     text-transform: uppercase;

  }
  .__eande_formoverlay .formcopy .undertitle::after {
     content: "";
     display: block;
     width: 1.5em;
     border-top: 5px solid #EBC21D;
     margin-top: .43rem;
     margin-bottom: 2rem;
  }

  .__eande_formoverlay .formcopy p:nth-child(3) {
     font-family: "effra", sans-serif;
     font-size: 3em;
  }
  .__eande_formoverlay .formcopy p:nth-child(4) {
     font-family: "effra", sans-serif;
     font-size: 3em;
     font-weight: bolder;
  }
  .__eande_formoverlay .formcopy > figure {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     justify-content: center;
     position: relative;

     margin-top: 1em;
  }
  .__eande_formoverlay .formcopy > figure > figcaption {
     font-family: "effra", sans-serif;
     font-size: 1.8em;
     max-width: 12em;
     display: block;
     text-align: center;
     margin: 2rem auto 2rem auto;
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
     font-weight: bolder;
     flex-basis: fill;
     flex-grow: 1;
  }
  .__eande_innerfig {
     flex-basis: 47%;
     flex-grow: 1;
     position: relative;
     display: flex;
     flex-flow: column;
     align-items: center;
     background: white;
     padding: 2rem 0;
     margin: .5px;
     z-index: 100;
  }

  .__eande_innerfig:nth-child(5)::after {
    content: "";
    position: absolute;
    background-color: hsla(0,0%,0%,.5);
    top: 0;
    left: 0;
    width: .5px;
    height: 14em;
    z-index: -1;
    transform: translateY(-50%) translateX(-50%);

  }


  .__eande_innerfig:nth-child(5)::before {
    content: "";
    position: absolute;
    background-color: hsla(0,0%,0%,.3);
    top: 0;
    left: 0;
    height: .5px;
    width: 17em;
    z-index: -1;
    transform: translateY(-50%) translateX(-50%);
  }

  .__eande_innerfig img {
     width: 40%;
     height: 5rem;

  }

  .__eande_innerfig figcaption {
      text-align: center;
      max-width: 12em;
      font-family: "effra", sans-serif;
  }
  .__eande_innerfig figcaption span {
      color: #3081c8;
      display: block;
      text-align: center;
      margin-top: 5px;
      font-family: "effrareg", sans-serif;
      font-size: 1.5em;
  }

  .__eande_formoverlay form .formfields {

      flex: 1;
      padding: 2rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: flex-start;
      align-content: flex-start;
      box-sizing: border-box;
      padding-top: 5rem;
      justify-content: space-between;
  }

   .__eande_formoverlay form .formfields > label {
      margin: 1.5em 0;
      flex: none;
      flex-basis: 100%;
      position: relative;
  }

  .__eande_formoverlay form .formfields > label input {
      box-sizing: border-box;
      padding: 1em;
      width: 100%;
      left: 0;
      font-family: "effra", sans-serif;
  }



  .__eande_formoverlay form .formfields > label:nth-child(-n + 2) {

      box-sizing: border-box;
      flex-basis: 48%;

  }

  .__eande_formoverlay form .formfields > label span {
      position: absolute;
      left: 1em;
      font-family: "effra", sans-serif;
      font-size: 1.5em;
      transform: translateY(50%);
      display: none;
   }

   .__eande_formoverlay input.phone:empty + span {
      display: inline-block;
   }

   .__eande_formoverlay form .formfields > label input:invalid + span {
      display: inline-block;
   }

   .__eande_formoverlay form .formfields > label input:focus + span {
      display: none;
   }

   .__eande_formoverlay form .formfields > select {
     flex-basis: 100%;
     padding: .5em;
     font-family: "effra", sans-serif;
     font-size: 1.5em;
     margin: 1em 0;
   }

   .__eande_formoverlay form .formfields input[type=submit] {
     background-color: #0295CE;
     color: white;
     text-transform: uppercase;
   }

   .__eande_formoverlay form .formfields input[required] + span::after {
     content: "*";
     color: #0295CE;
   }

   .__eande_formoverlay .blueaster {
     color: #0295CE;
   }

   @media screen and (max-width: 1200px) {
    .__eande_formoverlay form .formcopy {
      border: 1px solid red;
      display: flex;
      flex-direction: column;
    }

     .__eande_formoverlay form .formfields  {
      display: none;
    }
   }

</style>

<div class="__eande_formoverlay" style="display: none;">
    <form action="http://s1294.t.eloqua.com/e/f2" method="post">
        <div class="formcopy">
            <p class="vertical_title"><%- content_eande_formlabel %></p>
            <p class="undertitle">Pricing</p>
            <p>A name you know.</p>
            <p>A brand you trust.</p>

            <figure role="group">
                <figcaption>20 years of using insights gained through experience.</figcaption>
                <figure class="__eande_innerfig">
                    <img alt="A briefcase" src="../assets/case.svg">
                    <figcaption><span class="number">12,000+</span> corporations</figcaption>
                </figure>
                <figure class="__eande_innerfig">
                    <img alt="A heart" src="../assets/heart.svg">
                    <figcaption><span class="number">9,000+</span> public &amp; non-profit organizations</figcaption>
                </figure>
                <figure class="__eande_innerfig">
                    <img alt="A book" src="../assets/book.svg">
                    <figcaption><span class="number">22,000+</span> educational institutions</figcaption>
                </figure>
                <figure class="__eande_innerfig">
                    <img alt="A globe" src="../assets/globe.svg">
                    <figcaption><span class="number txt">Millions</span> of learners worldwide</figcaption>
                </figure>
            </figure>
        </div>
        <div class="formfields">
            <label><input type="text" name="C_FirstName1" required maxlength="255"><span>First Name</span></label>
            <label><input type="text" name="C_LastName1" required maxlength="255"><span>Last Name</span></label>
            <label><input type="text" name="C_Company1" required maxlength="255"><span><%= content_eande_formorglabel %></span></label>
            <label><input type="email" name="C_EmailAddress1" required maxlength="255"><span>Email</span></label>
            <label><input class="phone" type="text" name="C_BusPhone1" maxlength="20" pattern="[0-9]+"><span>Phone Number (Optional)</span></label>
            <select name="institution_type1" required>
                <option value>Language Solutions For<span class="blueaster">*</span></option>
                <option value="K-12">K-12 Schools</option>
                <option value="Higher Education">Universities / Colleges</option>
                <option value="Corporate">Businesses</option>
                <option value="Government">Government Organizations</option>
                <option value="Non Profit">Non Profit Organizations</option>
                <option value="Private Use">Individual / Personal Use</option>
                <option value="Technical">Technical Issues</option>
            </select>
            <label><input type="submit" value="request pricing information"></label>
        </div>
        <img class="formclose" alt="close this form" src="../assets/close.png" style="width: 2em; position: absolute; top: 0; right: 0; cursor: pointer; transform: translateY(-100%) translateX(50%);"/>
        <input autocomplete="off" name="elqFormName" type="hidden" value="2015-Web-Form-Single-Step-New">
        <input autocomplete="off" name="omniformname" type="hidden" value="<%= content_eande_formvertical %>">
        <input autocomplete="off" name="elqSiteID" type="hidden" value="1294">
        <input autocomplete="off" name="form-test" type="hidden" value="Experience C-Pricing">
        <input autocomplete="off" name="country_ip" type="hidden" value="">
        <input autocomplete="off" name="state_ip" type="hidden" value="">
        <input autocomplete="off" name="elqCustomerGUID" type="hidden" value="">
        <input autocomplete="off" id="redirect_url" name="redirect_url" type="hidden" value="http://www.rosettastone.com/education?thanks=true">
    </form>
</div>

<script defer>
  //assign redirect_url
  window.__eloqua__thanksURL = window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search.replace(/&?thanks=[^&]*/ig,'') + (window.location.search.match(/\?/) ? '&' : '?') + 'thanks=true';
  $('input[name="redirect_url"]').val(__eloqua__thanksURL);

  //assign elqCustomerGuid
  function GetElqCustomerGUID(){
      var guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
          var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
          return v.toString(16);
      });

      return guid;
  }
  $('input[name=elqCustomerGUID]').attr('value',  GetElqCustomerGUID());



  function __eande_handleformsubmission() {
    var $frm = $(this);
    $(document).trigger('eande_formsubmit');
    $frm.off('submit.eandeform');
    $frm.find('input[type=submit]').prop('disabled', true);
    //cands = see if there are any cid candidates in location.search
    var cands = jQuery.grep(window.location.search.replace('?','').split('&'), function(v,i){ return v.match(/cid=/) });
    if(cands.length){
      //If so, add a form-test field before submit
      //$frm.append('<input autocomplete="off" name="form-test" type="hidden" value="' + cands.replace('cid=','') + '">')
      $frm.find('input[name=form-test]').attr('value', cands[0].replace('cid=',''));
      console.log(cands[0].replace('cid=',''));
    }
    setTimeout(function(){
      $frm.find('input[type=submit]').removeProp('disabled');
      //console.log('Re-Triggering Submit.');
      $frm.trigger('submit');
    },2000);
    return false;
  }

  window.showEandEForm = function _showEandEForm() {
    var overlay = $('.__eande_formoverlay');
    var $frm = overlay.find('form');

    $('html,body').css('overflowY', 'hidden');

    //This is in reaction to the finding that layout problems occur if these two operations happen without waiting for the 'overflowY' to render (scrollY would inexplicably reset to 0 on Chrome)...this seems to fix it
    if('requestAnimationFrame' in window) {
      requestAnimationFrame(function(){
        overlay.css('display','block');
        overlay.css('top', (window.scrollY || window.pageYOffset || 0) + 'px');
      });
    }
    else {
      setTimeout(function(){
        overlay.css('display','block');
        var curpos = (window.scrollY || window.pageYOffset || 0);
        $('body').data('scrollpos', curpos);
        overlay.css('top', curpos + 'px');
      }, 100);
    }


    //'disabled' == safety to clear any prop set as part of submission
    $frm.find('input[type=submit]').removeProp('disabled');
    //clear off any residual handlers (just a sanity check to maintain 1 and only 1 handler per activation)
    $frm.off('submit.eandeform');
    $frm.on('submit.eandeform', __eande_handleformsubmission);

    $(document).trigger('eande_formopen');
    $(document).trigger('ee_demo_formview');
  };

  window.hideEandEForm = function _hideEandEForm() {
    $('.__eande_formoverlay').css('display','none');
    $('html,body').css({'overflowY': 'scroll', 'width': '100vw', 'overflowX': 'hidden', 'height': 'auto'});
    $(document).trigger('eande_formclose');
  };

  $('.__eande_formoverlay').on('click.eande', function hideform(e){
    $(e.target).hasClass('__eande_formoverlay') && hideEandEForm();
  });

  $('.__eande_formoverlay .formclose').on('click.eande', function hideform(e){
    hideEandEForm();
  });

  $('.__eande_formoverlay input.phone').on('blur', function(){
    $(this).closest('label').find('span').css('visibility', $(this).val() ? 'hidden' : 'visible')
  });

  function __eande_changetoconsultation() {
    $('.__eande_formoverlay .undertitle').text('Free Consultation');
    //$('.__eande_formoverlay input[name=elqFormName]').val('2012-US-Free-Consultation-Form-2A-SepPage-Step1');
    $('.__eande_formoverlay input[type=submit]').val('Request Free Consultation');
    $('.__eande_formoverlay input[name="form-test"]').val('Experience C-Consultation');
  }

  $(document).on('eande_formclose', function(){
    $('.__eande_formoverlay .undertitle').text('Pricing');
    $('.__eande_formoverlay input[name=elqFormName]').val('2015-Web-Form-Single-Step-New');
    $('.__eande_formoverlay input[type=submit]').val('Request Pricing Information');
    $('.__eande_formoverlay input[name="form-test"]').val('Experience C-Pricing');
  });

  $(document).on('eande_closedemo', function(){
    __eande_changetoconsultation();
    //to cover /business case
    if( window.location.pathname.match(/\/business/) ) {
      $(document).trigger('eande_requestform', {consult: 1, title: "Business", consult: 1, orgtext: "Organization"});
      return true;
    }
    showEandEForm();
  });

  $(document).on('eande_requestform', function(e,d){
    d && d.consult && __eande_changetoconsultation();
    d && d.title && $('.__eande_formoverlay .vertical_title').text(d.title);
    d && d.orgtext && $('.__eande_formoverlay input[name="C_Company1"] + span').text(d.orgtext);
    showEandEForm();
  })
   //window.showEandEForm();

  //SHAME::: THIS IS TO FILL A DEMONSTRABLY STUPID PURPOSE.
  window.shameFillIP = function() {
    $.get('http://www.rosettastone.com/k12/solutions', function(d){
        var ip = (d.match(/remoteipaddress=\"([^,]+)/i) || []).pop();
        var req = "http://www.rosettastone.com/k12/solutions?p_p_id=rosettaservices_WAR_institutionalrosettaservicesportlet&p_p_lifecycle=2&p_p_resource_id=GeoIP_request&redirect2mobile=disabled&ipaddr=" + ip;
        $.get(req, function(d){
            var info = (d.split('|') || []);
            $('input[name="country_ip"]').val(info.shift());
            $('input[name="state_ip"]').val(info.shift());
        });
    });
  };

</script>