fsFormBeauty.html

<!-- EMBED INTO EACH FORM YOU ARE USING THIS FUNCTIONALITY WITH -->
<!-- MAKE SURE TO DISABLE THE FORM'S JQUERY FEATURE WHEN YOU GET THE EMBED CODE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>

<!-- ADD THE FOLLOWING JAVASCRIPT TO YOUR FORM'S EMBEDED CUSTOMIZATION -->
<script>
// FORMSTACK RADIO BUTTON AND SELECT BOX BEAUTIFICATION
// WORKS IN CONJUNCTION WITH THE CSS BELOW
// https://gist.github.com/clayperez/54547413ec23dff54fa6
jQuery(document).ready(function($){
  var $fsOptionInputs = $('.fsOptionLabel input');
  var totalHTML = '<div class="seeTotal">$0.00</div>';

  $('.fsPage').prepend(totalHTML).append(totalHTML);

  $fsOptionInputs
    .each(function(){
      var $this = $(this);
      $this.closest('.fsOptionLabel').addClass($this.attr('type'));
    })
    .on('change', function(){
      var $this = $(this);
      if($this.is(":radio")){ //uncheck all radios first
        $this.closest('.fieldset-content').find('label').removeClass('ccp_is_checked');
      }
      $this.parent().toggleClass('ccp_is_checked', $this.is(':checked'));
    });
});
</script>

<!-- MAKE SURE THE THEME YOU'RE USING HAS THIS CSS IN ITS CUSTOM CSS AREA -->
<style>
@import url("https://fonts.googleapis.com/css?family=Work+Sans:400,600,300,500,700,800,900");

/* Bike Monkey */
.seeTotal { text-align:center; font-size:2em;padding:10px; }

/* FORM BASICS */
.fsBody {
    border:none;
    background: rgba(255,255,255,0.8);
    padding: 10px;
}

/* FORM HEADER IMAGE*/
#fsHeaderImage {
    border:none;
    padding:0;
    margin:0;
}

/* FORM FOOTER IMAGE */
#fsFooterImage {
    border:none;
    padding:0;
    margin:0;
}


/* FORM CONTAINER */
.fsBody .fsForm {
    width:auto;
    border:none;
    box-shadow:none !important;
    padding:0;
    margin:0;
}

/* FORM SECTION */
.fsBody .fsForm .fsSection {
    border-bottom:1px solid rgba(0,0,0,0.2);
    padding:0 0 10px 0;
    margin:0;
}
.fsBody .fsForm .fsSection:last-of-type {
    border-bottom:none;
}

.fsBody .fsForm .fsSectionHeader {
    background:rgba(255,255,255,0);
    padding:5px;
    margin:5px;
    border-radius:0;
}

.fsBody .fsForm .fsSectionHeading {
    font-family:'Work Sans';
}

.fsBody .fsForm .fsLabel {
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;
}

.fsBody .fsForm .fsField {
    background:rgba(90,200,255,0.6) !important;
    border:none;
}

.fsBody .fsForm .fsSupporting {
    font-family:'work sans', sans-serif;
    font-weight:700;
    color:rgba(0,0,0,0.4);
}

.fsBody .fsForm .fsSubmit.fsPagination {
    background:none;
}

.fsBody .fsForm input.fsSubmitButton,
.fsBody .fsForm button {
    border:none;
    font-family:'Work Sans', sans-serif;
    font-weight:500;
    padding:10px;
    background:rgba(90,200,255,1);
    color:rgba(255,255,255,1);
}
.fsBody .fsForm input.fsSubmitButton:hover {
    background:rgba(100,225,200,1);
}

/* ERRORS and FOCUS */
.fsFieldFocused{
    
}
div.fsError {
    margin: 15px 10px 5px;
    font-size: 14px;
    background-color: #C13939;
    color: #FFF;
    padding: 10px;
    clear: both;
    text-align: center;
    border-radius: 0;
    border:none;
}
.fsValidationError {
  background:none !important;
  border:none !important;
}
.fsValidationError .fsField {
    border: none !important;
    background: red !important;
}

/* CHECKBOXES AND RADIOS */

.fsOptionLabel input {
  opacity:0;
  border:none !important;
}

/* SELECT BOXES */
.fsBody .fsForm select.fsField {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  padding:4px 20px 4px 4px;
  background:rgba(90,200,255,0.6) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAB4CAMAAAB1ngQsAAAAQlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACO4fbyAAAAFnRSTlMmk5Api4VqL3hGQH9yYlxYUk06NjR8EY+ExwAAAJRJREFUWMPt0rkOAjEUQ1E7mX3f+P9fpaAIMwQpLyMhIfn0dnUhIiIiIiIivzXwiwFpDscodyDRzKgZqXzPiN4jWceIDgYVP1SwqAteFDVMVl6sMGp40sBqd6cEdphNfDPBzpdhX3oEOTG0yFLZE7jGEBLIs7wOFgQ5MTyQb3Ok23DDSI64w5chgTxtCxERERER+U9Po34DB9Y11/kAAAAASUVORK5CYII=) no-repeat right center/contain !important;
}

/* RADIO BUTTONS */
.fsOptionLabel.radio {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAPFBMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGS+d2oUAAAAE3RSTlMAhtssxalvEvDQwZl3W0tEHwqfH6cjPQAAAQ9JREFUWMOk0UsOwkAMA1AnmU//pfj+d0UskGhpy8zk7RPJNq7YLDFoR3YaosyGGtsigQdBlg1lbBp4apis5FyUl1QM93LqeatPGTfWyL/iiktJWUATzmVhITmN8RhZbHyc3D9Z4fnzIY+sMh5TCCsJdhKrpd3+ymq6fhUQ2SDmfQBHCOvZpLfjAo1LmLKRGt4mNpsAYBvYbNgALHRYPhV6agx0CIDRxTDTZYbQRRDpEhHoEqB0UXR06UCnV+l1QAMADMMwjD9rgzCBS/+3NukD+gr9iP2NPUg9yr1Mvc4bKB1pHaod61ssXW1brl3vCxiNOAtZi3kLmo26C9uP+y8crzwvXa99L56vvi/frf8AUd7siV3I0LsAAAAASUVORK5CYII=) no-repeat 0 0/14px;
}

.fsOptionLabel.radio:hover {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAWlBMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRGiIxKg4ZPfH9ab3FUd3lYcnRgaWlTeHoEqWZ3AAAAFXRSTlMA/dssxamJg0cS8NDBmXdybFsfCp/Ha8oTAAABhklEQVRYw6SU6ZaCMAyF29JNVBAxSUF9/9ecM2tT1nDm+9/m5uYmao2qC86aWuvaWBe6Sh2hj95qKNDWx17JqJoLLHJpKsnzYGAVE/a+OLVn2OTcntQG0cEuLqpVbgYEmNuafK9BhPaLbdyvIOZ6X3j/gAM87jP9s/qvYUxEiERpHF4zDdMuPJQMiZBBaYASP/G/9O+ZcEZ6lk4Ws4imrI6LlCpMZAa4ojzhClSIcNmGFhgjbjACo/3bH57/N27y5nvxu1lhWl+qIfwIMKx/3IX5YL4lNMx/wl2IzaL5ul/s/iQUkNiN6j8zMG9A3kQsQ5xQRCoDbbMDKCS7YJWqNBdwVIKuVJf3l1AI5e3uVOAdHO8hKLcUQnkcHfMwoZjEXMw5JhRDOc2q/t8HtcpTxAPkOX6UXgc0AMAwDMP4szYIE7j0f2uTPqCv0I/Y39iD1KPcy9TrvIHSkdah2rG+xdLVtuXa9b6A0YizkLWYt6DZqLuw/bj/wvHK89L12vfi+er78t36D3VtDDysYpKFAAAAAElFTkSuQmCC) no-repeat  0 0/14px;
}

.ccp_is_checked.radio {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAaVBMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGQA3OpfaWoksbowo6pBjZIJ0t4Lz9sPytYSxtEbu8Ugtr86l50+kpdKg4dXc3Utpq5iOXAkAAAAEnRSTlMA/dvELKmJg3RHEpvw0GxbHwrPBqe4AAABlUlEQVRYw5TT25KCMAwG4B4oBQWRhHJG0Pd/yJ2dWTctcojffTLN30TsiQprtMqkzJQ2tojEN8o01hICUsdpKXiiRMMmnUSccqtgl7JnLS5JDofy5CIOpAZOmVTsuilgULe958cSWGS8Ocb9CmzXO7ee3+HyUf9s6mloEdthqpvnR4f1FDEEqsZ16OlcU0EgXuUvg/J5xA/jHLSQwV+kCjyLw01uAY9KvQAMeB497ugf4DEUQwKkqvFAXQFJ/u8n9+pfeOjldcjfl2WB1HiiBmL/HqC8+fGUl4OK1gksPZ7ql1UKpaYAHDI4ikGXvztADWdkmakiDZa4GpFlrIKFpgkaZGpoBiEiugKHTI4uIhIF3W+HTB1ddyHs1gT8GawwW0vIX0fjZTgh2+SlSHs8INtA2ywyeGuRrYW3TNAv4hfoH39KrwMaAGAYhmH8WRuECVz6v7VJH9BX6Efsb+xB6lHuZep13kDpSOtQ7VjfYulq23Ltel/AaMRZyFrMW9Bs1F3Yftx/4Xjleel67XvxfPV9+W79B/R26amh+XSnAAAAAElFTkSuQmCC) no-repeat  0 0/14px !important;
}

/* CHECKBOXES */
.fsOptionLabel.checkbox {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAMFBMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRiqCmaAAAAD3RSTlMAVPgG4KyJW+TbA9imlAedocZxAAAAhUlEQVRIx2NgYGCWcfqPFWgfNGAAAcn/OMFEkPyy/3hAFlBBPj4F3xgYGP/jBQIMFvgVNDPU41fwnSEev4KvDP74FXxh0Mev4BPDfwJgVMGoglEFowpGFQy8AoKF+X4C1QHBCoVglUSoUusjWC0SrlgZ1uJTcIuYyp2BuRRH80AlHNg8AACZ4ca4X3RyIAAAAABJRU5ErkJggg==) no-repeat 0 0/14px;
}

.fsOptionLabel.checkbox:hover {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAP1BMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRGiIxkZGRZcHFKg4dQfH9Ud3lJhIhTeXsQ+RFEAAAADXRSTlMA4VT4qgaJW9sDlNcHfzE0FQAAANRJREFUWMPt10sOwyAMRVHzCyEtBpLsf62VUJUWCVU4b9IBd+4jZthUc9oqw4LMw2pHV3rlG636PR4WvtkSKvCZlwv1/QykiZxCAOXIM5QniwGWFAYoMtyUSo4/yiVxk6F2vJ3uGy3RAHscam8A6XwV+kCKw6UucIwDRw9IUVDqAEUClA6QJUDuAFHUBCYwgQlMYAJ/DxwAAH6u+PeOLxj4ioMvWfiaVzvjUCd/Ba+6+LK9MpSCDw745EGPrid+9uGHJ4WNb7YF9Pi+cl56/ivrXR19ATqs0yWLvA0oAAAAAElFTkSuQmCC) no-repeat  0 0/14px;
}

.ccp_is_checked.checkbox {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAV1BMVEUAAABkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGRkZGQA3OpkZGQC2eZiZ2dDjJEMzdohtb4upK1Aj5QLz9wOy9dEi48PytYjsrsqqrL2TP3CAAAADnRSTlMA4fhVBqyJW9tSppTXBwiKY90AAADvSURBVFjD7ZdJDsMgEASHgPcEbLwv/39nJEuxMhZJDK3cqBuHrhPSdNOOkqW4GQ9u91IqOihyE0BevPKpCSQ98pBBGgBJpAQiEIoyA5FRggkSEphAEP8/jV3bWn+kXlbb8B9F7DlP+ifTzCJM0OtL9EzA854GLrD6MtYlaMbrgrFxCAbtweAQdD6CziFofQStQ1D7CGqHQHsRBVEQBVEQBVHwZwF+2hbguCLnHS8YeMXBSxZe8w62a/ntPRNQdS2LnMv20H0t2203nMt2biAEPDjgyYOOrgc6++DhuVOF5itwfEs6UFniOf9Fkqk9+gRBQeONgh8DMwAAAABJRU5ErkJggg==) no-repeat  0 0/14px !important;
}
</style>

IN FORMSTACK FORM HEADER

• Embed jQuery AND any custom logic code using FormStack's builder
• Append this GIST's JavaScript to your custom logic code
• Make sure theme chosen uses this GIST's CSS

IN YOUR WEBSITE:

• Embed the form using Formstack's embed feature. Make sure to disable jQuery since we've added it in the form.