JSFiddle - React, Tailwind, and code Playground

NEW - Form Settings Interface

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.3.0/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<form class="form-horizontal">
  <div class="form-group">
    <label for="formname" class="col-sm-5 control-label">Form name</label>
    <div class="col-sm-7">
      <input type="text" class="form-control" id="formname" value="Form name">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-5 control-label">Restore progress where the user left off</label>
    <div class="col-sm-7">
      <div class="radio">
        <label for="restorealways">
          <input type="radio" name="restore_actions" id="restorealways" checked> <strong>Always</strong> - User's progress of the form will be saved until it's submitted</label>
      </div>
      <div class="radio">
        <label for="restorenever">
          <input type="radio" name="restore_actions" id="restorenever"> <strong>Never</strong> - User's progress of the form will not be saved</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-5 control-label">Add a button for users to clear the form</label>
    <div class="col-sm-7">
      <div class="checkbox">
        <label for="addclear">
          <input type="checkbox" name="clear_actions" id="addclear" checked>Yes, please</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-5 control-label">Complete a form first</label>
    <div class="col-sm-7">
      <div class="checkbox">
        <label for="complete_form">
          <input type="checkbox" name="complete_form" id="complete_form">Yes, the user must complete a form first</label>
      </div>
      <div class="checkPreviousForm">
        <div class="form-group">
          <label class="col-sm-12 control-label text-left">Choose...

CSS

.form-horizontal {
  padding: 40px 25px 0 25px;
}

.form-horizontal .form-group {
  margin-bottom: 0;
  padding: 15px 0;
}

.form-horizontal .form-group:first-child {
  margin-top: 0px;
}

.form-horizontal .preview-buttom {
  padding-top: 7px;
}

.help-block {
  margin-bottom: 0;
}

.text-left {
  text-align: left !important;
  margin-bottom: 5px !important;
}

.attachFormWrap,
.checkPreviousForm,
.sendEmailWrap,
.sendTemplateWrap,
.redirectWrap,
.confirmationWrap {
  display: none;
  padding: 5px 5px 10px 5px;
  background-color: #F5F5F5;
  border-radius: 6px;
  margin-bottom: 10px;
  margin-left: 20px;
}

.attachFormWrap .form-group,
.checkPreviousForm .form-group,
.sendEmailWrap .form-group,
.sendTemplateWrap .form-group,
.redirectWrap .form-group,
.confirmationWrap .form-group {
  margin-left: 0;
  margin-right: 0;
}

JavaScript

if ($('#attachdata').is(':checked')) {
  $('.attachFormWrap').show();
}

$('#attachdata').on('change', function() {
  if ($(this).is(":checked")) {
    $('.attachFormWrap').fadeIn();
  } else {
    $('.attachFormWrap').hide();
  }
});

if ($('#complete_form').is(':checked')) {
  $('.checkPreviousForm').show();
}

$('#complete_form').on('change', function() {
  if ($(this).is(":checked")) {
    $('.checkPreviousForm').fadeIn();
  } else {
    $('.checkPreviousForm').hide();
  }
});

if ($('#sendnote').is(':checked')) {
  $('.sendEmailWrap').show();
}

$('#sendnote').on('change', function() {
  if ($(this).is(":checked")) {
    $('.sendEmailWrap').fadeIn();
  } else {
    $('.sendEmailWrap').hide();
  }
});

if ($('#sendtemplate').is(':checked')) {
  $('.sendTemplateWrap').show();
}

$('#sendtemplate').on('change', function() {
  if ($(this).is(":checked")) {
    $('.sendTemplateWrap').fadeIn();
  } else {
    $('.sendTemplateWrap').hide();
  }
});

if ($('#redirectyes').is(':checked')) {
  $('.redirectWrap').show();
}

$('input[type="radio"]').on('click', function() {
  if ($(this).attr('id') == 'redirectyes') {
    $('.redirectWrap').fadeIn();
  } else {
    $('.redirectWrap').hide();
  }
});

if ($('#redirectno').is(':checked')) {
  $('.confirmationWrap').show();
}

$('input[type="radio"]').on('click', function() {
  if ($(this).attr('id') == 'redirectno') {
    $('.confirmationWrap').fadeIn();
  } else {
    $('.confirmationWrap').hide();
  }
});