AllieRuth Order Form 1.0

by lukerichison

HTML

<div id="yui_3_17_2_2_1434724887014_1970" class="yui3-widget sqs-widget sqs-modal-lightbox"><div id="yui_3_17_2_2_1434724887014_1972" class="sqs-modal-lightbox-content" style="top: 0px;"><div class="lightbox-background"></div><div class="lightbox-inner" id="yui_3_17_2_2_1434724887014_1988"><div class="lightbox-content" id="yui_3_17_2_2_1434724887014_2096" style="margin-top: 50px; margin-bottom: 50px;"><div id="yui_3_17_2_2_1434724887014_2019" class="yui3-widget sqs-widget sqs-async-form"><div id="yui_3_17_2_2_1434724887014_2021" class="sqs-async-form-content"><div class="form-wrapper" id="yui_3_17_2_2_1434724887014_2095">

      <div class="form-title">Build Your Collection Invitation Suite</div>
  
  
    <div class="form-inner-wrapper" id="yui_3_17_2_2_1434724887014_2094">

      <form autocomplete="on" id="yui_3_17_2_2_1434724887014_2093">

        
          <div class="field-list clear" id="yui_3_17_2_2_1434724887014_2092">

          
              
                              <div id="section-yui_3_17_2_1_1432738958229_73008" class="form-item section">
                  <div class="title">Make sure you have your customization guide handy!</div>
                  <div class="description">Download available on the Order now page.</div>                </div>
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
              
          
              
              
                              <div id="text-yui_3_17_2_1_1431025953517_26110" class="form-item field text required">
                  <label class="title" for="text-yui_3_17_2_1_1431025953517_26110-field">Order Name <span class="required">*</span></label>
                                    <input class="field-element text" type="text" id="text-yui_3_17_2_1_1431025953517_26110-field">
            ...

CSS

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    min-height: 100%;
}
.sqs-modal-lightbox {
  width: 100%;
  font-size: 14px;
  text-transform: none;
  font-style: normal;
  text-decoration: none;
}
.sqs-modal-lightbox-content {
  z-index: 100000000;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}
.sqs-modal-lightbox-content .lightbox-background {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .4;
}
.sqs-modal-lightbox-content .lightbox-inner {
  position: absolute;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  height: 100%;
  top: 0;
}
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  padding: 40px;
  background: #fff;
}
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper {
  color: #222;
  font-family: inherit;
}
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper .form-title {
  font-size: 22px;
  line-height: 1.2em;
  margin-right: 22px;
  color: #333;
}
.sqs-modal-lightbox-content .lightbox-inner .lightbox-content .form-wrapper .form-inner-wrapper form {
  margin-top: 55px;
}
.form-wrapper .field-list {
  line-height: normal;
}
.form-wrapper .field-list .field {
  position: relative;
  margin: 0 0 24px;
}
.form-wrapper .field-list .title {
  display: block;
}
.form-wrapper .field-list .field .field-element {
  width: 100%;
  padding: 12px;
  margin: 6px 0 4px;
  border: 1px solid #ccc;
  background: #fafafa;
  font-family: sans-serif;
  font-size: 12px;
  line-height: normal;
  box-sizing: border-box;
  border-radius: 2px;
}
.form-wrapper .field-list .section {
  margin: 2em 0;
  padding-bottom: .3em;
  font-size: .9em;
  text-transform: uppercase;
}

.form-wrapper .field-list .section.underline {
  border-bottom: 1px solid #999;
}
.form-wrapper .field-list .description {
  padding: .5em 0 .5em;
  font-size: 12px;
 ...

JavaScript

var obj = Y.Node.create('<ul id="PriceList"><i style="display: block; text-align: center;">Total will update as<br/>choices are added</i><li id="SuitePrice">Suite Total<span>$0.00</span></li><li id="InvitePrice">Invitations <span>--</span></li><li id="SavePrice">Save the Dates <span>--</span></li><li id="RsvpPrice">RSVPs<span>--</span></li><li id="InfoPrice">Infomation Cards <span>--</span></li><li id="AddsPrice">Add-ons<span>--</span></li></ul>');

Y.one('.lightbox-content').insert(obj);

var TotalCostInput =      Y.one("input#text-yui_3_17_2_1_1432283849960_31852-field"),
    Calligraphy =         Y.one("select[name='select-yui_3_17_2_1_1431025953517_32172-field']"),
    CalligraphyIcons =    Y.one("select[name='select-yui_3_17_2_1_1431025953517_42200-field']"),

    InviteCost =          Y.one("input#text-yui_3_17_2_1_1431025953517_228916-field"),
    InviteQuantity =      Y.one("select[name='select-yui_3_17_2_1_1431025953517_101079-field']"),
    InvitePrint =         Y.one("select[name='select-yui_3_17_2_1_1431025953517_107948-field']"),
    InviteBack =          Y.one("select[name='select-yui_3_17_2_1_1431025953517_162113-field']"),
    InviteEnvelopeColor = Y.one("select[name='select-yui_3_17_2_1_1431025953517_174887-field']"),
    InviteEnvelopeLiner = Y.one("select[name='select-yui_3_17_2_1_1431182646159_402950-field']"),

    SaveCost =            Y.one("input#text-yui_3_17_2_1_1431025953517_233757-field"),
    SaveQuantity =        Y.one("select[name='select-yui_3_17_2_1_1431025953517_238399-field']"),
    SavePrint =           Y.one("select[name='select-yui_3_17_2_1_1431025953517_241802-field']"),
    SaveFormat =          Y.one("select[name='select-yui_3_17_2_1_1432233173713_103663-field']"),
    SaveBack =            Y.one("select[name='select-yui_3_17_2_1_1431629253449_255733-field']"),
    SaveEnvelopeColor =   Y.one("select[name='select-yui_3_17_2_1_1431025953517_263379-field']"),
    SaveEnvelopeLiner =  ...