"Web Design Cost Form"
Bootstrap 3.3.0 Snippet by mita

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Web Design Cost Form</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <link href="custom.css" rel="stylesheet" type="text/css"> <script> function finalCost(){ var cat = document.getElementById("site_category").value; var page = document.getElementById("page_number").value; var img = document.getElementById("img_number").value; var slider = document.getElementById("slider_number").value; var seo = document.getElementById("month_seo").value; var total = (parseInt(cat)*10) + (parseInt(page)*2) + (parseInt(img)*1) + (parseInt(slider)*5) + (parseInt(seo)*8); document.getElementById("result").innerHTML = total; } </script> </head> <body> <div class="web_design_box"> <form> <h3>Web Design Cost Form </h3><br> <div class="form-group"> <label>Category</label> <select class="form-control" id="site_category" onchange="finalCost()"> <option value="0">Select website category ...</option> <option value="2"> Corporate </option> <option value="3"> eCommerce </option> <option value="4"> Education </option> <option value="5"> Entertainment </option> <option value="6"> Real Estate </option> <option value="7"> Technology </option> </select> </div> <div class="form-group"> <label>Namber of pages</label> <input type="number" class="form-control" id="page_number" value="0" placeholder="How many pages you want?" onkeyup="finalCost()"> </div> <div class="form-group"> <label>Namber of images</label> <input type="number" class="form-control" id="img_number" value="0" placeholder="How many images you want?" onkeyup="finalCost()"> </div> <div class="form-group"> <label>Namber of sliders </label> <input type="number" class="form-control" id="slider_number" value="0" placeholder="How many sliders you want?" onkeyup="finalCost()"> </div> <div class="form-group"> <label>Monthly SEO</label> <select class="form-control" id="month_seo" onchange="finalCost()"> <option value="0">Do you want SEO?</option> <option value="1"> Yes </option> <option value="2"> No </option> <option value="0"> Later</option> </select> </div><br> <div class="form-group"> <label>Total Cost ($) : </label> <span id="result" style="background-color: #31418f;color: #fff;padding: 6px 70px;font-weight: 600;font-size: 18px; margin-left: 10px;border-radius: 5px;">0</span> </div> </form> </div> </body> </html>
#output { background-color: #c5edf3; color: #463c39; font-size: 17px; padding: 30px 30px; width: 40%; border: 2px solid #009688; font-family: sans-serif; line-height: 1.8; } #newPublish { background-color: #c5edf3; color: #463c39; font-size: 17px; padding: 30px 30px; width: 40%; border: 2px solid #009688; font-family: sans-serif; line-height: 1.8; } .box { background-color: #f7f7f7; margin-top: 60px; margin-bottom: 50px; padding: 40px 60px; } #details_info { background-color: #f7f7f7; color: #463c39; font-size: 17px; padding: 30px 30px; width: 40%; border: 1px solid #cccccc; font-family: sans-serif; line-height: 1.8; margin-left: 90px; } .box3 { margin-top: 80px; margin-left: 150px; margin-right: 150px; margin-bottom: 60px; padding: 40px 50px; background-color: gainsboro; } .box11 { margin-top: 80px; margin-left: 250px; margin-right: 250px; margin-bottom: 60px; padding: 40px 50px; background-color: gainsboro; line-height: 2.5; } .web_design_box { margin-top: 30px; margin-left: 350px; margin-right: 350px; margin-bottom: 60px; padding: 40px 50px; background-color: #d9edf7; box-shadow: 3px 5px 10px #318f86; } .hotel_reserve_box { margin-top: 30px; margin-left: 350px; margin-right: 350px; margin-bottom: 60px; padding: 40px 50px; background-color: #c6badc; box-shadow: 3px 5px 10px #7527b0; } .online_food_delivery_box { margin-top: 50px; margin-left: 350px; margin-right: 350px; margin-bottom: 60px; padding: 20px 40px; background-color: #d4c0b9; box-shadow: 3px 5px 10px #714c4a; } .result_box { margin-top: 15%; margin-left: 350px; margin-right: 350px; margin-bottom: 60px; padding: 20px 40px; background-color: #d4c0b9; box-shadow: 3px 5px 10px #8BC34A; } .result_box_text { color: #232222; font-size: 20px; text-align: center; padding-top:10px; } .result_box_text span { color: #614136; font-size: 26px; text-align: center; }

Related: See More

Vue Material Kit
Bootstrap Dual Design Registration Form
Bootstrap 4 Footer Design
Team Design Section with Pure CSS Effect

Questions / Comments: