I am currently developing a new website for a well-established small business to replace their old, poorly designed one. Run by one person with a team of three full-time employees, the owner inevitably misses many potential client phone calls whilst out conducting business.
For this reason I am creating an automatic quote generator on the website, that will email the given quote, services selected and details given by the user to the owner, so that he can follow up on them later.
So far, I have developed a button which when clicked, grows to the centre of the page and gives services for the user to choose. Now I am at the tricky part.
I need the selected services to produce values that will then be added together and appear in a div of my choosing, then i need VAT to be calculated from that (20%) and displayed in a div below, then both values to be added and give the final value in a div below that.
I search and search google, and all the forums it points me to, but I cannot find an example similar enough that I can learn from and apply it. There are various places that have small parts of what I'm trying to do but combining them won't really help and may prove detrimental to the sites loading times, experience etc.
Here is my code for the pop-out interface. I have modified it slightly and should open almost perfectly as is when saved with any text editor. Slight defect with the right div but there is no problem when it is on the website.
Any help would be greatly appreciated, hidden resources? good intermediate articles? (the beginner ones are too simple for this task)
Furthermore, from what I have researched thus far, I understand that I will need to use PHP to send automated emails to both the owner and a customary "Thanks.. we'll be in touch soon" email to the potential client. Do I need to modify my JS/jQuery in any way to allow that or can I develop this to a functional state before I get stuck in to that part? Also do the calculated values have to be inserted into a form input field for them to be sent to the server and subsequently owner & client?
Thanks in advance for any and all help.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body { width:100%; height:100%; text-align:center; margin:0px; }
div#bodycontainer { position:absolute; min-width:100%; height:100%; padding:0px; z-index:100; }
div.centerdiv { position:relative; width:1100px; height:100%; margin:0 auto; border-left:solid 2px #ddd; border-right:solid 2px #ddd; background-image:url(images/transport_background_alt.png); overflow:visible; background-position:0px 0px; background-repeat:no-repeat; z-index:1 }
div#getaquote { width:320px; height:55px; border:solid 1px #516c84; border-radius:15px; float:right; background:url(images/quotebkgd.png) no-repeat #fff; background-position:500px -50px; padding:none; }
button#quote { width:300px; height:50px; margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:22px; color:#516c84; background-color:#fff; border:none; }
p#quotetitle { position:relative; top:20px; left:20px; width:500px; height:100px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:28px; color:#516c84; margin:0px; text-align:left; }
div#callus { position:absolute; top:435px; width:340px; height:110px; font-family:"Bookman Old Style", Times New Roman, Times, serif; float:left;/*border:solid 1px #000;*/ }
div#emailus { position:absolute; top:435px; left:340px; width:370px; height:110px; font-family:"Bookman Old Style", Times New Roman, Times, serif; float:left; }
img.icon { float:left; }
p#email { position:absolute; top:10px; left:120px; font-size:30px; font-weight:bold; color:#516c84; margin:0px; line-height:34px; }
p#smallertxt { position:absolute; top:50px; left:100px; font-size:22px; color:#516c84; margin:0px; }
p#call { position:absolute; top:10px; left:105px; font-size:28px; font-weight:bold; color:#516c84; margin:0px; line-height:34px; }
div#minbutton { width:52px; height:52px; position:absolute; top:15px; left:915px;/*border:solid 1px #000;*/ }
div#minbutton a:hover img { background:#516c84; }
div.quotebuttons { position:absolute; top:70px; left:15px; width:200px; height:auto; }
button#servcat1 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
button#servcat1:hover { background:#516c84; color:#fff; }
button#servcat1:click {
background:#516c84;
color:#fff;
}
button#servcat2 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
button#servcat2:hover { background:#516c84; color:#fff; }
button#servcat3 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
button#servcat3:hover { background:#516c84; color:#fff; }
button#servcat4 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
button#servcat4:hover { background:#516c84; color:#fff; }
button#servcat5 { position:relative; display:block; float:left; width:200px; height:60px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; color:#516c84; background:#fff; border:outset 3px #516c84; border-radius:5px; }
button#servcat5:hover { background:#516c84; color:#fff; }
div#transportopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
div#storageopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
div#freightopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
div#relocationopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
div#exhibitionopt { position:absolute; top:73px; left:230px; width:500px; height:330px; border:outset 3px #000; }
div#quoteelements { position:absolute; left:750px; width:auto; height:auto; left:750px; }
form#form { position:absolute; top:270px; width:205px; height:225px; /*border:solid 1px #000;*/
font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:20px; color:#fff; line-height:30px; }
form#quoteform { background:none; }
input.formdata { height:30px; width:200px; border-radius:5px; }
input#submitbtn { position:relative; display:block; float:right; width:130px; height:50px; margin-top:7px; font-family:"Bookman Old Style", Times New Roman, Times, serif; font-size:22px; background:#516c84; color:#fff; border:outset 3px #516c84; border-radius:5px; }
input#submitbtn:hover { color:#516c84; background:#fff; border-radius:5px; }
div#quotecalc { position:absolute; top:63px; width:205px; height:210px; }
div#total { width:200px; height:52px; margin-top:7px; background:#516c84; border-radius:5px; border:outset 1px #fff; padding:4px; }
div#tax { width:200px; height:52px; margin-top:7px; background:#516c84; border-radius:5px; border:outset 1px #fff; padding:4px; }
div#grandtotal { width:200px; height:52px; margin-top:7px; background:#516c84; border-radius:5px; border:outset 1px #fff; padding:4px; }
p.calctitles { font-family:"Bookman Old Style", Times New Roman, Times, serif; font-weight:bold; color:#fff; text-align:left; margin-left:5px; margin-top:0px; text-decoration:underline; }
p#numberprice { font-family:"Bookman Old Style", Times New Roman, Times, serif; font-weight:bold; font-size:30px; color:#fff; text-align:right; text-decoration:underline; margin-right:5px; margin-top:-20px; }
</style>
</head><body>
<div id="bodycontainer">
<div id="getaquote">
<a>
<button id="quote"> <strong>Get A Quote Now</strong></br>
</button>
</a>
<p id="quotetitle"> <strong>Choose The Services You Require:</strong> </p>
<div id="callus"> <img class="icon" src="images/phoneicon.gif" />
<p id="call"> 0208 208 4411 </br>
07850 495 804 </p>
</div>