<p><span class="red">*</span> indicates required information</p>I started with a span class to let people know what information I wanted filled in.
<form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit();" onreset="return confirmReset();" >
<table border="5">
<tr>
<td valign="top">
The next thing I did was declare where I wanted the form information to go. And I set the a border for my form. The next thing I set up is the contact text boxes.
<h3>Contact Information</h3>
<p>Name<span class="red">*</span><br />
<input type="text" name="name" size="50" /></p>
<p>Address<span class="red">*</span><br />
<input type="text" name="address" size="50" /></p>
<p>City<span class="red">*</span>, State<span class="red">*</span>, Zip<span class="red">*</span><br />
<input type="text" name="city" size="34" />
<input type="text" name="state" size="2" maxlength="2" />
<input type="text" name="zip" size="10" maxlength="10" onchange="return checkForNumber(this.value);" /> </p>
<p>Telephone<span class="red">*</span></p>
<p>(<input type="text" name="area" size="3" maxlength="3" onchange="return checkForNumber(this.value);" />
<input type="text" name="exchange" size="3" maxlength="3" onchange="return checkForNumber(this.value);" />
<input type="text" name="phone" size="4" maxlength="4" onchange="return checkForNumber(this.value);" /></p>
<p>E-mail address<span class="red">*</span><br />
<input type="text" name="email" size="50" value="Enter your email address" onclick="if(this.value=='Enter your email address') this.value='';" /></p>
I now only want the person to choose one way of contacting them so I used radio buttons.
<p><strong>How do you perfer us to contact you</strong><br />
<input type="radio" name="contact" value="Phone" />Phone<br />
<input type="radio" name="contact" value="email" />Email <br />
<input type="radio" name="contact" value="mail" />Snail mail
</p>
I next used check boxes in case they are interested in more than one service
<p>Which one of our services are you interested in recieving information about?</p>
<p>
<input type="checkbox" name="services" value="babbitting" /> Babbitting <br />
<input type="checkbox" name="services" value="strawChopper" /> Straw Chopper <br />
<input type="checkbox" name="services" value="engineRebuilding" /> Engine Rebuilding <br />
<input type="checkbox" name="services" value="crankGrinding" /> Crank Grinding<br />
<input type="checkbox" name="services" value="other" /> Other
I then placed a text area so they can add any comment they may want to make.
</p>
<h5>Please enter any comments here:</h5>
<textarea name="comments" rows="10" cols="40">
</textarea>
</td>
</tr>
</table>
I need placed a submit button and a reset button.
<p><input type="submit" value="Submit" /></p>
<p><input type="reset" value="Start Over" /></p>
</form>
</body>
</html>
Now I wanted to make sure they could only enter numeric values in the zip code or phone number I took care of that with java script.This function checks to make sure that the spaces hold numbers only. I also add a call to the function at the end of the text boxes for the phone number and zip code.
function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if(numberCheck == true) {
window.alert("You must enter a numeric value!");
}
}
<p>(<input type="text" name="area" size="3" maxlength="3" onchange="return checkForNumber(this.value);" />
Now I want to make sure the required spaces are filled in. So I used this function.
function confirmSubmit(){
var submitForm = window.confirm("Are you sure you want to submit the form?");
if (document.forms[0].name.value == ""
|| document.forms[0].address.value == ""
|| document.forms[0].city.value == ""
|| document.forms[0].state.value == ""
|| document.forms[0].zip.value == ""){
window.alert("You must enter your contact information.");
return false;
}
else if (document.forms[0].area.value == ""
|| document.forms[0].exchange.value == ""
|| document.forms[0].phone.value == "") {
window.alert("You must enter your telephone number.");
return false;
}
else if (document.forms[0].email.value == ""){
window.alert("You must enter a correct email address");
return false;
}
I also called the function by adding the following code which I added to the end of my starting form code.
onsubmit="return confirmSubmit();"
Then I wrote a function to make sure they wanted to submit the form and if they decide to reset it that they wanted to reset.
function confirmReset(){
var resetForm = window.confirm("Are you sure you want to reset the form?")
if (resetForm == true)
return true;
return false;
}
function submitForm(){
if (document.forms[0].firstName.value == "" || document.forms[0].lastName.value == ""){
window.alert("You must enter your first and last name!");
return false;
}
else
return true;
}
I also added the onreset call to the end of the starting form statement. I finally added a function to make sure one of the ways to contact them is marked and I used this function to do that
function contactMe(){
for(var i=0; i<document.forms[0].delivery.length; ++i)
{
if (document.forms[0].delivery[i].checked == true)
document.forms[0].delivery[i].checked = false;
}
}
Well these are the steps I followed to build a contact page and I hope it helps you.
MultiQuote
| 