"Flyer gen with custom code working with bashboard"
Bootstrap 3.3.0 Snippet by gbdevteam

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <section class="pagebgr" style="min-height:740px;"> <center> <br /><br /></center> <div class="container"> <div class="stepwizard"> <div class="stepwizard-row setup-panel"> <div class="stepwizard-step col-xs-3"> <a href="#step-1" type="button" class="btn btn-success btn-circle"><span class="glyphicon glyphicon-file"></span></a> <p><small>Type</small></p> </div> <div class="stepwizard-step col-xs-3"> <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="glyphicon glyphicon-th-large"></span></a> <p><small>Design</small></p> </div> <div class="stepwizard-step col-xs-3"> <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="glyphicon glyphicon-home"></span></a> <p><small>Info</small></p> </div> <div class="stepwizard-step col-xs-3"> <a href="#step-4" type="button" class="btn btn-default btn-circle" disabled="disabled"><span class="glyphicon glyphicon-ok"></span></a> <p><small>Ready</small></p> </div> </div> </div> </div> <form action="/flyer_step2.php?<?php echo http_build_query($_GET); ?>" method="post"> <input type="hidden" name="page_id" value="<?php echo $pageData; ?>"> <input type="hidden" name="user_id" value="<?php echo $userData; ?>"> <input type="hidden" name="created" value="<?php echo $created; ?>"> <div class="panel panel-primary setup-content" id="step-1"> <div class="panel-heading"> <h3 class="panel-title">Request a Flyer</h3> </div> <div class="panel-body"> <div class="myfields" style = "padding-bottom: 200px;"> <div class="row text-center"> <div class="col"> <label class="btn btn-primary new_listing"> New Listing <input type="radio" name="flyertype" class="flyertype" value="new_listing" /> </label> <label class="btn btn-primary open_house"> Open House <input type="radio" name="flyertype" class="flyertype" value="open_house" /> </label> <label class="btn btn-primary just_sold"> Just Sold <input type="radio" name="flyertype" class="flyertype" value="just_sold" /> </label> <br /> </div> </div> </div> </div> </div></form> </section>
body{ padding:0px; margin:0px; font-family: 'Open Sans', sans-serif; background-color: #F4F9FF; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } header{ padding: 15px 45px 10px; background-color: #fff; } header img{ max-width: 180px; } section{ padding: 30px 25px 150px; position: relative; bottom: 190px; left: 0; right: 0; top: 0px; height: 100%; } .home_center{ padding-top: 100px; } .left_side{ width: 48%; display: inline-block; vertical-align: middle; padding-right: 1%; } .right_side{ width: 50%; display: inline-block; vertical-align: middle; float: right; } section img{ max-width: 100%; } footer{ position: fixed; bottom: 0; left: 0; right: 0; background-color: #38BEEF; color: #fff; padding: 20px 35px; font-size: 14px; } .footer-left{ width: 49%; display: inline-block; } .footer-right{ width: 49%; display: inline-block; text-align: right; } h1{ font-family: 'Pacifico', cursive; color: #305887; font-size: 56px; margin: 0px; padding: 0px; } p{ color:#333333; font-size:16px; margin-top: 0px; margin-bottom: 25px; } strong{ color: #305887; margin-bottom: 10px; display: block; } .orange_button{ color: #ffff; display: inline-block; border-radius: 5px; text-decoration: none; font-size: 14px; border: 0px; margin-top: 5px; max-width: 280px; } .rowsmall{ max-width: 1000px; margin:auto; } footer a{ color:#fff; text-decoration:none; } #userData{ max-width: 80%; margin: auto; text-align: center; } .comp_img{ max-width: 65%; float: left; margin-left: -5%; margin-bottom:25px; } #userData .left_side{ vertical-align: top; padding-top: 0px; text-align:left; font-size:12px; color:#305887; } #userData .right_side{ text-align:left; font-size:12px; color:#305887; } #userData input{ border-radius: 2px; -webkit-appearance: none; box-shadow: none; border: 1px #CCCCCC solid; font-size: 14px; padding: 7px 12px; margin-top: 5px; margin-left: 4%; margin-right: 4%; width: 84%; } #userData input[type="radio"]{ -webkit-appearance: radio; width:inherit; } #userData label, #profile_form label{ margin-left: 4%; max-width: 500px; margin: auto; } .thankyou{ text-align:center; } hr{ opacity: 0.5; } #admin_nav{ float: right; } #admin_nav ul{ list-style: none; margin: 0px; padding: 0px; } #admin_nav li{ display: inline-block; font-size: 14px; text-transform: uppercase; padding: 10px; } #admin_nav a{ display: inline-block; border: 1px #ccc solid; padding: 7px; border-radius: 5px; text-decoration: none; color: #333; } .calendarpass{ font-weight:bold; color: #38BEEF; } @media screen and (max-width:768px){ .left_side,.right_side, .footer-left,.footer-right{ width:100%; } } ol { counter-reset: item; } ol > li { counter-increment: item; } ol ol > li { display: block; } ol ol > li:before { content: counters(item, ".") ". "; margin-left: -20px; } .glballis td{ padding: 5px; font-size: 11px; max-width: 380px; } .glballis tr:nth-child(2n) {background: #dae3ef} .propp{ background-color: #E0E9FF; } .boostpp{ background-color: #FFFAE5; } .elitepp{ background-color: #EEFFEB; } .pausedpp{ background-color: #EFEFEF; } .profile_title{ text-align: center; } #profile_form{ text-align: center; } .facebook_btn{ background-color: #305887; color: #fff !important; padding: 8px; display: block; text-align: Center; text-decoration: none; margin: 8px 5px 8px 12px; border-radius: 5px; } .twitter_btn{ background-color: #38BEEF; color: #fff !important; padding: 8px; display: block; text-align: Center; text-decoration: none; margin: 8px 5px 8px 12px; border-radius: 5px; } .insta_btn{ background-color: #A67F40; color: #fff !important; padding: 8px; display: block; text-align: Center; text-decoration: none; margin: 8px 5px 8px 12px; border-radius: 5px; } .boxblue { border:#38BEEF 1px solid !important; border-radius:5px; padding: 10px; margin:15px; font-size:14px; } .box_title{ background-color: #F4F9FF; margin-top: -20px; max-width: 150px; margin-left: auto; margin-right: auto; } #reviewer1, #reviewer2, #reviewer3{ max-width:10px; } textarea{ max-width: 90%; border-radius: 5px; border-color: #ccc; padding: 8px; } .submit_btn{ background-color: #305887; border-radius: 5px !important; border: 0px !important; padding: 13px !important; color: #fff; letter-spacing: 0px; width: 300px !important; font-size: 17px !important; cursor: pointer; text-decoration:none; } .submit_btn:hover{ background-color: #38BEEF; } .scroll_section{ border: #38BEEF 1px solid; border-radius: 5px; } .scroll_section .sec_title{ display: inline-block; } .scroll_section form{ display: inline-block; } .fullrow{ width: 180px; display: inline-block; padding: 20px; border: #fff 2px solid; border-radius: 5px; margin: 10px; box-shadow: 0px 0px 10px #ccc; } .section_tools{ background-color: #38BEEF; color: #fff; padding: 15px; } .idisabled{ opacity: 0.3; } .left_side3 { width: 30%; display: inline-block; vertical-align: middle; } .center_side3{ width: 30%; display: inline-block; vertical-align: middle; } .right_side3{ width: 30%; display: inline-block; vertical-align: middle; } .useractivity_box{ display: block; background-color: #d9dde3; margin-left: -25px; padding: 5px 25px 25px; margin-right: -25px; } .useractivity_box td{ padding: 5px; font-size: 11px; } .useractivity_box tr:nth-child(odd) {background: rgba(255,255,255,0.3)} .useractivity_box tr:nth-child(even) {background: rgba(255,255,255,0.5)} .blue_button{ background-color: #4468b0; color: #fff; text-decoration: none; padding: 15px 35px; border-radius: 10px; max-width: 200px; margin: auto; float: left; display: block; text-transform: uppercase; font-weight: bold; } .comp_box{ text-align: left; } .comp_img img{ max-width: 100% !important; } @media only screen and (min-width: 1450px){ .comp_img img{ max-width: 800px !important; } } .openadvset{ text-align:left; text-decoration:underline; } #chosenim img{ cursor: pointer; } #chosenim label{ padding:10px; } #chosenim .checked img{ border: 5px #38BEEF solid; padding: 10px; } #chosenim .unchecked img{ transform:scale(0.9); } #chosenim .submit_btn{ display: none; } #chosenim .checked .submit_btn{ display: inline-block; } #step-1, #step-2, #step-3, #step-4{ width: 900px; margin: 20px auto 65px; max-width: 100%; border: none; border-radius: 0px !important; box-shadow: 0 1px 33px rgba(0,0,0,.3); } .panel-heading{ border-radius: 0px !important; border: none!important; background-color: #F0843C !important; } .panel-title { font-family: 'Pacifico', cursive; color: #ffffff; font-size: 26px !important; margin: 0px; padding: 10px; font-weight: 100; text-align: left; } .stepwizard-step{ text-align:center; } .pagebgr{ background-color: #F4F9FF; padding:20px; } .btn-success{ color: #fff; background-color: #00c1f4 !important; border: none !important; } .btn-circle{ border-color: none; border-radius: 50% !important; width: 50px; height: 50px; font-size: 22px; padding-top: 10px; padding-right: 9px; margin-bottom: 5px; } .btn-circle .glyphicon{ font-size: 22px; padding-top: 5px; padding-left: 2px; } .new_listing{ background-color: #e9f5ff !important; border-color: #00c1f4 !important; color: #1d588a !important; } .open_house{ background-color: #f9fbf7 !important; border-color: #5cb85c !important; color: #0b752f !important; } .just_sold{ background-color: #fbfbf7 !important; border-color: #A67F40 !important; color: #A67F40 !important; } .btn-primary{ font-size: 18px; width: 200px !important; line-height: 160px !important; margin: 10px !important; text-transform: uppercase !important; } .btn-done{ background-color: #5cb85c !important; color: #fff !important; } .btn-primary:hover{ background-color: #e0f5e0 !important; } .btn-primary:active{ background-color: #d9eaef !important; } .btn_on{ background-color: #18bc4f !important; } input.flyertype{ display: none; } .pagebgr{ min-height:80vh; } .myfields{ padding-top: 85px !important; padding-bottom: 85px !important; } .mydesign{ padding: 20px !important; } .mydesign img{ border: 3px #ccc solid !important; } .mydesign img:hover{ border: 3px #00c1f4 solid !important; } .mydesign img:active{ border: 3px #5cb85c solid !important; } .mydesign .on img{ border: 3px #5cb85c solid !important; } .mydesign input{ display: none; } .mydesign label{ padding: 5px !important; margin-bottom: 20px !important; } .myinfo form{ text-align:left; } .myinfo{ padding: 20px 40px !important; } .myinfo .maxlength-feedback{ display: block; text-align: right; } .myinfo #maxLength{ width: 100%; max-width: 100%; } .myinfo h3{ color: #1d588a; font-size: 18px; font-weight: bold; } .submitflyer{ padding: 10px 60px !important; } .mainflyerform{ text-align: left !important; } .mainflyerform #displayValue, .mainflyerform input{ margin: 0px !important; }
$(function () { $('input[type=radio]').on('change', function() { $(this).closest('label').addClass('btn_on'); $(this).closest("form").submit(); }); });

Related: See More

Questions / Comments: