Interactive Forms

[carolyn@10541]

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

[BenPleysier]

There are a number of jQuery plugins to help you with that, just Google the subject.

A simple and cheap commercial product is here https://codecanyon.net/item/simple-price-calculator/8242357

[carolyn@10541]

Thanks Ben.

[carolyn@10541]

I used the product you recommended and it worked well, except that when I try the calculator, I receive the following message.

"Form submission has been disabled for demo purposes"

I am still learning JQuery and sent an email to the company that produces the product you mentioned. I was hoping that you might see something in the code to speed things up.

If anyone has recommendations, I would appreciate them. The code is below.

<div id="main">

<div class="spc-container">

<a href="IMAGES/logoform3.gif"><img src="IMAGES/logoform3.gif" /></a><br />

<h1><p class="text-primary"><strong>Website Estimate Form</strong></p></h1><br />

<h3><p align="center"><a href="CJDesign&ConsultingWebDesignProposal.pdf"><img class="acrobat_file.pdf" src="CJDesign&ConsultingWebDesignProposal.pdf" alt= "CJ Design & Consulting Web Design Proposal.pdf"></a></p></h3><br />

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

<h2><p class="text-primary"><strong>Product Type</strong></p></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><p class="text-primary"><strong>Optional Features</strong></p></h2>

<h3><p class="text-primary"><strong><em>Features</em></strong></p></h3>

<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 />

<h3><p class="text-primary"><strong><em>WordPress/CMS Based Site?</em></strong></p></h3>

<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 /><br /><br />

<h3><p class="text-primary"><strong>Other Comments</strong></p></h3>

<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>

</div>

</div>

<div class="container">

  <nav class="navbar navbar-default navbar-fixed-top">

    <div class="container-fluid">

      <!-- Brand and toggle get grouped for better mobile display -->

      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topFixedNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

        <a class="navbar-brand" href="#">CJ Design & Consulting</a></div>

      <!-- Collect the nav links, forms, and other content for toggling -->

      <div class="collapse navbar-collapse" id="topFixedNavbar1">

        <ul class="nav navbar-nav">

<li class="active"><a href="home.html">Home</a></li>

<li><a href="about.html">About</a></li>

<li><a href="testimonials.html">Testimonials</a></li>

     <li> <a class="dropdown-toggle" data-toggle="dropdown" href="service.html">Services <span class="caret"></span></a>

          <ul class="dropdown-menu">

          <li><a href="webdesign.html"><strong>Responsive Web Design</strong></a></li>

          <li><a href="whatareresponsivewebsites.html">What Are Responsive Websites

          <li><a href="whyresponsivedesign.html">Why Responsive Design

              <li class="divider"></li>

<li><a href="graphicdesign.html"><strong>Graphic Design</strong>

<li><a href="corporateidentity.html">Corporate Identity

<li><a href="newsletters.html">Newsletters

<li><a href="photoretouching.html">Photo Retouching

<li><a href="digitalphotography.html">Digital Photography

              <li class="divider"></li>

<li><a href="emailmarketing.html"><strong>Email Marketing</strong>

<li><a href="constant contactsolutionsprovider.html">Constant Contact Solutions Partner</a></li>

<li><a href="constant contactpricing.html">Constant Contact Pricing

<li><a href="cjdesignandconsultingemailmarketingpackagesandpricing.html">CJ Design & Consulting Email Marketing Services & Pricing

     <li class="divider"></li>

<li><a href="socialmedia.html"><strong>Social Media</strong></a></li>

</a></li></li></a></li></a></li></a></li></a></li></a></li></a></li></a></li></a></li></ul>

<li><a href="contact.html">Contact</a></li></li></ul>

<!-- ADD SEARCH FORM HERE -->

<form class="navbar-form navbar-right" role="search">

<div class="input-group">

<input type="text" class="form-control" placeholder="Search">

<span class="input-group-btn">

<button type="submit" class="btn btn-default">

<span class="glyphicon glyphicon-search"></span>

</button>

</span>

</div>

</form></div>

</div>

Thank you.

[Nancy OShea]

Did you include links to jQuery core library and the plugins in your document?  jQuery needs the core library to work.

[carolyn@10541]

Yes. I was told to put the following links in and I did.

<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>

[Nancy OShea]

Please PUT your test page online and post the URL so we can see it in action,.

Nancy

[carolyn@10541]

Here is the url.

www.cjdesignandconsulting.com/webpricingcalculator

Thank you.

Carolyn

[Nancy OShea]

The pricing calculator works exactly as expected.

The form submit is another matter.  You will need a server-side form processing script to handle form data.   Have you ever built one before?

[carolyn@10541]

No I have not.

[BenPleysier]

www.cjdesignandconsulting.com/webpricingcalculator seems to be offline, hence cannot see it.

[carolyn@10541]

Sorry it's http://www.cjdesignandconsulting.com/webpricingcalculator.html

[BenPleysier]

There are many errors in your document. I thought that I might write them down for you, but there are too many.

Please keep in mind that a structured HTML document should follow the following guide

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

</head>

<body>

</body>

</html>

You have a number of html, head and body tags.

Have a look at fixing these errors before proceeding to have a fully functioning form

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.cjdesignandconsulting.com%2Fwebpricingcalculator.h...

If you have questions about the errors, please come back here. After you have completed the corrections, osgood_ will help you with the form.

[osgood_]

carolyn@10541  wrote

I used the product you recommended and it worked well, except that when I try the calculator, I receive the following message.

"Form submission has been disabled for demo purposes"

The calculator functions as expected - what it does NOT do is send the data to a processing script to be processed when you click 'submit' as a result of the code in red below:

I don't know how this bit of kit works but I would assume it has the ability to validate the form input fields, i.e., if they are left empty there is some kind of functionally built in to alert the user to supply the required information, only then will it let the form be passed on to the processing script.

<script>

$(document).ready( function ($) {

$("#quoteform").SimplePriceCalc();

$("#quoteform #submit").click( function (e) {

e.preventDefault();

alert("Form submission has been disabled for demo purposes");

});

});

</script>

As a validation example: if you replace the red code above with the red code below that wiil check to see that the user has provided an option:

<script>

$(document).ready( function ($) {

$("#quoteform").SimplePriceCalc();

$("#quoteform #submit").click( function (e) {

var options = $('.options').val();

if(options === "" || options == "Choose a type of website") {

alert('Please choose a type of website);

return false;

}

});

});

</script>

You need to give the <select> tag a class of 'options':

<select class="options">

<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>

The bit of kit you have purchased may well have a feature similar built in.

For the processing bit you need to direct the form to a procesing script in the <form> tag:

<form id="quoteform" class="fixed-total" action="process-info.php">

[carolyn@10541]

This is an old document and I am only focusing on the "web calculator and as previously stated I am not yet proficient in jquery or php.

Thank you.

[osgood_]

carolyn@10541  wrote

This is an old document and I am only focusing on the "web calculator and as previously stated I am not yet proficient in jquery or php.

Not sure what, if anything you are asking. If you are only focusing on the  'calculator' then not sure why you have the Other Comments/Email boxes and submit button - the calculator works using the onchange event.

So If you are not intending to use the Other Comments and Email boxes and have the information submitted, you can remove those an the calculator will still work as  stand-alone application

[Nancy OShea]

If not what osgood said then you're putting the cart way before the horse.  The  document must be error free as Ben noted above and the <form> & processing script must work correctly  before you  introduce a widget calculator into the mix.   Take one step at a time.

Nancy

[carolyn@10541]

I'm just trying to get the Website Calculator to work. When you hit the submit button, a message comes up "cjdesignandconsulting.com says Form submission has been disabled for demo purposes." I want the form to be able to be submitted error free.

Carolyn

[carolyn@10541]

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>

[Nancy OShea · Accepted solution]

Because you purchased a calculator script and not a form processing script, the form does nothing.

This code is sending up the alert message when submit button is clicked.

<script>

    $(document).ready( function ($) {

    $("#quoteform").SimplePriceCalc();

    $("#quoteform #submit").click( function (e) {

    e.preventDefault();

    alert("Form submission has been disabled for demo purposes");

    });

    });

    </script>

Contact Form & PHP Script (3 part tutorial)

Alt-Web Design & Publishing: Responsive Contact Form with Bootstrap 3.2 and PHP (Part 1)

[carolyn@10541]

Thank you Nancy and everyone. I appreciate everyone's suggestions.

Carolyn

[carolyn@10541]

Nancy,

I'm learning php. Any chance you would be able to help me with the processing part of the form I shared?

Thank you.

Carolym

[Nancy OShea]

Your HTML <form> is not a form yet.  Focus on that part first.

Nancy

[carolyn@10541]

Hmm. That was the code I was given. I'm pasting the code below.

Thank you Nancy and thank for the link. It's great reading.

<!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>