Interactive Forms

Forum|Forum|8 years ago
July 27, 2017
1 reply
3123 views

Hi, I would like to include on my website a page where clients can get an estimate on their project by using a calculator. Does anyone have any suggestions?

Thank you,

Carolyn

This topic has been closed for replies.

Correct answer Nancy OShea

This is the code I received for the website calculator:

	<!doctype html>
	<html>
	<head>
	<link rel="stylesheet" href="../css/examplespcstyle.css" type="text/css" />
	<script src="../js/jquery-1.11.1.min.js"></script>
	<script src="../js/jquery.number.min.js"></script>
	<script src="../js/simplepricecalc.min.js"></script>
	<script>
	$(document).ready( function ($) {
	$("#quoteform").SimplePriceCalc();

	$("#quoteform #submit").click( function (e) {
	e.preventDefault();
	alert("Form submission has been disabled for demo purposes");
	});
	});
	</script>
	</head>


	<body>

	<div id="main">
	<div class="spc-container">
	<header>
	<img src="spcthumb2.png" />
	<ul id="nav">
	<li><a href="compproduct.html">Detailed Product Form</a></li>
	<li><a href="webestimate.html"> Web Estimate Form</a> </li>
	<li><a href="pizzaform.html">Pizza Form</a></li>
	<li><a href="pizzamultiform.html">Multi-select Pizza Form</a></li>
	</ul>
	</header>

	<h1 style="color:#17526e; text-transform:uppercase; margin:40px 0;"> Website Estimate Form</h1>

	<form id="quoteform" class="fixed-total">

	<h2> Product Type </h2>
	<select>
	<option data-price="0"> Choose a type of website </option>
	<option data-price="800" data-label="Basic Website"> Basic Website </option>
	<option data-price="1500" data-label="E-Commerce Website"> E-Commerce Website </option>
	<option data-price="2000" data-label="Custom Website"> Custom Website </option>
	</select>
	<br />

	<h2> Optional Features </h2>

	<h4> Features </h4>
	<input type="checkbox" name="feat1" value="100" data-label="Mobile Friendly" >Mobile Friendly
	<input type="checkbox" name="feat2" value="200" data-label="SEO Optimized" >SEO Optimized
	<input type="checkbox" name="feat3" value="50" data-label="Google Analytics" >Google Analytics
	<br />

	<h4> WordPress/CMS Based Site? </h4>
	<input type="radio" name="css" value="0" data-label="No CMS"> No CMS
	<input type="radio" name="css" value="400" data-label="WordPress/CMS Based Site">WordPress/CMS Based Site <br />

	<h4> Other Comments </h4>
	<textarea rows="5" cols="40"></textarea>

	<br />

	<h4> E-mail:</h4>
	<input type="email" /> <br />
	<button id="submit"> Submit </button>

	</form>
	</div>
	</div>
	</body>
	</html>