Email Contact Forms?

[silver163]

Hello,

I am trying to develop an email contact form being that the text disappears when someone click on the field and reappears (if nothing is inputted) in that field and that "your name", "email", "phone number", and "comments" being required fields and "company name", and "fax" not required.

here is the code:

HTML pastebin - collaborative debugging tool

Can someone please help me get this form working that it would use our email servers?

[curtiss]

You're going to need javascript (or Flash, but I'd prefer Javascript, as it's much lighter weight) to do this.

To do so, you'd need an array of the form element ids and an array of the values you want in the form elements when they're blank.

Then, you need to build a function that's going to be invoked when the focus is on the form element and another function that will be invoked when the focus leaves that element.

Here are some examples of the functions (this code should be placed inside the "head" area of your page):

<script type="text/javascript" language="javascript">
var idarray = Array('yourname','email','phone'); // Add all of the ids of the form elements that you want to fill
var valarray = Array('Your name','Your email address','Your phone number'); // Add the values you want to insert, in exactly the same order you entered the ids above

function fillField(what) {
	var fEl = document.getElementById(what);
	for(var i=0;i<idarray.length;i++) {
		if(what == idarray[i]) {
			if(fEl.value.length == 0 || fEl.value == null || typeof(fEl) == 'undefined') {
				fEl.value = valarray[i];
			}
		}
	}
}

function emptyField(what) {
	var fEl = document.getElementById(what);
	for(var i=0;i<idarray.length;i++) {
		if(what == idarray[i]) {
			if(fEl.value == valarray[i]) {
				fEl.value = '';
			}
		}
	}
}
</script>

You then need to add onfocus and onblur event handlers to each form element. That would look something like:

<input type="text" name="yourname" id="yourname" onblur="fillField(this.id)" onfocus="emptyField(this.id)" />

Finally, you need to add a trigger after your form to fill all the fields with the appropriate values when the page loads:

<script type="text/javascript" language="javascript">
for(var i=0;i<idarray.length;i++) {
	fillField(idarray[i]);
}
</script>

I posted the code of a complete working page at http://pastebin.com/m7095f9b1