Jump to content

how to make this an email form


Mr.Canuck

Recommended Posts

Good day. I have used an open source form, but I would like to know how to make it into a functional email form (so the form values are sent to an email address). As you can see, there is already a section at the bottom for contact details and a "submit" button, but it is not working. I see that there is no value set for the form action here etc. <form action="" id="cakeform" onsubmit="return false;">

Not sure how to make this a functional email form. Any help would be appreciated.

 

URL of form: http://kmkwebdevelopment.com/clients/test/piano-moving-estimate-uprights.html

 

<!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"><!-- InstanceBegin template="/Templates/sidebar.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" /> 
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />


</head>

<body>

        
<script type="text/javascript" src="js/formcalculations.js"></script>
    <link href="styles/quoteform.css" rel="stylesheet" type="text/css" />
</head>

<body onload='hideTotal()'>
    <div id="wrap">
        <form action="" id="cakeform" onsubmit="return false;">
        <div>
            <div class="cont_order">
               <fieldset>
                <legend>Piano Moving Estimate For Upright Pianos</legend>
                <label ><span style="font-size:18px; color:#900">STEP 1:</span> Please select the size of your piano:</label>

                <img style="margin-top:15px" src="images/small-piano-upright.jpg" alt="small upright piano" />
                <label style="float:right; margin-right:202px; margin-top:30px" class='radiolabel'><input type="radio"  name="selectedcake" value="Round6" onclick="calculateTotal()" /> Small (Aka: Spinet, Console) <span style="font-weight:bold">$100</span></label>
                <br/>
                <img style="margin-top:15px" src="images/medium-piano-upright.jpg" alt="medium upright piano" />
                <label style="float:right; margin-right:196px; margin-top:30px" class='radiolabel'><input type="radio"  name="selectedcake" value="Round8" onclick="calculateTotal()" /> Medium (Aka: Studio, Upright) <span style="font-weight:bold">$120</span></label><br/>
                <img style="margin-top:15px" src="images/large-piano-upright.jpg" alt="large upright piano" />

                <label style="float:right; margin-right:114px; margin-top:30px" class='radiolabel'><input type="radio"  name="selectedcake" value="Round10" onclick="calculateTotal()" /> Large (Aka: Full Size, Cabinet/Grand Upright) <span style="font-weight:bold">$150</span></label><br/>
                <br/>
                
                <label ><span style="font-size:18px; color:#900">STEP 2:</span> Enter pick up and destination addresses:</label>
                <br/>
                
                <p style="color:#900; font-weight:bold">PICK UP LOCATION:</p>

                <label style="margin-left:15px; font-weight:normal" class="inlinelabel">Street Address:</label>
                <input style="margin-left:10px" type="text" value=""  /><br />
                <label style="margin-left:15px; font-weight:normal" class="inlinelabel">City:</label>
                <input style="margin-left:71px" type="text" value=""  />
                <br /><br />
                <p style="color:#900; font-weight:bold">DESTINATION LOCATION:</p>
                <label style="margin-left:15px; font-weight:normal" class="inlinelabel">Street Address:</label>

                <input style="margin-left:10px" type="text" value=""  /><br />
                <label style="margin-left:15px; font-weight:normal" class="inlinelabel">City:</label>
                <input style="margin-left:71px" type="text" value=""  />
                <br /><br />
                
                <label style="margin-left:15px">Approximate distance between "pickup location" and "destination"</label>
         <br />
                <select style="margin-left:135px" id="filling" name='filling' onchange="calculateTotal()">
                <option value="None">Choose Distance:</option>

                <option value="Lemon">1 - 10km ($30)</option>
                <option value="Custard">11 - 20km ($45)</option>
                <option value="Fudge">21 - 30km ($60)</option>
                <option value="Mocha">31 - 40km ($80)</option>
               </select>
                <br/><br />
                
                <label ><span style="font-size:18px; color:#900">STEP 3:</span> Is this a player piano?</label>

         <br />
                <select style="margin-left:135px" id="filling2" name='filling2' onchange="calculateTotal()">
                <option value="Raspberry">No</option>
                <option value="Pineapple">Yes ($30)</option>
               </select>
                <br/><br />
                
                <label ><span style="font-size:18px; color:#900">STEP 4:</span> Are stairs involved? If so, please select from the diagram below:</label>

         <br />
                <select style="margin-left:135px" id="filling3" name='filling3' onchange="calculateTotal()">
                <option value="None2">None</option>
                <option value="Dobash">Stairway A ($5)</option>
                <option value="Mint">Stairway B ($10)</option>
                <option value="Cherry">Stairway C ($15)</option>
                <option value="Apricot">Stairway D ($20)</option>

                <option value="Buttercream">Stairway E ($25)</option>            
               </select>
               <br /><br />
                <img src="images/stairs.jpg" alt="stairs" />
                <br/><br />
               
                <div id="totalPrice"></div>
                <br />
                <p style="color:#000"><span style="font-size:18px; color:#900">NOTE:</span> This estimate form is to be used as a cost "approximation" only. When speaking with one of our staff, this estimate may be altered.</p>

                </fieldset>
            </div>
            <div class="cont_details">
            	<fieldset>
                <legend>Contact Details</legend>
                <label for='name'>Name</label>
                <input type="text" id="name" name='name' />
                <br/>

                <label for='address'>Address</label>
                <input type="text" id="address" name='address' />
                <br/>
                <label for='phonenumber'>Phone Number</label>
                <input type="text"  id="phonenumber" name='phonenumber'/>
                <br/>
                </fieldset>
            </div>

            <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
        </div>  
       </form>

Link to comment
Share on other sites

The action doesn't have to be sent unless you want to use a different page for your email script, but you should have a method to pass the data. Then you would use

 

mail

 

There's tons of tutorials on making an email script. Just google  ;)

Here's one I googled for an example, though I don't really like W3schools much myself.

 

http://www.w3schools.com/php/php_mail.asp

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.