"Credit card payment form"
Bootstrap 2.3.2 Snippet by msurguy

<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 ----------> <div class="container"> <div class="row-fluid"> <form class="form-horizontal"> <fieldset> <div id="legend"> <legend class="">Payment</legend> </div> <!-- Name --> <div class="control-group"> <label class="control-label" for="username">Card Holder's Name</label> <div class="controls"> <input type="text" id="username" name="username" placeholder="" class="input-xlarge"> </div> </div> <!-- Card Number --> <div class="control-group"> <label class="control-label" for="email">Card Number</label> <div class="controls"> <input type="text" id="email" name="email" placeholder="" class="input-xlarge"> </div> </div> <!-- Expiry--> <div class="control-group"> <label class="control-label" for="password">Card Expiry Date</label> <div class="controls"> <select class="span3" name="expiry_month" id="expiry_month"> <option></option> <option value="01">Jan (01)</option> <option value="02">Feb (02)</option> <option value="03">Mar (03)</option> <option value="04">Apr (04)</option> <option value="05">May (05)</option> <option value="06">June (06)</option> <option value="07">July (07)</option> <option value="08">Aug (08)</option> <option value="09">Sep (09)</option> <option value="10">Oct (10)</option>1 <option value="11">Nov (11)</option> <option value="12">Dec (12)</option> </select> <select class="span2" name="expiry_year"> <option value="13">2013</option> <option value="14">2014</option> <option value="15">2015</option> <option value="16">2016</option> <option value="17">2017</option> <option value="18">2018</option> <option value="19">2019</option> <option value="20">2020</option> <option value="21">2021</option> <option value="22">2022</option> <option value="23">2023</option> </select> </div> </div> <!-- CVV --> <div class="control-group"> <label class="control-label" for="password_confirm">Card CVV</label> <div class="controls"> <input type="password" id="password_confirm" name="password_confirm" placeholder="" class="span2"> </div> </div> <!-- Save card --> <div class="control-group"> <div class="controls"> <label class="checkbox" for="save_card"> <input type="checkbox" id="save_card" value="option1"> Save card on file? </label> </div> </div> <!-- Submit --> <div class="control-group"> <div class="controls"> <button class="btn btn-success">Pay Now</button> </div> </div> </fieldset> </form> </div> </div>

Related: See More


Questions / Comments:

I can't see the code

Tobias Johansen () - 1 year ago - Reply 0


Some of the label and input attributes are incorrectly named. It's no big deal, just be sure to rename them as necessary.

Tim Holt () - 4 years ago - Reply 0


I'm sorry but I have to point out the field names for the card holder name is "username" and the field name for the card number is "email" and the ID's in the label for attributes are all wrong. This is a really bad copy/paste job :(

jaimz () - 4 years ago - Reply 0


Your form fields are not aligned at all, try to change it to something like this one: http://cssdesk.com/sycDh

Marchenko Alexandr () - 5 years ago - Reply 0


Could you please submit that as a new snippet? I like the improved version but I'd also like to keep this one here.

maxsurguy () - 5 years ago - Reply 0