but not HERE: http://ampersandbox.net/?pg=about

was hoping i could do it outside a page template…. didnt think there would be much difference…. =(

		if(isset($_POST['submitted'])) {

	//Check to see if the honeypot captcha field was filled in
	if(trim($_POST['checking']) !== '') {
		$captchaError = true;
	} else {

		//Check to make sure that the name field is not empty
		if(trim($_POST['contactName']) === '') {
			$nameError = 'You forgot to enter your name.';
			$hasError = true;
		} else {
			$name = trim($_POST['contactName']);
		}

		//Check to make sure sure that a valid email address is submitted
		if(trim($_POST['email']) === '')  {
			$emailError = 'You forgot to enter your email address.';
			$hasError = true;
		} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
			$emailError = 'You entered an invalid email address.';
			$hasError = true;
		} else {
			$email = trim($_POST['email']);
		}

		//Check to make sure comments were entered
		if(trim($_POST['comments']) === '') {
			$commentError = 'You forgot to enter your comments.';
			$hasError = true;
		} else {
			if(function_exists('stripslashes')) {
				$comments = stripslashes(trim($_POST['comments']));
			} else {
				$comments = trim($_POST['comments']);
			}
		}

		//If there is no error, send the email
		if(!isset($hasError)) {

			$emailTo = 'queesy@gmail.com';
			$subject = 'Contact Form Submission from '.$name;
			$sendCopy = trim($_POST['sendCopy']);
			$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
			$headers = 'From: My Site ' . "\r\n" . 'Reply-To: ' . $email;

			mail($emailTo, $subject, $body, $headers);

			if($sendCopy == true) {
				$subject = 'You emailed Your Name';
				$headers = 'From: Your Name ';
				mail($email, $subject, $body, $headers);
			}

			$emailSent = true;

		}
	}
} ?>

		Thanks,
		Your email was successfully sent. I will be in touch soon.

			There was an error submitting the form.

		<form action="" id="contactForm" method="post">

				Name
					<input type="text" name="contactName" id="contactName" value="" class="requiredField" style="margin-left:10px;"/>

				Email
					<input type="text" name="email" id="email" value="" class="requiredField email" />

				Comments

				<input type="checkbox" name="sendCopy" id="sendCopy" value="true" />Send a copy of this email to yourself

				Submit »

it submits just fine says it sent, but i dont see it in my inbox =(

$.post("emailer.asp",
   				{ Name: Name, Email_address: Email_address, Subject: subjectVal, Message: messageVal },
   					function(data){
						$("#contact").slideUp("normal", function() {				   

							$("#contact").before('SuccessYour email was sent. Close ');	

Thanks for this script – works a treat! I’m using it within a JQuery Modal pop-up for a contact me section on a site, and I have one quick question:

Once the user fills out the form and sends it off, he’s presented with the section telling him it’s a success. I’m trying to add a ‘close’ button on the end of this but it doesn’t seem to be working – was wondering if you could take a look and see if you spot anything missing?

$(document).ready(function(){
	$("#submit").click(function(){
		$(".error").hide();
		var hasError = false;
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

		var Name = $("#name").val();
				if(Name == '') {
			$("#subject").after('You forgot to enter your name.');
			hasError = true;
		}

		var Email_address = $("#emailaddr").val();
		if(Email_address == '') {
			$("#emailaddr").after('You forgot to enter your email address');
			hasError = true;
		} else if(!emailReg.test(Email_address)) {
			$("#emailaddr").after('   Enter a valid email address please.');
			hasError = true;
		}

		var subjectVal = $("#subject").val();
		if(subjectVal == '') {
			$("#subject").after('You forgot to enter the subject.');
			hasError = true;
		}

		var messageVal = $("#message").val();
		if(messageVal == '') {
			$("#message").after('You forgot to enter the message.');
			hasError = true;
		}

		if(hasError == false) {
			$(this).hide();
			$("#sendEmail li.buttons").append('');

			$.post("emailer.asp",
   				{ Name: Name, Email_address: Email_address, Subject: subjectVal, Message: messageVal },
   					function(data){
						$("#contact").slideUp("normal", function() {				   

							$("#contact").before('SuccessYour email was sent. Close ');
						});
   					}
				 );
		}

		return false;
	});
});

Thanks in advance!
David

Really looking at adding radio button validation. How can I make that happen???

Please help!!!

This looks like a great way to do it, especially with complex parameters like show_expired to deal with. I’d be curious to see how many queries this results in, but I’m guessing that if it didn’t infinite-loop out, it’s probably okay. Thanks for the tip!

If you take a look at some of my more recent articles:

WordPress & jQuery Contact Form without a Plugin and Flexible and Semantic Forms with a Little jQuery, you will find different approaches to validation.

As far as just adding a class to the form field, I don’t think that is enough from a user experience point of view. What if you have someone that is color blind? It’s so much clearer to put the text there identifying the problems.

And well done for being so patient with your commenters :-)

Maybe some of the issues people are having with receiving mails could be resolved by adding a more fulsome set of mail headers?

return-path, x-mailer, x-sender-ip etc and I’ve seen issues with mail needing to specify ini-set.

Hope that’s useful to someone. Thanks again.

you may also replace error_class parameter by a html element id where you want an error message to appear…

I’ve got a suggestion; rather than using several if statements to validate the fields – I’d replace it by a a single function taking fieldID and errorMessageFieldID as parameters.

try following:

function validateLengh(field,error_class){ 

		if(field.val().length < 1){

			field.addClass(error_class);
			return false;

		}

		else {

			field.removeClass(error_class);
			return true;

		}

}

{ emailTo: emailToVal, emailFrom: emailFromVal, subject: subjectVal, message: messageVal }

And use serialize to get all the form fields:

var formFields = $('#idOfFormHere').serialize();

Then, you have all of the data from the form, so you can replace the first line I mentioned with the new data:

{ formFields }

Perhaps it’s reasonable to expect a good web developer to have an understanding of the value of tags and a basic SEO checklist. But isn’t that where the non-programming expectations should stop?

Web developers today have their lives full keeping up with (using your list here): CSS, HTML, jQuery, WordPress & ExpressionEngine to name just a few.

Honest search engine optimization consultants are experts in this evolving field, committing themselves to long hours online, and in print, researching, testing and tuning – many times long after the initial launch, when the web developer has moved on to other projects.

Trevor, you’re much more benign than many web developers I’ve read on this topic. Many are just down out rude about it with no obvious provocation – such as the piece Derek wrote last week.

My point is, web developers should be expected to solve problems and produce results within their particular skill set. But, knowing the ins & outs of the evolving search algorithms, and learning from trial and error is something a web developer has neither the time – nor the responsibility – to learn. At least not to the extent an honest SEO expert does.

Just my .02,
Roger

So the seo guys come in and make up for our slack and charge people for it when it should have been done by the programmer in the first place.

If it’s the blackhat stuff that you find absurd, I would agree too!

The human race really is in trouble…

I’ve been using your examples to make my own code and I have a question. What if I have form data that I didn’t validate, therefore didn’t assign a JS variable to(such as a list box)… how would I pass that info in the $.post function to my php script? Do I have to go ahead and assign a JS variable to that form data first?

Thanks for the help!

Jason

2) You would have to change all the IDs. You could easily modify it so you wouldn’t have to do that, like I did in this article.

1.) When I receive the email in outlook or gmail, the ‘ and ” signs get converted into characters. I used the following code from an earlier post.

$message = stripslashes (utf8_decode ($_POST['message']));

When I use that code, the ‘ signs get converted into a ? sign. Also the encoding for the email still says “western europen ISO” in outlook.

Is there a way to control this better?

2.) Is it possible to have two of these forms on the same page? Would I have to rename all ID’s or can I just copy the form and use two on one page?

thank you,
kindly
Florian