"form builder"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/MathiasaurusRex/pen/vyVpXP?limit=all&page=16&q=Form+Builder" /> <style class="cp-pen-styles">html, body{ width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; background-color: #3498db; } h1, h2, h3, h4, h5 ,h6{ font-weight: 200; } a{ text-decoration: none; } p, li, a{ font-size: 14px; } fieldset{ margin: 0; padding: 0; border: none; } /* GRID */ .twelve { width: 100%; } .eleven { width: 91.53%; } .ten { width: 83.06%; } .nine { width: 74.6%; } .eight { width: 66.13%; } .seven { width: 57.66%; } .six { width: 49.2%; } .five { width: 40.73%; } .four { width: 32.26%; } .three { width: 23.8%; } .two { width: 15.33%; } .one { width: 6.866%; } /* COLUMNS */ .col { display: block; float:left; margin: 0 0 0 1.6%; } .col:first-of-type { margin-left: 0; } .container{ width: 100%; max-width: 700px; margin: 0 auto; position: relative; } .container.form { float: right; width: 60%; } .row{ padding: 20px 0; } /* CLEARFIX */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .wrapper{ width: 100%; margin: 30px 0; } /* STEPS */ .steps{ list-style-type: none; margin: 0; padding: 0; background-color: #fff; text-align: center; } .steps li{ display: inline-block; margin: 20px; color: #ccc; padding-bottom: 5px; } .steps li.is-active{ border-bottom: 1px solid #3498db; color: #3498db; } /* FORM */ .form-wrapper .section{ padding: 0px 20px 30px 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; opacity: 0; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: top center; -moz-transform-origin: top center; -ms-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; text-align: center; position: absolute; width: 100%; min-height: 300px } .form-wrapper .section h3{ margin-bottom: 30px; } .form-wrapper .section.is-active{ opacity: 1; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } .form-wrapper .button, .form-wrapper .submit{ background-color: #3498db; display: inline-block; padding: 8px 30px; color: #fff; cursor: pointer; font-size: 14px !important; font-family: 'Open Sans', sans-serif !important; position: absolute; right: 20px; bottom: 20px; } .form-wrapper .submit{ border: none; outline: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .form-wrapper input[type="text"]{ display: block; padding: 10px; margin: 10px auto; background-color: #f1f1f1; border: none; width: 50%; outline: none; font-size: 14px !important; font-family: 'Open Sans', sans-serif !important; } .form-wrapper input[type="radio"]{ display: none; } .form-wrapper input[type="radio"] + label{ display: block; border: 1px solid #ccc; width: 100%; max-width: 100%; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; position: relative; } .form-wrapper input[type="radio"] + label:before{ content: "✔"; position: absolute; right: -10px; top: -10px; width: 30px; height: 30px; line-height: 30px; border-radius: 100%; background-color: #3498db; color: #fff; display: none; } .toolbox { background-color: white; height: auto; padding: 20px; margin: 30px 0 ; text-align: center; width: 30%; float: left; } .toolbox:after { content: ''; display: block; } .toolbox .option{ display: block; background-color: #3498db; color: white; width: 100%; max-width: 100%; padding: 10px; margin: 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; cursor: pointer; position: relative; } .form-wrapper input[type="radio"]:checked + label:before{ display: block; } .form-wrapper input[type="radio"] + label h4{ margin: 15px; color: #ccc; } .form-wrapper input[type="radio"]:checked + label{ border: 1px solid #3498db; } .form-wrapper input[type="radio"]:checked + label h4{ color: #3498db; } </style></head><body> <div class="container toolbox"> <div class="wrapper"> <div class="form-wrapper"> <h3>Form Builder Toolbox</h3> <div data-option="add-firstname" class="option"> First Name </div> <div data-option="add-email" class="option"> Email </div> <div data-option="add-age" class="option"> Age </div> <div data-option="add-income" class="option"> Income Amount </div> <div data-option="add-step"class="option"> Add Step </div> </div> </div> </div> <div class="container form"> <div class="wrapper"> <ul id="steps" class="steps"> <li class="is-active">Step 1</li> </ul> <form class="form-wrapper"> <fieldset id="section-1" class="section is-active"> <h3>Your Details</h3> <div id="section-1"> <!-- <input type="text" name="name" id="name" placeholder="Name"> <input type="text" name="email" id="email" placeholder="Email"> --> </div> <div class="button">Next</div> </fieldset> <fieldset class="section"> <h3>Account Type</h3> <!-- <div class="row cf"> <div class="four col"> <input type="radio" name="r1" id="r1" checked> <label for="r1"> <h4>Designer</h4> </label> </div> <div class="four col"> <input type="radio" name="r1" id="r2"><label for="r2"> <h4>Developer</h4> </label> </div> <div class="four col"> <input type="radio" name="r1" id="r3"><label for="r3"> <h4>Project Manager</h4> </label> </div> </div> --> <div class="button">Next</div> </fieldset> <fieldset class="section"> <h3>Choose a Password</h3> <!-- <input type="text" name="password" id="password" placeholder="Password"> <input type="text" name="password2" id="password2" placeholder="Re-enter Password"> --> <input class="submit button" type="submit" value="Sign Up"> </fieldset> <fieldset class="section"> <h3>Account Created!</h3> <p>Your account has now been created.</p> <div class="button">Reset Form</div> </fieldset> </form> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script >$(document).ready(function(){ $(".form-wrapper .button").click(function(){ var button = $(this); var currentSection = button.parents(".section"); var currentSectionIndex = currentSection.index(); var headerSection = $('.steps li').eq(currentSectionIndex); currentSection.removeClass("is-active").next().addClass("is-active"); headerSection.removeClass("is-active").next().addClass("is-active"); $(".form-wrapper").submit(function(e) { e.preventDefault(); }); if(currentSectionIndex === 3){ $(document).find(".form-wrapper .section").first().addClass("is-active"); $(document).find(".steps li").first().addClass("is-active"); } }); }); var toolOption = document.querySelectorAll('.option'); var stepsCount = 1; var firstName = "<input type='text' name='name' id='name' placeholder='Name'>" var currentSection = document.getElementById("section-1"); function selectTool(e){ var click = this.getAttribute('data-option'); if ( click === "add-firstname") { var newdiv = document.createElement('div'); newdiv.innerHTML = "<input type='text' name='name' id='name' placeholder='Name'>"; currentSection.appendChild(newdiv); } else if ( click === "add-email"){ var newdiv = document.createElement('div'); newdiv.innerHTML = "<input type='text' name='email' id='email' placeholder='email'>"; currentSection.appendChild(newdiv); } else if ( click === "add-age") { var newdiv = document.createElement('div'); newdiv.innerHTML = "<input type='text' name='age' id='age' placeholder='age'>"; currentSection.appendChild(newdiv); } else if ( click === "add-income") { } else if ( click === "add-step") { stepsCount ++; var ul = document.getElementById("steps"); var li = document.createElement("li"); li.appendChild(document.createTextNode("Step " + stepsCount)); ul.appendChild(li); } } toolOption.forEach(toolOption => toolOption.addEventListener('click', selectTool)); //# sourceURL=pen.js </script> </body></html>

Related: See More

Rubik Presentation Page
login-form
Login Form
Contact Form

Questions / Comments: