"API key with expanded survey"
Bootstrap 3.2.0 Snippet by Ignitrium

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <div class="container"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>API key registration & survey</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="domaininput">Domain / Site *</label> <div class="col-md-4"> <input id="domaininput" name="domaininput" type="text" placeholder="yourdomain.com" class="form-control input-md" required=""> <span class="help-block">A valid domain ensures that your Affinitomics work as expected.</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="emailinput">Email *</label> <div class="col-md-4"> <input id="emailinput" name="emailinput" type="text" placeholder="you@yourdomain.com" class="form-control input-md" required=""> <span class="help-block">A valid email ensures our ability to support your Affinitomics collection.</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="project">Project name</label> <div class="col-md-4"> <input id="project" name="project" type="text" placeholder="Puppy Finder" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="typesite">What type of site?</label> <div class="col-md-4"> <select id="typesite" name="typesite" class="form-control"> <option value="1">Social/Blog</option> <option value="2">E-Commerce</option> <option value="">General Business</option> <option value="">Entertainment</option> <option value="">News</option> <option value="">Directory</option> <option value="">Education</option> <option value="">Other</option> </select> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="submit">Submit the form without becoming an "Insider" with club benefits or a chance to win one of 5 lifetime licenses to Affinitomics for Wordpress Pro. <br/><span style="font-size: 120%; color: blue;">Or take 3 minutes to finish the survey...</span></label> <div class="col-md-4"> <button id="submit" name="submit" class="btn btn-warning" style="width: 360px;">Submit without benefits - Bummer</button> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="companyname">Company</label> <div class="col-md-4"> <input id="companyname" name="companyname" type="text" placeholder="Awesome, Inc." class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="phone">Phone:</label> <div class="col-md-4"> <input id="phone" name="phone" type="text" placeholder="(555) 555 - 5555" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="address">Address, City, State</label> <div class="col-md-4"> <input id="address" name="address" type="text" placeholder="12321 42nd St. New York, NY 10007" class="form-control input-md"> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="useageboxes">What will you use affinitomics for?</label> <div class="col-md-4"> <div class="checkbox"> <label for="useageboxes-0"> <input type="checkbox" name="useageboxes" id="useageboxes-0" value=""> Make your site “Smarter” </label> </div> <div class="checkbox"> <label for="useageboxes-1"> <input type="checkbox" name="useageboxes" id="useageboxes-1" value=""> Improve conversion / relevance </label> </div> <div class="checkbox"> <label for="useageboxes-2"> <input type="checkbox" name="useageboxes" id="useageboxes-2" value=""> Improve search & reduce noise </label> </div> <div class="checkbox"> <label for="useageboxes-3"> <input type="checkbox" name="useageboxes" id="useageboxes-3" value=""> Reduce programming time/Increase “League of Legend” standing </label> </div> <div class="checkbox"> <label for="useageboxes-4"> <input type="checkbox" name="useageboxes" id="useageboxes-4" value=""> Replace micro data / formats </label> </div> <div class="checkbox"> <label for="useageboxes-5"> <input type="checkbox" name="useageboxes" id="useageboxes-5" value=""> Reduce bandwidth cost & reliance on cookies </label> </div> <div class="checkbox"> <label for="useageboxes-6"> <input type="checkbox" name="useageboxes" id="useageboxes-6" value=""> Increase privacy </label> </div> <div class="checkbox"> <label for="useageboxes-7"> <input type="checkbox" name="useageboxes" id="useageboxes-7" value=""> Create intelligent filters and knowledgebases </label> </div> <div class="checkbox"> <label for="useageboxes-8"> <input type="checkbox" name="useageboxes" id="useageboxes-8" value=""> Improve SEM/SEO </label> </div> <div class="checkbox"> <label for="useageboxes-9"> <input type="checkbox" name="useageboxes" id="useageboxes-9" value=""> Other </label> </div> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="explainother"></label> <div class="col-md-4"> <textarea class="form-control" id="explainother" name="explainother">Explain "Other"</textarea> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="devsavings">How much time does Affinitomics save you over creating similar functionality?</label> <div class="col-md-4"> <select id="devsavings" name="devsavings" class="form-control"> <option value="">I don't know... Probably a lot</option> <option value="">Less than 25%</option> <option value="">25%</option> <option value="">50%</option> <option value="">75%</option> <option value="">More than 75%</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="howyouuse">How do you use Wordpress?</label> <div class="col-md-4"> <select id="howyouuse" name="howyouuse" class="form-control"> <option value="">Professional developer/designer</option> <option value="">Friends and family</option> <option value="">Personal use</option> </select> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="devpath">In the next 12 months Affinitomics will experience several upgrades. What features would you like to see added?</label> <div class="col-md-4"> <div class="checkbox"> <label for="devpath-0"> <input type="checkbox" name="devpath" id="devpath-0" value=""> Layouts (headline, image, excerpt) </label> </div> <div class="checkbox"> <label for="devpath-1"> <input type="checkbox" name="devpath" id="devpath-1" value=""> Geo-tagging </label> </div> <div class="checkbox"> <label for="devpath-2"> <input type="checkbox" name="devpath" id="devpath-2" value=""> Caching </label> </div> <div class="checkbox"> <label for="devpath-3"> <input type="checkbox" name="devpath" id="devpath-3" value=""> WYSIWYG Styling </label> </div> <div class="checkbox"> <label for="devpath-4"> <input type="checkbox" name="devpath" id="devpath-4" value=""> Email targeting </label> </div> <div class="checkbox"> <label for="devpath-5"> <input type="checkbox" name="devpath" id="devpath-5" value=""> Dynamic member pages </label> </div> <div class="checkbox"> <label for="devpath-6"> <input type="checkbox" name="devpath" id="devpath-6" value=""> Dynamic store </label> </div> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="how">Where/how did you find Affinitomics?</label> <div class="col-md-4"> <textarea class="form-control" id="how" name="how"></textarea> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="where">Where do you normally look for plugins?</label> <div class="col-md-4"> <textarea class="form-control" id="where" name="where"></textarea> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="submitfull"><span style="font-size: 110%; color: blue;">Submit survey and become an Insider with full benefits and a chance to win one of 5 lifetime licenses to Affinitomics for Wordpress Pro.</span></label> <div class="col-md-6"> <button id="submitfull" name="submitfull" class="btn btn-primary" style="width: 360px;">Submit with Full Benefits</button> </div> </div> </fieldset> </form> </div>

Related: See More


Questions / Comments: