WordPress & jQuery Contact Form without a Plugin

I don’t get why you aren’t using a plugin and embedding the contact form functionality directly into the page template? Doesn’t that defeat the purpose and flexibility of plugins? If you change your theme, you have to port over your page template to your new theme. If you develop it as a plugin, it will inject any contact form markup you want into the page dynamically and all you’d have to do is style it differently with CSS. You can also add configuration options to your form via the plugin API. If you implement it using shortcodes, you’d just stick something like “[contactform]” into your page content and the form would render there. I found a lot of overly-bloated contact form plugins out there… which is why I created my own, too ;)

http://jamescoletti.com/simple-wordpress-contact-form-plugin

Sure, it looks great.  When I apply the CSS to my stylesheet, it moves the “email yourself” check box wayyyyy over to the right.
Also, what does it actually do with the comments entered?  When I test it out, it doesn’t show the comments in any folder.

its awesome!

@Olli-
Sure, you will just want to change this code:

To this:

That should add the class of inputError to the form elements. Then, you can style them accordingly.

@Olli-
Don’t forget that class names are case sensitive. In the JS, I told you to put inputError, but in the CSS you showed, you put inputerror.

While I agree with you regarding your reasons why you didn’t use a plugin (I don’t either - too much overhead when different clients, more often than not, require different contact forms). However, I wonder why you didn’t use jQuery’s Validate plugin for validation?

Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language ;)
See you!
Your, Raiul Baztepo

Wow, that was a great tutorial! Thanks I used it on my blog’s contact page!

I want to use my free gmail account to receive mail through contact us fom

Great tutorial, thanks Trevor. I also like to see what’s happening on the page and have full control so this is the perfect solution.

I have one problem I was hoping you could shed light on - the form isn’t sliding up at the end. ie .slideUp isn’t firing in the jquery which is odd because the callback function adding the ‘thanks’ paragraph in before it is working! I’m using the latest jquery release 1.3.2 instead of the one packaged with your files but I don’t think that would affect this. Any ideas you have would be greatly appreciated. Thanks :)

Hi trevor

I’ve already used the other form mailer you created in this website.  With a few changes and it works like a charm. Sorry but I had to ditch the ajax stuff.

Now about this one (that’s for a wordpress project), will it work with a custom thank you page (because of conversion tracking)?

I think that instead of showing some code after the form is submited, we can do a redirect to the thank you page, am I right? And will this enable me to put contact records in a database without any wordpress conflits?

Sorry if I ask to much.

Thanks in advance Trevor

Maria M.

I really need a separate Thank you page (really need google conversion tracking on that one), so i’ll try to redirect users after all the form fields are validated. I will let you know how it worked out.

Thanks for your kind reply. Keep on coding, I’m lovin it! ;)

Cheers

Maria M.

@future-
The form is already using honeypot captcha, and you could easily add in another method.

@stu-
You know, that’s weird, bitka was having the same problem. I don’t see anything in the code that would cause a problem.

Maybe try only using the $(’#contactForm’) selector. Maybe try switching your doctype to be strict (that’s the only real difference I see between my example).

@stu-
Weird, it was definitely sliding up before. So when you say refreshing the form, you just want to remove the values from the field? Just try setting the value attribute to nothing, that should do it.

I forgot to mention that there needs to be a in the to be able to slide.  If there is no div, no sliding…

Still missed it! I spent too much time in front of a computer…. I meant div tags.  There need a tag and it works great.

@Guresh-
There is already honeypot captcha added to the form. You could easily add in something else as well.

@akber kabir-
You will want to validate the field similarly to how the email address is validated, you will just need to use a URL regular expression.

@kristian-
The way that I have coded the form, you should always have the form action be the current page that it is on.

So if you have added the form onto the index.php file, then you want the form action to be index.php.

@Larry-
Sure you could easily add in a select element that adjusted the subject of the email. Just add in the HTML and adjust the PHP to accommodate the new field.

@Larry-
Makes sense to me

@Larry-
Like pretty much all blogs, you must encode the open bracket < to be &lt;

@Barton-
Absolutely. If you modify the css for the error class, you can get them to display however you want.

@Deborah-
Sure, just create multiple page templates. Then select the appropriate template for each page with the form on it.

Awesome template, it was exactly what I was looking for, I also dislike using plugins as well.

BTW, you don’t have a closing tag in the “View Entire Custom Template” link in your tutorial found at:

There was an error submitting the form.

Thanks!

Edit: Spaces added.

I created an e-mail field in the theme panel, but the contact form won’t recognize the field.
Does the form accept the options call in the e-mail field ? i.e. if I place instead of the e-mail address : 

It is not working and I have already inserted the code to enable the option in the contact page template.
Any help will be appriciated

sorry code didn’t show :

@Nort-
So are you accessing the option using get_option? It seems like that should work fine.

@Nort-
So if you just output the option on the page it works fine? Without seeing any code, I can’t give you any reason why it wouldn’t work.

Hi,

What a wonderful tutorial. It is great.
However, I am curious where you put the conditional code in your real demo?

You guide the audience as shown in your contact-form.php, that the following will be included:
//If the form is submitted
if(isset($_POST[‘submitted’])) {

But when I see your demo page and display your source code, you just start from the following:
<form action="

Can you explain the difference between what is in your guidance and your own usage?

Also (another question), if you have :
If have post, while have post, the-post,

After click the SUBMIT button, it will display a post, instead of the message (either the red error message or thank you message), as shown in your tutorial.

How to solve these problem?

Thank you Trev!

Thanx for quick response, and sorry for the 2 questions as I found the answers already.

I realized that HTML does not display some PHP codes. Also I modified the url of the js files, now they works.

But the $emailTo = ‘me@somedomain.com’; doesnt work. Yes of course I have replaced it with my own email address, but still doesnt work as I never receive email after click the EMAIL ME button. Can you explain why? Bytheway, I dont have link, I just do experment locally with wamp.

And also (another question), at this part:
if($sendCopy == true) {
  $subject = ‘You emailed Your Name’;
  $headers = ‘From: Your Name ‘;
  mail($email, $subject, $body, $headers);

Should I replace .(JavaScript must be enabled to view this email address) with my email? Please kindly clarify.

Thanks once more, Trev

@Andrew-
Are you sure you have mail to work setup locally?

Unless you want it to come through in the email as .(JavaScript must be enabled to view this email address), I would change it.

@Andrew-
You can use whatever email provider you want; it is using the server to send the mail.

The code is already in place to send a copy to the person if they check the box.

@ahmed hamouda-
What do you mean it doesn’t deliver mail from domains? It works perfectly fine when I test it. Are you testing it locally?

My bad
I receive my messages in a gmail account
and I use thunderbird and it considered all the emails like spam so it didnt appear in the thunderbird inbox
Agian dude you are awesome xD
May be I will write about it in my arabic blog after translating your post ofcourse
Thanks alot for this awesome trick
Best Regards ..

@David-
Not sure what to say, there must be something going on with your setup. Can you get regular PHP mail to work on your server? That’s basically all this is doing.

@David-
Do you have Firebug? What do you see in the POST request?

@David-
And you have updated the $emailTo variable in the script to send to your email address?

This is highly dumb. Instead of coding a one-piece HTML / PHP tag soup, use a plugin. It’s more flexible, more easy to share.

Duh.

Good work Trevor, great post.

RE: Ozh’s comment:

Mate it’s your choice if you do a plugin or you post on how to do a contact form template.  The good thing is that you have published it for anyone to use.
If people cant use your code, they have a choice to use one of the other form plugins.

@phil-
Not sure I know the answer to that question. I would try Googling around and seeing what you can find; I’m sure someone else has run into a similar problem.

Just wanted to say thanks for this Trevor, it’s helped me a lot today.

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.

thank you for the code and tips, will test this out.

i can get it to work HERE: http://ampersandbox.net/?page_id=130

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…. =(

@Trevor-
nevermind , basically it did not work because i tried to hard code it into my indexphp. showed up fine but would not send emails so i just made a page template liek you suggested

@skot-
I don’t see where in your page you are including the jQuery to validate the form.

@skot-
Looks like you are missing a single quote:

@skot-
It looks like you are using jQuery with noConflict. If you look at the way that you are loading the cycle plugin:

You will need to do the same for the contact form.

how about adding checkboxes,
and none required fields?

everything else works, but i cant get it working…

@peter-
I’m not sure what you are asking.

@peter-
You just need to use the name attribute of the form fields to access the data. Then, you can access them in the $_POST array.

@peter-
I’m sorry, I can’t walk every person through their specific issues in their forms. If you are interested in more in depth help, you can hire me by contacting me directly.

Hi Trevor,

I’ve been looking so much for a way to manage forms WITHOUT having to use a plugin and have total control of the code. So, first of all, thanks for putting up the only tutorial on the whole web about such a thing.

Sadly, I too can seem to be able to send emails from WP. I am at MediaTemple and the server send it fine when outsdode of WP. I just copied your template file, changed the email address, linked the JS, but don’t get emails.

I need this so much to work, as it’s the laste step vefore I publish my site, and if I can’t get a simple form to send an email, I cannot publish the site.

Strangly enough, at some point I recopied all the code from the tutorial, and at some poitn it did manage to send teh email. So that mean that something made it work, but now, again, without any change, it just doesn’t send anything anymore.

If you want I can provide a link to the development site, but I prefer to send it to your mail (don’t want to make it public ‘til the site is in dev phase).

Thanks for the help.

Gian.

Great sample code. Thank you.

Do you have any guidelines for adding a type=FILE field to this form? I tried to do so and have run into some issues:

1) The incoming type=FILE field on my contact form is optional, but if I do generate errors on other required fields on the same form then I am unable to refill the contents of the type=FILE field - as your code does for the other fields in your example.

I believe this is due to an HTML security feature to prevent websites from pre-filling FILE fields - but in my case if a user fills out a form - including selection of a local file to upload in a type=FILE field - and then clicks SUBMIT, and then subsequently gets an error on some field other than the FILE field, then I am unable to refresh the type=FILE field and they will need to be reminded that they need to re-select their optional FILE field that they had filled in the first time around.

In other words, upon detecting errors in your current contact form you currently always refresh all incoming fields so that the user does not need to re-enter them when one or more edit/missing errors are detected. But type=FILE fields cannot be refreshed in this manner. And since my type=FILE field is optional then I cannot always simply check that it was filled in.

How would you handle that issue?

2.) As I am just creating this new contact form with a type=FILE field I am noticing that when processing the incoming form data that I am unable to access the path or file contents in either $_FILES[‘fieldname’] [‘name’] or $_FILES[‘fieldname’] [‘tmp_name’].

I can, however, access the uploaded file’s name in $_POST[‘fieldname’]

Do you know of any reason why these values are not accessible when I am processing the incoming form?  I successfully can access all the other incoming form fields, as well as the actual file name of the type=FILE field, just not the full pathname nor the file contents itself.

@Joe-
I guess you could upload the file to the server regardless if there are errors in the form or not.

Hey, nice tutorial, I managed to make the form work but i have a slight problem. When I send out a email, I receive 2 identical emails inside my inbox. Do you know what is causing this?

Thnx

No, I am not. Simply, when I press the send button in the recipient`s inbox i receive 2 identical emails. I checked the code but it`s nothing wrong.

Hello Trevor,
I really like this code. But there is a little problem if I try to expand the abillity to send emails to different recipients.
In WordPress I use the Custom Fields to set an email adress. I call the page using your template as url with parm:
.../?mailempfaenger=” target=“_blank”>Mail an den Inserenten</a>In your template I can read this by using the following code:
$empfaenger = htmlspecialchars($_GET[“mailempfaenger”]) . ‘’;
If I echo it in your code before displaying the form, the email-adress is shown correctly.
I ‘ve set the variable $emailTo to $empfaenger
As if the mail was not sent, I tried to echo the variable $emailTo. It seemd to be empty. Also I tried to set it’s value by using:
$emailTo = trim($_GET[‘empfaenger’]); and
$emailTo = trim($_POST[‘empfaenger’]);
Both did not work.
Do you know, how I can retrieve the value from inside your script, so I can use it as email adress where the form should be sent?
Thanks a lot.
Torsten

Hi, Trevor.
Thanks for great tutorial,very helpful.
Please explain me how to change the style of submit button. I want to use only “” without “” and I don’t wanna use the tag “” . When I delete all unnecessary tag mail stop delivering. I think there need to change contact-form.js file but I don’t know HOW.
Please help me!
Sorry for my english.

@Denys-
Not sure what you mean that you don’t want to use an li tag, but here is the code you would need to modify to use an input instead of a button:

oh mine God!!!Sorry.
My html for submit button looks like
‘input type=“submit” name=“button” id=“button” value=“Submit” />’

Trevor delivery isn’t working.
I’m trying to use “form#contactForm #button”, “#button”, “button”.

I had a ready html form, I decided to add ajax in accordance with your tutorial. Everything has changed, except the button submit. Letters come on a box only when the button html-code is not changed. If I try anything to change letters stopped coming to the box, the form sends but I do not receive letters. How it is interconnected I do not understand.

@Torsten-
I don’t see why it wouldn’t work.

@Denys-
Can you provide a link?

@Denys-
The form submitted fine for me.

@Denys-
You should try contacting your host then or double check the PHP code to make sure you are sending to the right address.

@Denys-
Sorry, I can’t debug every individual problem. If you would like me to, then you can hire me.

Hi Trevor!
I have the problem with error messages. Message show text but dont show label name at the end of message.
Looks:

You forgot to enter your .

I dont touch js file. How fix it?
Thanks.

@Trevor-
All your labels is saved. I dont change label name.

@Trevor-
See this link
Tell me can I delete your js validation and use some plugin for that.What and how I need to change in contact-form.js ? Thank you!

Trevor, I’ve been digging around in the css for a while and for the life of me I can’t figure out how to get rid of the border around the checkbox.

It shouldn’t be there since the border style only applies to ol.forms input, ol.forms textarea.

Also, I’m having trouble getting the Submit button to align square in the center of the form. I’ve tried text-align: center, tried setting the width to a fixed pixel number and still no luck.

Thanks.

@Julie-
A checkbox is an input elements, so it will inherit styles being applied to input elements. Try using text-align: center on li.buttons.

@Denys-
Just delete the JavaScript then. There are a million form plugins out there; it seems like mine doesn’t suit your needs.

@Denys-
There is a limit to how much support I can provide to every person; you are basically asking me to do your work for you. If you are interested in that, you can hire me.

Hi,

I’ve been looking for a form with a send to yourself feature for ages, so excellent to find this site. Just wanted to check to see if I can use this form for a non wordpress website? Guessing as it is not a plug in then it should be ok.

Very nice!  Thank you

Sorry.. it seems part of my code was cut off.. it’s the same as your contact form checkbox code, only the id is changed to “billShow”.

@Julie-
Your syntax is not correct.

Is not going to select anything. You should review the available selectors.

@Paul Versteeg-
Maybe you are getting a JavaScript error somewhere after you submit the form. So it sends the email via AJAX and then without AJAX. Not really sure what else it could be.

I want to thank you too, your method is really great, already use it on my blog. Great post, great contact form.

@Julie-
There are various methods to accomplish what you want to do. I would probably check to see if the checkbox is checked before hiding the fields with JS.

sorry.. :)

thank you very much, it’s awesome tutorial

@ven-
Sounds like you may need to contact your host about that error. Without seeing the link to your page, I can’t help at all.

Wow that’s a great tutorial! Thanks for sharing!
I have a question: is it possible to send the message to multiple e-mail addresses?
Do you have to separate the addresses with a comma or something?
I am asking this because I implemented the form into a wordpress theme and I am grabing the email address from the wordpress admin area: I created a custom function that adds me a field in the admin area where I can add the email address, and isted of calling $emailTo, I call for my custom function:

$headers = ‘From: My Site ’ . “rn” . ‘Reply-To: ’ . $email;
 
  mail($custom_function, $subject, $body, $headers);

Everything works just perfect if I only add one email address. But if I add more than one address, I won’t recive any emails… I separated the email with a comma.
Any ideeas how this might be worked out?
Thanks in advance!

Great tutorial! Everything works like a charm with one little but bothering exception: the mail is sent twice.

The funny thing is that i get 2 different emails: one containing only the standard fields (name, email, comments) and another one containing the standard fields and all my custom added fields.

Please help me out cause I am so lost in here…

No jquery, it is only php (or at least that was my intention)

@Steven Gun-
Maybe you call the mail function twice? I have no idea I can’t see your PHP.

@Trevor
Why are there two forms of validation, jQuery and PHP? If jQuery validates the fields, then why do you need to have all that extra code on the back end?

@Jared-
Because if a user turns off JavaScript, you should still validate the form.

Trevor,

I copied all your codes above, modified the email addres. Everything seems correct, including the <script type="text/javascript" src="<?php bloginfo('template_directory in the header.php

BUT, unfortunately, I NEVER RECEIVE the email

Can you please solve the problem, Trevor?
Thanks

@Andrew-
Do you have a link to the page? Is it working without JavaScript enabled? Is it getting caught in your spam folder?

@Trevor-
What is the link to the page? Is it working without JavaScript enabled?

@Andrew-
Sounds like you don’t have a mail server setup locally.

@Andrew-
You are using Wamp to run Apache/PHP/MySQL correct? You need to have a mail server, hence this error:

Warning: mail() [function.mail]: Failed to connect to mailserver at “localhost, an so on, on line 56

@Andrew-
The error does exist when you have JavaScript enabled, just look at the Firebug console and see the request. The problem is that you don’t have a local mail server configured.

@Andrew-
This is Firebug. If you actually read the JavaScript, you can see that the thank you message appears no matter what. It does not checked to see if the request is successfully completed before displaying it.

I don’t know how else to say it: the problem is that you do not have a local mail server configured.

Hello Trevor,
Thank you very much for taking the time to contribute to the community.

My question is: Is it possible to create validation for drop-down menus? I tried leaving the first option blank to play off of if(subjectVal == ‘’) and tried using the id selector in the and tags for the menu. I got nothing. I’m new to this so that’s as far as I can go.

Thanks for excellent article!

The form validation does not work when using AutoFill http://github.com/joemsak/jQuery-AutoFill It thinks that there’s text already in the field (expect for textareas). Any idea how to get it to play along?

Nice to see so well written articles and friendly comments :)

By the way, my form nor your demo are not sliding up after submission. I tested it with FF 3.6 and Safari 4. Any ideas. Thanks again!

Hey Trevor, i wonder if i could add a default value, like “Type your email here” in the input without messing to much with the code?
Thanks

heh you just gave me another reason to hate internet explorer 6,7 and 8, the font is stripped of the rendering in ie when applied the opacity, i was using a big font and it’s looking hideous.

I miss the code to insert it in this post, sorry =o

Do I need to add a couple line code like this?

Thank you for your reply and sorry for the bad tags.

Well, your scripts runs perfect but i want to send the email/comment to different email’s departments (Support, Sales, Business, Reports, etc).  I’ve been reading and trying but nothing.

I need an option to select recipients by drop box menu or radio option, doesn’t matter. This is the idea:

- Select one Department:
Option 1: .(JavaScript must be enabled to view this email address)
Option 2: .(JavaScript must be enabled to view this email address)
Option 3: .(JavaScript must be enabled to view this email address)
and so…

The idea (it doesn’t work, of course):
http://huriata.com/cuentas/be/contacto/formulario

Thank you in advance. If it works, i could post all the code to share it and help others.

Looks like the new version of jQuery prevents the form from sliding up any more.

Pity really.  If anyone has fix, I’d be interested.

I like this form quite a bit, but the javascrpt not working made it pretty dysfunctional: so I removed the call to the javascript and let the template’s conditional structure to display the appropriate page.  Simpler and even less bloat, which is what I was looking for in the first place when I ditched my contact form plugin in favor of this solution.

@Andrew-
This really is not the appropriate place to ask about how to set up a local mail server. Try Googling it.

Hi, Great code.

I am having a little problem and dont know why. I have put all the code together but when i click submit on the site i am currently working on i get this come up on a new page;

Parse error: syntax error, unexpected $end in /homepages/44/d242893647/htdocstests/test1/Contact/contact-form.php on line 170

Any advice would be much appreciated!

@Trevor-
Have I mentioned once or twice before how much I love your direct approach with advice giving? lol

@Kurt-
I should clarify: I want to use a function so I don’t have to change the template if the admin email changes.

@Trevor-
Thanks. I should have been able to figure that out.

Hi Trevor,
  I am trying to implement this in my wordpress theme. I tried first on my local server and I could see the values in the $_POST after calling $.post
But same thing, I cannot see in my actual web server when i uploaded my theme. $_POST variables are empty.  Do you know what could be the reason for this ?

Hi
I have implenent the contact form in the website.
I have bulit a long form, I want it to jump up to the field that are not feld. When the user has don something wrong. How do i do that.

sorry for bad language

I got it to send on WP 3.0 once but only when I checked the send me a copy box?

Hi @trevor this is a wonderful blog article which helped me developing my contact us form in the wordpress site and please mail me the links for the other customized topics you are dealing with for wordpress i need them as i am new to this CMS WP this helped me a lot Thanks Thanks alot .

First i got confused by reading this please read it second time with a bit of concentration you will get it and you can implement following the steps.

Thanks post me the new article related to customization of the wordpress CMS

Hey trevor ur code is excellent it worked for me if i am not troubling you by asking i have a question how can i store the field values in database instead of sending mail.
I will be very glad if you help me out from this thanks very much .

You have got lot of pateince to answer all the questions they have asked

Thanks Once again for nice tutorial.

Raj:)

Hey thanks for your reply i was able to create database table and not able to insert as i am new to wordpress.
I don’t know much about add_options so if you can help me out by giving a small example to store 2-3 fields into dbtable in coding explanation i will very thankful to you.

Thanks for reply.
Raj:)

I love your code, I am having a small problem. The email is not being sent. If I check the send copy, the copy is going to my other email just fine, but not to my main one. Yes I entered the email. Any ideas?

Also, I am not using the js because for some reason it keeps saying valid emails are not valid.

@Trevor-
Hmm, I am using a hosted exchange service for my email, separate from my webhost. Could that be the issue? Can I even send phpmail in this setup?

Great solution to a common problem

@Will Dawson-
I used the permalink in my example. Not sure why your page would redirect to a different page.

Really a great tutorial and a great commenting system implemented on this site..

Hey, thanks for the great contact form! I have been working out the kinks in mine as well, but I am a little new to the whole web development process. Am I able to use the functionality of this contact form in themes I would sell? I don’t want to use something without you permission and was just curious. Thanks again, I learned a lot from this!