Page 1 of 1

How to build a contact form validated by Javascript Rate Topic: ***** 2 Votes

#1 Codin  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 6
  • View blog
  • Posts: 45
  • Joined: 31-March 10

Posted 09 June 2010 - 08:40 AM

*
POPULAR

If you get into building websites sooner or later you will need to build a contact page. A contact page can be as simple as name and email or it can be more complicated such as what products or services they are interested in. Here is an example of an contact page I just built. I like to start with my html then add the java script to validate the information. Here is the html I used to build my main contact form.
 <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.

Is This A Good Question/Topic? 5
  • +

Replies To: How to build a contact form validated by Javascript

#2 WILDERR  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 14
  • Joined: 07-November 10

Posted 09 November 2010 - 02:06 PM

Great work

Great work
Was This Post Helpful? 0
  • +
  • -

#3 richmund12  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 38
  • Joined: 10-October 09

Posted 07 June 2011 - 10:13 AM

Hi,

I haven't actually tried this though... But for this code:
function confirmSubmit(){
				     	var submitForm = window.confirm("Are you sure you want to submit the form?");
                                       /*--are we not going to add these:
                                        *
                                        * if(submitForm){
                                        */
				     	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;
				         }
                                 /*
                                  * }  so it would not check they said 'No' or submitForm=false?
                                  */



I may be wrong. Please correct me if I do.

And sorry for bringing the topic up again. I know this is like 7months old already. :)

Thanks, I learned much here. :)

richmund12
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1