<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"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>CreditCard MatchMaker</legend> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="Credit">Excellent Credit?</label> <div class="col-md-4"> <label class="radio-inline" for="Credit-0"> <input type="radio" name="Credit" id="Credit-0" value="Yes" checked="checked"> Yes </label> <label class="radio-inline" for="Credit-1"> <input type="radio" name="Credit" id="Credit-1" value="No"> No </label> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="Balance">Pay Full Balance?</label> <div class="col-md-4"> <label class="radio-inline" for="Balance-0"> <input type="radio" name="Balance" id="Balance-0" value="Yes" checked="checked"> Yes </label> <label class="radio-inline" for="Balance-1"> <input type="radio" name="Balance" id="Balance-1" value="No"> No </label> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="ccOpen">How Many Credit Cards Currently Open?</label> <div class="col-md-4"> <label class="radio-inline" for="ccOpen-0"> <input type="radio" name="ccOpen" id="ccOpen-0" value="4" checked="checked"> 0-4 </label> <label class="radio-inline" for="ccOpen-1"> <input type="radio" name="ccOpen" id="ccOpen-1" value="7"> 5-7 </label> <label class="radio-inline" for="ccOpen-2"> <input type="radio" name="ccOpen" id="ccOpen-2" value="8"> 8+ </label> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="ccNew3">How many credit cards have you opened in the past 3 months?</label> <div class="col-md-4"> <label class="radio-inline" for="ccNew3-0"> <input type="radio" name="ccNew3" id="ccNew3-0" value="0" checked="checked"> 0 </label> <label class="radio-inline" for="ccNew3-1"> <input type="radio" name="ccNew3" id="ccNew3-1" value="1"> 1 </label> <label class="radio-inline" for="ccNew3-2"> <input type="radio" name="ccNew3" id="ccNew3-2" value="2"> 2+ </label> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="ccPurpose">What is the purpose of the new credit card?</label> <div class="col-md-4"> <div class="radio"> <label for="ccPurpose-0"> <input type="radio" name="ccPurpose" id="ccPurpose-0" value="Primary" checked="checked"> Primary Card - An Everyday Card (Multi-Year) </label> </div> <div class="radio"> <label for="ccPurpose-1"> <input type="radio" name="ccPurpose" id="ccPurpose-1" value="Bonus"> Churn and Burn - Get The Best Sign-Up Bonus then Cancel (1 Year) </label> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="ccGoal">What reward type is most important to you for this card?</label> <div class="col-md-4"> <div class="radio"> <label for="ccGoal-0"> <input type="radio" name="ccGoal" id="ccGoal-0" value="cash" checked="checked"> Cashback </label> </div> <div class="radio"> <label for="ccGoal-1"> <input type="radio" name="ccGoal" id="ccGoal-1" value="flights"> Free Flights </label> </div> <div class="radio"> <label for="ccGoal-2"> <input type="radio" name="ccGoal" id="ccGoal-2" value="hotel"> Free Hotel Rooms </label> </div> <div class="radio"> <label for="ccGoal-3"> <input type="radio" name="ccGoal" id="ccGoal-3" value="perks"> Perks - Airline Lounge Access, Free Checked Bags, etc. </label> </div> <div class="radio"> <label for="ccGoal-4"> <input type="radio" name="ccGoal" id="ccGoal-4" value="status"> Accelerated Elite Hotel/Airline Status </label> </div> <div class="radio"> <label for="ccGoal-5"> <input type="radio" name="ccGoal" id="ccGoal-5" value="flexible"> Flexibility - A little of everything </label> </div> <div class="radio"> <label for="ccGoal-6"> <input type="radio" name="ccGoal" id="ccGoal-6" value="bonus"> Don't Care - Show me the best sign-up bonus available! </label> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="ccGoal2">What is the most important to you?</label> <div class="col-md-4"> <div class="radio"> <label for="ccGoal2-0"> <input type="radio" name="ccGoal2" id="ccGoal2-0" value="hard" checked="checked"> Maximizing rewards </label> </div> <div class="radio"> <label for="ccGoal2-1"> <input type="radio" name="ccGoal2" id="ccGoal2-1" value="easy"> No hassle redemption </label> </div> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="ccFee">Are you comfortable paying an annual fee to maximize your rewards?</label> <div class="col-md-4"> <label class="radio-inline" for="ccFee-0"> <input type="radio" name="ccFee" id="ccFee-0" value="1" checked="checked"> Yes </label> <label class="radio-inline" for="ccFee-1"> <input type="radio" name="ccFee" id="ccFee-1" value="0"> No </label> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="cc3MonthSpend">How much can you comfortably spend on this Credit Card in 3 months?</label> <div class="col-md-4"> <input id="cc3MonthSpend" name="cc3MonthSpend" type="text" placeholder="Estimate amount ($1000)" class="form-control input-md"> <span class="help-block">Not sure? Try combining your existing monthly credit card statements as an estimate.</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="cc12MonthSpend">How much will you spend on this Credit Card in a year?</label> <div class="col-md-4"> <input id="cc12MonthSpend" name="cc12MonthSpend" type="text" placeholder="Less 10,000" class="form-control input-md"> <span class="help-block">Think of what you put on your card now. Can you pay rent or put business expenses on it as well?</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="ccSpendGrocery">Groceries (Monthly)</label> <div class="col-md-4"> <input id="ccSpendGrocery" name="ccSpendGrocery" type="text" placeholder="" class="form-control input-md"> <span class="help-block">help</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="ccSpendGas">Gas (Monthly)</label> <div class="col-md-4"> <input id="ccSpendGas" name="ccSpendGas" type="text" placeholder="" class="form-control input-md"> <span class="help-block">help</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="ccSpendRestaurant">Restaurants (Monthly)</label> <div class="col-md-4"> <input id="ccSpendRestaurant" name="ccSpendRestaurant" type="text" placeholder="" class="form-control input-md"> <span class="help-block">help</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="ccSpendTravel">Travel (Flights and Hotels)</label> <div class="col-md-4"> <input id="ccSpendTravel" name="ccSpendTravel" type="text" placeholder="" class="form-control input-md"> <span class="help-block"> (Monthly)</span> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="ccSpendOther">All Other</label> <div class="col-md-4"> <input id="ccSpendOther" name="ccSpendOther" type="text" placeholder="" class="form-control input-md"> <span class="help-block">CALCULATE AUTOMATICALLY</span> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="ccTravelAbroad">Do you travel outside the US?</label> <div class="col-md-4"> <label class="radio-inline" for="ccTravelAbroad-0"> <input type="radio" name="ccTravelAbroad" id="ccTravelAbroad-0" value="1" checked="checked"> Yes </label> <label class="radio-inline" for="ccTravelAbroad-1"> <input type="radio" name="ccTravelAbroad" id="ccTravelAbroad-1" value="0"> No </label> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="ccNoForeignTxnFee">Do you have a credit card with "No Foreign Transaction Fees"?</label> <div class="col-md-4"> <label class="radio-inline" for="ccNoForeignTxnFee-0"> <input type="radio" name="ccNoForeignTxnFee" id="ccNoForeignTxnFee-0" value="1" checked="checked"> Yes </label> <label class="radio-inline" for="ccNoForeignTxnFee-1"> <input type="radio" name="ccNoForeignTxnFee" id="ccNoForeignTxnFee-1" value="0"> No </label> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="ccTravelAbroadDays">How many days will you spend outside the US this year?</label> <div class="col-md-4"> <input id="ccTravelAbroadDays" name="ccTravelAbroadDays" type="text" placeholder="Add rough estimate" class="form-control input-md"> <span class="help-block">help</span> </div> </div> </fieldset> </form> </div>