<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 ----------> <div class="container"> <div class="row"> <form autocomplete="off" id="authorize-pay-public-form" name="authorize_pay_public_form" action="" method="post"> <h1 style="color: #000000 !important"><b>Pay with your Credit Card</b></h1> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">Card Number:</div> <div class="col-sm-9 col-xs-9 edit-member"> <input class="form-control" type="text" name="ccnum" id="ccnum" value=""/> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">CVV:</div> <div class="col-sm-5 col-xs-5 edit-member"> <input class="form-control" type="text" name="ccid" id="ccid" value="" style="width: 35%"/> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">Expiration Date:</div> <div class="row edit-member"> <div class="col-sm-2 col-xs-2"> <select class="form-control" name="ExpMonth"> <option value="01">01</option> <option value="01">01</option> <option value="01">01</option> <option value="01">01</option> <option value="01">01</option> </select> </div> <div class="col-sm-2 col-xs-2" style="padding-right:0px"> <select class="form-control" name="ExpYear"> <option value="01">01</option> <option value="01">01</option> <option value="01">01</option> <option value="01">01</option> <option value="01">01</option> </select> </div> </div> <div class="clearfix"></div> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">Email:</div> <div class="col-sm-9 col-xs-9 edit-member"> <input class="form-control" type="text" id="email" name="email" value=""/> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">Re-enter email:</div> <div class="col-sm-9 col-xs-9 edit-member"> <input id="re_enter_email" class="form-control" type="text" name="re_enter_email"/> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <h1><b>Billing Details:</b></h1> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">First Name:</div> <div class="col-sm-9 col-xs-9 edit-member"> <input class="form-control" type="text" name="firstname" value=""/> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">Last Name:</div> <div class="col-sm-9 col-xs-9 edit-member"> <input class="form-control" type="text" name="lastname" value=""/> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">Address:</div> <div class="col-sm-9 col-xs-9 edit-member"> <input class="form-control" type="text" name="address" value=""/> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">City:</div> <div class="col-sm-9 col-xs-9 edit-member"> <input class="form-control" type="text" name="city" value=""/> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">State:</div> <div class="col-sm-9 col-xs-9 edit-member"> <input class="form-control" type="text" name="state" value=""/> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">Zip/Postal Code:</div> <div class="col-sm-9 col-xs-9 edit-member"> <input class="form-control" type="text" name="zip" value=""/> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">Country:</div> <div class="col-sm-9 col-xs-9 edit-member"> <select class="form-control" name="country"> <option value="1">1</option> </select> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">Phone:</div> <div class="col-sm-9 col-xs-9 edit-member"> <input id='phone' class="form-control" type="text" name="phone" value=""/> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <div class="col-sm-3 col-xs-3 text-left l-height-adjust">Comments:</div> <div class="col-sm-9 col-xs-9 edit-member"> <textarea class="form-control" name="comments" value=""></textarea> <span id="errorMsg" style="color:red; display: none;"></span> </div> <div class="clearfix"></div> <div class="col-sm-12 col-xs-12 edit-member" style="text-align: center;"> <button type="submit" class="pay-now-btn">PAY NOW</button> <button type="button" class="pay-now-btn">Back</button> </div> <input id="lat" type="hidden" name="lat"/> <input id="long" type="hidden" name="long"/> </form> </div> </div>