"Signup Form"
Bootstrap 2.3.2 Snippet by josemiguelweb

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen"> <div class="container"> <div class="process"> <div class="process-row"> <div class="process-step"> <button type="button" class="btn btn-success btn-circle" disabled="disabled"><i class="fa fa-envelope-o fa-3x"></i></button> <p>verify work email</p> </div> <div class="process-step"> <button type="button" class="btn btn-success btn-circle" disabled="disabled"><i class="fa fa-linkedin fa-3x"></i></button> <p>verify linkedin</p> </div> <div class="process-step"> <button type="button" class="btn btn-default btn-circle" disabled="disabled"><i class="fa fa-user fa-3x"></i></button> <p>complete profile in 10s</p> </div> <div class="process-step"> <button type="button" class="btn btn-default btn-circle" disabled="disabled"><i class="fa fa-flag-checkered fa-3x"></i></button> <p>Donezo!</p> </div> </div> </div> </> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Complete profile in 10 seconds or less.</legend> <!-- Text input--> <div class="control-group"> <div class="controls"> <img src="http://api.randomuser.me/portraits/women/76.jpg" alt="Glenda Patterson" class="img-responsive img-circle" width="70px"/> <a href="#">Change profile photo</a> </div> </div> <div class="control-group"> <label class="control-label" for="textinput">First Name</label> <div class="controls"> <input id="textinput" name="textinput" type="text" placeholder="Nicholas (LI Import)" class="input-xlarge required"> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="textinput">Last Name</label> <div class="controls"> <input id="textinput" name="textinput" type="text" placeholder="Cavet" class="input-xlarge required"> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="textinput">Title</label> <div class="controls"> <input id="textinput" name="textinput" type="text" placeholder="Strategy Director (Autocomplete)" class="input-xlarge required"> </div> </div> <!-- Select Basic --> <div class="control-group"> <label class="control-label" for="selectbasic">Company</label> <div class="controls"> <select id="selectbasic" name="selectbasic" class="input-xlarge required"> <option>LI Company Imported 1</option> <option>LI Company Imported 2</option> </select> </div> </div> <!-- Office select only appears when company type is undefined in the vendori database--> <div class="control-group"> <label class="control-label" for="selectbasic">Office</label> <div class="controls"> <select id="selectbasic" name="selectbasic" class="input-xlarge required"> <option>LI Import Office 1 (city)</option> <option>LI Import Office 2 (city)</option> <option>LI Import Office 3 (city)</option> </select> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="textinput">Department</label> <div class="controls"> <input id="textinput" name="textinput" type="text" placeholder="(Autocomplete filtered by current company)" class="input-xlarge required" title="Find other vendori users in your department."> </div> </div> <!-- User type only appears when company type is undefined in the vendori database--> <div class="control-group"> <label class="control-label" for="selectbasic">User Type</label> <div class="controls"> <select id="selectbasic" name="selectbasic" class="input-xlarge required"> <!-- There are still only 3 company types ID(marketer, agency, vendor) the front end uses labels to help users determine the best fit.--> <option id="marketer">Marketer</option> <option id="agency">Agency</option> <option id="agency">Media Agency</option> <option id="vendor">Vendor (Publishers, Networks, Research, Tech etc.)</option> <option id="other">Trade Association</option> <option id="other">Press</option> </select> </div> </div> <!-- Select Job Function (Values change depending on user type) --> <div class="control-group"> <label class="control-label" for="selectbasic">Job Function</label> <div class="controls"> <select id="selectbasic" name="selectbasic" class="input-xlarge required"> <!-- The signup form uses a select for job function to determine text on signup success page. It's still an auto complete open field on user settings.--> <option>Vendor: Marketing</option> <option>Vendor: Inside Sales</option> <option>Vendor: Outside Sales</option> <option>Vendor: Account Management</option> <option>Marketer: Brand Management and Marketing Direction</option> <option>Marketer: Marketing support: Insights, Innovation, Agency Relations, Procurement, etc. </option> <option>Agency: Account Management</option> <option>Agency: Strategy and Planning</option> <option>Agency: Research</option> <option>Agency: Creative</option> <option>Agency: External Marketing</option> <option>Agency: New Business</option> </select> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="textinput">Mobile phone</label> <div class="controls"> <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="input-xlarge required" title="Your mobile phone is only visible to your current partners with permission."> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="textinput">Work phone</label> <div class="controls"> <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="input-xlarge required" title="Your work phone is only visible to your current partners with permission."> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="textinput">Work Email</label> <div class="controls"> <input id="textinput" name="textinput" type="text" placeholder="(LI Import)" class="input-xlarge" disabled> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="textinput">Backup Email</label> <div class="controls"> <input id="textinput" name="textinput" type="text" placeholder="(LI Import)" class="input-xlarge required"> <p class="help-block">for your security</p> </div> </div> <!-- Multiple Radios (inline) --> <div class="control-group"> <label class="control-label" for="radios">Phone contact preference</label> <div class="controls"> <label class="radio inline" for="radios-0"> <input type="radio" name="radios" id="radios-0" value="Mobile Phone"> Mobile Phone </label> <label class="radio inline" for="radios-1"> <input type="radio" name="radios" id="radios-1" value="Work Phone" checked="checked"> Work Phone </label> </div> </div> <!-- User can enter brands not in Vendori database. Autocomplete with brands. --> <div class="control-group"> <label class="control-label" for="textarea">Brands I work on</label> <div class="controls"> <textarea id="textarea" name="textarea" class="one-required" title="The more brands you add the more relevant your site experience will be."></textarea> </div> </div> <!-- User can enter companies not in Vendori database. Autocomplete with companies type = agencies --> <div class="control-group"> <label class="control-label" for="textarea">Agencies I work with</label> <div class="controls"> <textarea id="textarea" name="textarea" class="one-required" title="Add all of your agency partners to get their latest decks, videos and thought leadership."></textarea> </div> </div> <!-- User can enter companies not in Vendori database. Autocomplete with companies type = vendor --> <div class="control-group"> <label class="control-label" for="textarea">Vendors (and Publishers) I work with</label> <div class="controls"> <textarea id="textarea" name="textarea" class="one-required" title="Add all of your vendors so you don't miss out on any new opportunities."></textarea> </div> </div> <!-- User can enter solutions not in Vendori database. Autocomplete with solutions --> <div class="control-group"> <label class="control-label" for="textarea">3+ solutions I need (or provide) for brands</label> <div class="controls"> <textarea id="textarea" name="textarea" class="three-required" title="Solutions help match you to new opportunities in your area of focus."></textarea> </div> </div> <!-- User can enter channels not in Vendori database. Autocomplete with channels. --> <div class="control-group"> <label class="control-label" for="textarea">3+ channels I activate in for brands</label> <div class="controls"> <textarea id="textarea" name="textarea" class="three-required" title="Channels help match you to new opportunities in your area of focus."></textarea> </div> </div> <!-- Button --> <div class="control-group"> <label class="control-label" for="singlebutton"></label> <div class="controls"> <button id="singlebutton" name="singlebutton" class="btn btn-primary">Complete Registration!</button> </div> </div> </fieldset> </form>
body{margin:40px;} .stepwizard-step p { margin-top: 10px; } .process-row { display: table-row; } .process { display: table; width: 100%; position: relative; } .process-step button[disabled] { opacity: 1 !important; filter: alpha(opacity=100) !important; } .process-row:before { top: 50px; bottom: 0; position: absolute; content: " "; width: 100%; height: 1px; background-color: #ccc; z-order: 0; } .process-step { display: table-cell; text-align: center; position: relative; } .process-step p { margin-top:10px; } .btn-circle { width: 100px; height: 100px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .panel > .list-group .list-group-item:first-child { /*border-top: 1px solid rgb(204, 204, 204);*/ } @media (max-width: 767px) { .visible-xs { display: inline-block !important; } .block { display: block !important; width: 100%; height: 1px !important; } } #back-to-bootsnipp { position: fixed; top: 10px; right: 10px; } .c-search > .form-control { border-radius: 0px; border-width: 0px; border-bottom-width: 1px; font-size: 1.3em; padding: 12px 12px; height: 44px; outline: none !important; } .c-search > .form-control:focus { outline:0px !important; -webkit-appearance:none; box-shadow: none; } .c-search > .input-group-btn .btn { border-radius: 0px; border-width: 0px; border-left-width: 1px; border-bottom-width: 1px; height: 44px; } .c-list { padding: 0px; min-height: 44px; } .title { display: inline-block; font-size: 1.7em; font-weight: bold; padding: 5px 15px; } ul.c-controls { list-style: none; margin: 0px; min-height: 44px; } ul.c-controls li { margin-top: 8px; float: left; } ul.c-controls li a { font-size: 1.7em; padding: 11px 10px 6px; } ul.c-controls li a i { min-width: 24px; text-align: center; } ul.c-controls li a:hover { background-color: rgba(51, 51, 51, 0.2); } .c-toggle { font-size: 1.7em; } .name { font-size: 1.7em; font-weight: 700; } .c-info { padding: 5px 10px; font-size: 1.25em; }
$(document).tooltip({ selector: "[title]", placement: "right", animation: false});

Related: See More


Questions / Comments: