WordPress & jQuery Contact Form without a Plugin

mate! thanks for this. been looking for this for months. helpful.

ps : i dont like to use plugins. writing own codes is better “understanding self-coded code is a satisfaction”

@James-
The reason I didn’t do it as a plugin is because I don’t have that kind of time to add in all the bells and whistles with an admin interface and provide support for the plugin.

The idea is that you just have the code. It’s easy for a savvy user to update the form for themselves.

Personally, I like having the actual code to edit instead of passing it into this “black box” and seeing what the plugin produces. I like to have control over every piece of code I can on my site. Maybe not everyone is as anal as me though…

@timtipper-
Do you have a link to the page? I could have easily missed some styles when pulling it into a separate stylesheet or something in your stylesheet could be overriding it.

Very nice script, works like a charm. Just a question concerning the style of the error output:  Would it be possible to give every input field with a missing/wrong input text a red border instead of display an error-message on the right of the input field via span?

@Trevor-
Thx for your fast reply.  Unfortunately it seems I’m incapable to change the CSS the right way. I changed the JS as you told me and added the following to my CSS:

But the only error message visible is still the red span-text on the right of the input-fields; there is no border around them. Do you have any idea?

Thx in advcance!

@Trevor-
Damn, of course I forgot - now it works. Thank you very much :)

@Andrei Gonzales-
I don’t use a jQuery plugin for the same reason I wouldn’t use a WordPress plugin: the plugin adds extra bloat when I don’t really need it, and I want to have completely control over the code.

Especially when it is something so easy as form validation, why not just do it yourself?

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.

@Denys-
It depends on your markup. It is grabbing the value from the text in the label.

@Denys-
I can’t help you if you don’t provide more details or a link.

@Denys-
You completely changed the markup of your form, which the JavaScript validation depends on.

@Trevor-
I understand. How to delete your javascript validation and keep on javascript submit? Thanks.

I know about all plugin out there,but at this time sending email normally only your form. At this time I need some changes with submission and validation. For validation I want to use some plugin like “jquery validation”. I cant delete your javascript because that delete a function “submit without refreshing page”. I’m truying delete this lines:

After this form submiting always when push on submit button even when form is cleared.  Im just want to use your form with javascript submition but with my plugin validation. How to do this? What lines I must delete,change? Thank you!

I’m asking because dont understand javascript. Thanks for form.

@Keith-
Yeah, you should be able to use it on just a regular PHP site too.

Trevor, I appreciate your input. I had some things that apparently override the “text-align: center” for the buttons. Got rid of that - now it works.

Another question - I’m now trying to implement a jQuery hide/show function where the “billing address” section is hidden unless the user checks a checkbox that says “my billing address is different than my mailing address”. I’m so new to php and jQuery that I’m really stuck in the basic syntax.

This is what I have written in the .js file:

Now, I have no idea how to tie this to the checkbox in the .php file.. I’ve started with your basic checkbox from the contact form but I don’t know where to go from there..

Thanks so much for all your help!
Julie

hi,

When submitting your great form, i get two “thanks” messages displayed and the email is also sent twice.

I’ve checked for any duplicate code, but I can’t seem to fix it; any idea what i’m doing wrong??

thanks,

Paul

Trevor, thanks for pointing me in the right direction. After some more studying and Googling I found this to have worked for me:

Thanks again!

Trevor, I hate to keep bugging you but I’ve Googled and read the web all day and I’m no closer to a solution.

My problem is now that the “Billing Address” fields are hidden on page load by the .js, if there is an empty field and the user submits the form, the page reloads with the error messages appropriately, but the “Billing Address” fields stay hidden. When I click the checkbox to show these fields, the errors are there.

Do you have any idea, how to save the “checked” state of the checkbox on browser reload (thus keeping the hidden fields visible with errors), if the form doesn’t submit due to missing fields?

Thanks so much for your help!

I’m still a bit confused, though.. I thought this bit of code:

<code></code>

would retain the checkbox’s checked state when the form was attempted to Submit (as it also kept the values inside the text fields)..

if that’s true, then it must be something in my JS file that overrides that?

@Julie-
I can’t really comment on what your form should do without seeing it. I have no idea how you have coded your form.

i like this article followed all the steps , skipped jquery part.

basic question , when i click on submit button .

i get 405 error resource not found .

action=””  still does not work.

if i remove
if(isset($_POST[‘submitted’])) {

works fine .
thanks

ok . now all my pages are redirecting to static home page. i think this is related with wordpress settings.

No worries! I solved the pb: there has to be a space in front of the comma:

.(JavaScript must be enabled to view this email address) , .(JavaScript must be enabled to view this email address)

Thanks again!

here is a link to the contact form:
http://webdesignpro.ro/?page_id=294

Awesome Tutorial

@Jared
What if javascript is disabled? :)

Yeah, I guess that was a stupid question.
I never considered a user turning off javascript. (Newer browsers, like Chrome for Mac don’t even have that option available. Not that this is a reason for not having a backup validation, just an observation. )

Have you updated or MAKE SURE the JS code works?

Firstly, thanks so much for your reply. Thank you

I used Windows Live Mail. And the email address I use to replace the .(JavaScript must be enabled to view this email address) is Hotmail account.

In this experiment, both the email adress that replace .(JavaScript must be enabled to view this email address) and the email address that I inputed in the input box, are listed on the Windows Live Mail. So I believe, these 2 emails have been recognized by the Windows Live Mail

And as you know, the Windos Live Mail has Junk Email Folder. So I think even if the 2 emails are not recognized, they will still arrive as junk emails

BUT, they are not, Never arrive

Perhaps there is a solution for this problem

Thank you Trev

I do locally with Wamp. I’m sorry there is no link, other than http:/localhost

When I experimented by removing (deleting) these 2 lines from header.php”

Followed by refresh, input my nama again in the input box, click send, then there is ERROR message:

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

FYI, line 56 on my Contact-Form.Php file, has the following:

Is this the one that you try to diagnose? (you asked: Is it working without JavaScript enabled?) Then seemingly the answer is NO.

Kindly please suggest, concrete steps that could solidly solve the problem.

Thank you Trev

Trev,

What do you mean with Local Mail Server? You mean something in PhpMyAdmin? or the SETTING at Windows Live Mail 2009

Thanks once again for your reply

Remember that error message appears when I remove the JavaScript link at Header.Php.

When the link to JavaScript at Header.Php is not removed, the process runs smoothly, Thank You message appears as usual:
Thanks! Your email was successfully sent. I check my email all the time, so I should be in touch soon.

BUT THE ONLY PROBLEM, the email never received, or perhaps never sent.

Any brainstorm?

Thanks Trevor,

Im sorry, im a newbie, what do you mean about Firebug console? where it is located?

BTW, Trev, this is to clarify about the error message: Warning: mail() [function.mail]: Failed to connect to mailserver at “localhost, an so on, on line 56

That error message appear WHEN the JavaScript is NOT exist.

When your JavaScript is exist, the error message is not appear. When the link to your JS is exist, the Thank You message will appear smoothly (Only after that, no emails received)

Thanks Trev,

At least there is guidance,despite still blur, no idea, about firebug. I recognize the word Firefox (browser) but not firebug

I will come back again tomorrow

Thank you so much

Okaay, I feel silly. I over-thought this and overlooked that I had value=“text” in the option tag when it should have been value=”“. Can’t believe I didn’t see that. Anyway, the answer to the question is yes it is possible.

@Andy H-
I would probably consider using a different in field label plugin that does not add values to form fields.

@Andy H-
Not sure, maybe something has changed in the new version of jQuery.

@alexut-
I just wrote an article about that.

Hi, there. You’re script works excellent, but i want a special option, i’ve been trying around hours but with no success.

I need a drop menu for multiple recipients (emails), similar to your but without lucky.

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

@Huroman-
I don’t understand what you mean. But yes, if you want to send multiple emails, that is the section you will want to edit.

@Huroman-
So just check the values of that form field and send to whomever you want depending upon which option was selected.

I’m sorry I’m not going to write the code for you unless you would like to hire me.

Hi Trev,

How to configure a Local Email Server?

Thank you

Hi Trevor,

In my previous posts, I mentioned that I have put my hotmail email account to replace the “me@somedomain.com” correctly, but the problem is I never receive the email (or probably) never send the email.

You said thats because I have not configured LOCAL MAIL SERVER. Can you please explain how? or at least shed some lights about directions to the solution of the problem using your codes that in fact never receive the email?

Thanks Trevor,
Andrew

Hell yea, this is what I need. I hate that cforms crap and all those garbage plugins. Makes it so hard to control the markup and figure out where the CSS is coming from. This is great, with the honeypot, jquery, and all the fixings…but simple too.

@Michael-
You’ve got a syntax error in your PHP. So go to that line in the file and fix the error.

Trevor:

Great tutorial! I’m wondering how you set it up to use the default/admin email?

Thanks!

@Kurt-
Use get_option().

This seems like a great script but i cant get it to work. The form seems to submit without errors and all the mail settings seem to be correct in PHP. One thing i did notice is that we are running a 64bit version of windows. After doing a bit of reading i have found other people having problems with mail sending on 64bit windows.

My simple question is, is this something that should work on 64bit windows? If not, does anyone have any ideas on what i can try to get this working?

@Nick-
Not sure, sounds like a configuration issue on your server.

I would love you work on some nice vanilla css to add to an 2.0 update for WP 3.0.

You could sell this on Code Cannon too if you want.

I got this wonderful script working on WP 2.9.2 but I’ve tried WP 3.0 with Twentyten and my own custom theme and can’t get it to send.

Anyone have this working on WP 3.0?

Trevor, your patience seems to be infinite. Excellent tutorial, I came to the same conclusion as you regarding the multitude of overwrought contact form plugins.

@everyone-asking-for-support: use Google, do it yourself, or hire Trevor. Good grief people.

Trevor, can you explain why my car won’t start?

Hi trevor i have a problem when i crated a dropdown menu in the menu bar it has 7-8 sub menu items when i am in contact us form,
and then mouse over on menu containing submenu items more that 7-8 they are overlapping with the contact us form fields i am not able to select any submenu item when they are over lapping the text fields of contact us form.

Please answer my question i am waiting for the replay please post it as soon as possible.

Thannks in advance.

@raj-
Sure, you would just need to modify the code to insert all of the values into a table instead of sending the email. Just create a new DB table and store the info there.

Thanks a lot! I was having trouble preparing a decent contact from. This really helped me a lot.

@Steve-
Might be a problem with your mail server.

@Steve-
No clue, there are a lot of variables in mail server setups. Try creating a dummy page that just does a php mail().

Hey Trevor,

I’ve spent ages searching through all the comments, in hope of an answer, but no luck of a resolution. While I have previously made my own PHP contact form for wordpress, I tried yours as well with no avail.

Unfortunately, I can’t give you a link as I am developing this locally with MAMP. Both mine and your scripts work when used on a page, but not on my index.php page. I troubleshooter for a while and realised it was all in the form action link. If I use the permalink php code, the script works but redirects the page to the first post in the query. If I have the action blank, then the page loads white. If I use ‘index.php’, white. If I use the string, the page will load but no validation will run, and the email won’t send! Haha. I have just tried using the full link to my index.php (theme URL and all), and validation ran along with the email being sent, but that was all that displayed! The rest of my index page dissapeared!

Hope you can help me!! Just need to know what the form action has to be! Or another resolution…

@Trevor-

Well, using it on my index.php page works fine, it will just redirect to the first post (http://localhost:8888/wordpress/projects/example) and send/validate. Just wondering if you could help as you have obviously had more experience with wordpress than I! :) Nevermind if you don’t know, I’ll just have to troubleshoot some more.
——-

thx dude, very useful

@Jacob-
Sure, you can definitely use this functionality in themes that you sell. If you could just leave an attribution to me and this article, it would be much appreciated.

@njp-
You can use the jQuery change() method.

Hey Trevor,
Had a quick question. I used your tutorial to come up with my own contact form and it works beautifully. No bloated plugins! However, I’m now using the same idea to build a “Email This Article” sidebar widget. However, I need a bit of help.

I have the form that requests a person’s email and destination email on the the sidebar of every single.php page. When someone submits the form, they get a popup with re-captcha to verify the send, to prevent spam. However my question is this.

The php file I’m posting to is simply named email-this.php and resides in my WP templates directory. Is there away to add a .htaccess or php command to make it work so that the form can get posted to example.com/email-this/ instead of a long url all the way into wp-content/themes/my-theme/email-this.php.

Also, the data about the article is posted to this php file. I don’t want people to be able to access this file directly either. Anyway of solving that?

Please let me know if you have any suggestions. Thanks!

Thank you very much for breaking this down so elegantly. Been working on this all night - but this is a beautiful solution ;-)

Thank you so much for the great contact form. Works like a charm. I love the honeypot captcha - one thing most of the form plugins are missing.

@Mutahhar Mustafa-
It really depends on how your server is setup. Did you update the email address in the code?

@J v. T-
You will have to modify the form so that it works with the SMTP plugin config.

@Risco-
Looks like jQuery was removed from the demo page. I’ve added it back to the demo so it should work now. Thanks for letting me know.

@Risco-
Do you have a link to the page?

@Risco-
The JavaScript that I wrote will not work if you don’t have jQuery included.

@Risco-
You need to include jQuery on your page.

@Risco-
If you are having so much trouble working with this script, maybe you should consider just using a plugin.

hey i have issue ! i am using this contact form but iam using smtp , php mail function not working on my site so how to add smtp class / mailer to run this contact form smoothly ! i am using smtp plugin ‘WP-Mail-SMTP ’ by Callum Macdonald

please reply as this is very important for me ! i was searching for solution !

Hi trevor, I sent a message but apparently this wasn’t added to the article.

Here I go again, thanks for the tutorial the best found through google.
I wanted to ask you a little question if It sounds obvious I’m sorry, I’m just starting in this path. I’d like to know how your form actually sends the mail since I don’t see any smtp server configuration setup in your code, or a php class like phpmailer to allow you to send emails.

Is it a function built in php that allows to email to accounts without the need for a php class or a smtp server from your hosting?

and do you think this form would actually send the email if I set it up in a local enviorment like wamp connected to the internet, would it reach the email account or this has to be on a server to work?

Hi, Trevor.

Thanks for the great tutorial and code. I’m putting it to use on an idea I’ve been toying with.

I have combined your code with some custom fields and a custom write panel. Now, my post author can tick a box to include a contact form in any post or page, and add a title to that contact form. (E.g.: “Yes, I would like to learn more about contact forms!”)

I’m not learning php as quickly as I’d hoped, however, and I can’t figure out how to get the last piece of the puzzle into place without breaking the code: Including the value of the custom field (the form title) in the e-mail that is sent, so I can tell what the sender is replying to. (Alternatively including the post’s title or permalink, but that wouldn’t be quite as elegant. :-)

I can see that you get (too) many questions and support requests about this contact form, though, and realize that you don’t have time to solve every problem people create for themselves (you), but any help or hint you can give will be greatly appreciated.

please help me how to add multiple file to upload and send multiple these file into mail.Anyone know please help me i am very thankx full to you.
waiting for your replay

thank you very much for your trouble
i couldn’t get to the end of the comments(too tired), so excuse me if you have answered this before (and ignore me, no hard feelings :)  )

how can i have my contact script not be self referencing??
i really don’t like the idea, (from a programming perspective) and i cant find any tuts online. Only similar to yours , with the self referencing.

No matter where i place the contactFormScript in the WP folders, it simply cant be found.. (testing locally on xampp)

thank you in advance

@trevor
i get the part of changing the form action (naturally)
i get the part of pulling the form processing code into a separate php file (i.e. formProcessingScript.php)

i am guessing you are suggesting creating one more page template (the one that will include/or make use of the form processing code) and not two, right?

and then wp will be able to find the page with the appropriate template even if there is no page created with the corresponding template, to process the form? it will find it using the template hierarchy right?

i will try that as soon as i get some time
thank you again for your time and advice

I probably didn’t make myself clear sorry for that
yes, this is what i meant, i said one more page template since you (and i can just copy) have provided the code for the form displaying one

i won’t say thank you again, but this:
fast respond!!! couple of machs for sure

@Russell Gillman-
Looks like you are going down the right path. What isn’t working?

BTW - I realise that the code above is still checking for the email address format–not got to this bit yet! Either way, I can type anything into the new field (ie not formatted as an email address) and it doesn’t recognise it as incorrectly formatted.

@Trevor
As in this (in contact-form.php)?

<li><label for=“telephone”>Telephone</label>
<input type=“text” name=“telephone” id=“telephone” value=”<?php if(isset($_POST[‘telephone’]))  echo $_POST[‘telephone’];?>” class=“telephone” />
<?php if($telephoneError != ‘’) { ?>
<span class=“error”><?=$telephoneError;?></span>
<?php } ?>
</li>

Will post a link shortly.

@Trevor
Problem solved. I just had one too many curly brackets! Grrrrr :-)
Thanks - great script.

@Matthew Hull-
It’s already setup to work like that. If the person checks the checkbox, it sends them a copy.

@Matthew Hull-
Just remove the checkbox and the conditional around the second mailing.

@Matthew Hull-
$subject = ‘You emailed Your Name’;
$headers = ‘From: Your Name <noreply@somedomain.com>’;
mail($email, $subject, $body, $headers);

@Joanne-
Do you have a link to your page?

@Joanne-
That link asks me to login.

@Joanne-
Not sure, you tell me if there is any other way you can show me.

@Joanne-
Sure, just remove the class on focus:

$(this).focus(function() {
  $(this).removeClass('inputError');
});

That is assuming that this is your input.

@Joanne-
Just traverse up the DOM and remove the error element when you focus on the input.

If you need the email to stay error-ed out, you would need to bind an event to keydown (or a similar event) to constantly check to see if the email address if valid as a key is pressed.

@Tony-
1. You’ve got everything right, except you said phone should not be required, but you want to modify this a bit:

if(trim($_POST[‘phone’]) !== ‘’) {
  $phone = trim($_POST[‘phone’]);
}

2. Select elements work exactly the same as an input, there can just be an unlimited number of possible values.

3. If you want a field to be required, then you want to do this:

$hasError = true;

That is what triggers the form to know that there are errors in the form.

@Tony-

1. I guess it depends on the subject and email address you are sending from.

2. Not sure, I’m not the greatest with regular expressions. I’m sure you could Google around to find the solution.

Hello again Trevor,

Is it possible to add styles to received form details when using your form.

Thanks.

@Trevor

Can I add some background color and make field names bold in received email?
Thanks.

@Trevor
We are on the same page. Yes the actual email.
Say that I would like to see Email:  in bold when I receive the actual email. So what I did was this.. (simply added the html starting and ending tags)
$emailTo = ‘me@somedomain.com’;
$subject = ‘Contact Form Submission from ‘.$name;
$sendCopy = trim($_POST[‘sendCopy’]);
$body = “Name: $name \n\nEmail: $email \n\nComments: $comments”;
$headers = ‘From: My Site <’.$emailTo.’>’ . “\r\n” . ‘Reply-To: ’ . $email;

But are you suggesting that I should attach a css file to the header?

Also, do I need to get the help of (must use) class.phpmailer.php to attach a file through the form?

Thanks.

@Trevor
I’ll try them out. Thanks for the guidance.

@R.w-
That validation is only on the PHP side in the demo. You could easily add it to the JS too.

@R.w-
Yes, everything should be in the source files. I’m not sure what you mean about the gibberish filter.

@R.w-
No, but you can add whatever you would want to add.

Hi and Thanks a lot for this excellent tutorial.

I haven’t found a tutorial as good as this one. I’ve been searching for hours :) .

My question is :

What license is this code under? Is it GPL? can it be used in a commercial theme.

Thanks!!

@Trevor

Thank you !!
I will for sure.

thanks!

@Lance-
Did you make sure to add the comment at the top to define the template name?

@Karan Israni-
There are way too many variables in mail server setups to try and guess. Can you create a template on the server that just uses the mail() function on page load?

I’m sure that you could use options to handle the email address. Although the whole point of this was to not use a plugin.

My comment form is coded from scratch for ExpressionEngine.

@Karan Israni-
“I didn’t get you. I’m using Xampp and testing everything in my local environment.”

Has mail ever worked? If you create a PHP file and use the mail() function, does it send?

“‘Tis true but i will be making my theme available for download for everyone so if i make a theme usable by anyone, i just HAVE to make it this way, right? Otherwise noobs won’t be able to figure out and the contact form will be useless.”

Or you can just pull the bloginfo(‘admin_email’).

“Have you written any tutorial for this? If not, then are you planning to? I’m very impressed with this form and would love to inherit it in my theme.”

Nope, and don’t plan to. This is an EE comment form, the backend won’t work with WP. The frontend is all available in the source of the page.

@Tony-
1. Just a different user experience. You are adding hits to the server instead of doing client-side.

2. Not sure exactly what you mean. You could use a hash link to scroll down the page.

“Or you can just pull the bloginfo(‘admin_email’).”

Hi, could you please tell me how to use this?
This option seems like a much better one than creating a themes option page for contact form.

Does the code <?php bloginfo(‘admin_email’); ?> go into the contact form’s php file and into the ‘to’ field? Like this:

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

$emailTo = ‘<?php bloginfo(‘admin_email’); ?>’;
  $subject = ‘Contact Form Submission from ‘.$name;
  $sendCopy = trim($_POST[‘sendCopy’]);
 
$body = “Name: $name \n\nEmail: $email \n\nComments: $comments”;
  $headers = ‘From: My Site <’.$emailTo.’>’ . “\r\n” . ‘Reply-To: ’ . $email;
 
mail($emailTo, $subject, $body, $headers);

  if($sendCopy == true) {
  $subject = ‘You emailed Your Name’;
  $headers =

‘From: Your Name <israni.karan@gmail.com>’;
  mail($email, $subject, $body, $headers);
  }

  $emailSent = true;

}
}
} ?>

?

Great tutorial Trevor. I think im going to implement this on my site. Its really simple and straightforward. I wanted to know what your take is on phpmailer or swift mailer? Do they add any additional security measures instead of the stock php mail() function?

Much appreciated.

Hello again Trevor,

Your form’s textarea field contains “stripslashes” function and it removes linebreaks as well.

What can you suggest to keep linebreaks intact when the data is entered in to the textarea as few paragraphs?

Thank you.

Heey,

the e-mail doesnt get send when Javascript is enabled. I cant find the problem.

http://www.sanderwehkamp.nl/assignments/site

Very nice tutorial, very well explained!

Thanks for your help.

I will defiantly be implementing this on my website, so much easier to customise than a plug in and the code is a lot cleaner.

Excellent post

Max Rose-Collins

@Matt-
There are tons of captcha scripts available online, and this article is over 2 years old, so I don’t think I’ll be updating this.