I noticed a thread on the forums that discussed exactly how to implement a working contact form into a site template. So I thought to myself, “What better way to demonstrate the process than with a screencast!”
The code that you’ll find here is 100% yours to use in any way, shape, or form. Feel free to use it as it is, or or edit the code to your heart’s content. As long as you use it to make your ThemeForest templates better, I’ll be happy.
Click on the “Toggle” to view the video in full screen.
*Note - I’ve added three lines of code to the Javascript file. These lines aren’t referenced in the screencast, but are included in the source files. They allow for the code to work with, or without Javascript turned on.
Mike Schinkel
October 30th, 2008
Nice little tutorial video. I really liked how you explained everything in detail such as showing people how to find the phpMailer.
One thing I noticed was that you didn’t urlencode the name, email, and comments so if someone enters some unexpected values for some of your fields it will break. Just something to consider/fix in your code.
Also I wanted to mention that your site is truly beautiful; I really like the design you have created. Here’s hoping you can build some themes for Drupal with the same level of design; we non-designer Drupal developers really need some good themes to work with!
Stefan Ashwell
October 30th, 2008
Nice tutorial thanks
Valentino Aluigi
October 30th, 2008
“function (joeThePlumber)” ? LOL!
matt
October 30th, 2008
I was trying to watch your PHP contact form tutorial but when you press play it goes staight to the next one. It skips forward to the photo gallery tutorial.
Joseph
October 30th, 2008
Why not make a “Tutorials” post category and put this in it. I’m sure there’s many of us that would like to conveniently see all your tutorials at once.
Thanks for the cool instructions.
xmdsys
October 30th, 2008
Great job! This is fantastic. I can see a lot of additions being made to it as well. Thanks a ton!
Jeffrey
October 30th, 2008
@Joseph - Great idea. I’ll take care of that. ..Anything that makes more people subscribe works for me!
Yosi
October 31st, 2008
Jeffrey,
I like your screencasts they’re amazing
But something that I recommend to do Is to add htmlspecialchars to the name,comments and email.
Nate
November 3rd, 2008
Why aren’t there more subscribers here? This place is full of awesome info! Keep up the great work guys, I’m sure it will pay off.
Mads Kjaer
November 5th, 2008
Hi Jeffrey,
Great job on the screencast. Just a quick note, you said that you used -tags to be able to set the label names to “block” using CSS. There is actually a tag created to do just that! It’s called , and one uses it like this:
Name:
This greatly increases the accessibility and usability of a site. It help people with screenreaders, etc. select the text field, and us “normal” web users can actually just click anywhere on the label and go straight to the text field to start typing right away!
Keep the good work up!
Mads
Jon
November 20th, 2008
Awesome job. Thank you!
Mike
November 21st, 2008
Pretty cool, but I am curious as to why you didn’t use the label tag in your form?
Jaswinder
November 21st, 2008
jeffrey i have read quite a few of your posts and this is by far one of the best… in depth yet easy to follow and a method i would actually use
umit
November 21st, 2008
Nice tutorial Thanks
Fernando
November 23rd, 2008
Nice tutorial!! very usefull!
I was wondering how to replace the input button for a styleable button like
code: Send
When I replace the button, the ajax function breaks and loads the error messages into another blank page.
thanks
Miryam
November 24th, 2008
Hi thanks for the tut…
I have a problem when i hit the botton “send” the elements are opend in another page, exactely in http://localhost:8888/alice22/sendEmail.php
I cant figure it out by myself!
Romin
December 7th, 2008
Hey I downloaded your source it did not work what is going on?
http://gtacommunity.exofire.net/contact/
Megan
December 15th, 2008
Where is the php.ini file to edit? Do I download a generic one from somewhere?
Snookerman
December 18th, 2008
@Jeff
You said that there is a bug that makes the email in Gmaill show your own address as the sender. Isn’t that actually the address you wrote in the php code, the smpt email address and password? You can see that in the mail, the receiver address is spelled with only lowercase letters, but the sender one has the Forest and Test words with an uppercase letter, just like you wrote it in the php code. Maybe that should actually be the senders email address and password. It also doesn’t make much sense why the sender requires your password to send a mail to you. Also, wouldn’t that be visible to anyone by just taking a look at the php file? I really appreciate your tutorials and I want to use this one but I want to be sure about this first. Thanks for your help!
Cecil
December 27th, 2008
hello i am trying to work with your php mailer. I is great but i am have a promblem. i am using gmail just like you and this is what I get “Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or ‘}’ in MYWEBSITE/stream/phpMailer/class.phpmailer.php on line 45″
I have examined line 45 and I am by no means a coder programmer. What does this mean and what can i do about it.
Michael
December 30th, 2008
@ Fernando
I have swapped the button code for a link…
index.php
Send
& modified the script.js file
$(’#main a#submit’).onclick(function() {
…it works fine with JS switched on but when it is switched off the user is sent to the error/feedback page, but it lists all the form errors regardless of what was entered by the user!
Any help with this issue would be greatly appreciated
Michael
December 30th, 2008
…the code for the ’send’ link - previous post
index.php
a href=”sendEmail.php” onclick=”return false;” title=”Submit” class=”link_button” name=”submit” id=”submit”>Send
Josh
January 1st, 2009
Hey Jeff,
Fantastic tutorial! The only question I have about it is concerning the GMail code that you added in the sendEmail.php file. As you mentioned, I had the same bug where GMail was not showing me the proper sender nor their emai address. As I was looking the code over, I started to wonder why I even needed to put in my GMail username and password in the first place to send an email from the server.
What I chose to do was just delete that entire block of code title “GMail Stuff” from my sendEmail.php file up until $mail->Send();. Once I tried sending an email with this modified code, everything worked properly. I have tried viewing the emails in Outlook and GMail, and everything works great
I mean in no way to criticize your tutorial, as I am still learning PHP. I just wasn’t sure why you added the GMail block in the first place. I hope this tip can help others that were having this problem. I look forward to more tutorials from you and can proudly say I am following your JQuery series.
Thanks,
-Josh
Steve
January 4th, 2009
@josh
Thanks for clarifying the GMail issue!
What do you think Jeffery ?
…Bueller ??
Maxi
January 14th, 2009
Very COOL tut.Good work .
Paperboy
January 22nd, 2009
Very well done contact form, thanks!
I’m trying this out for a swedish site and the letters “å ä ö” didn’t work out very well… How can I change the charset in the messages being sent?
TJ
January 30th, 2009
Nice tutorial, Jeffrey. If I recall, haven’t you already posted something about creating a contact form using PHP and JS?
In any case, this is helpful for beginners as well as being nice for reviewing and learning how others script. Thanks!
Diezko
January 30th, 2009
Josh say
“What I chose to do was just delete that entire block of code title “GMail Stuff” from my sendEmail.php file up until $mail->Send();. Once I tried sending an email with this modified code, everything worked properly. I have tried viewing the emails in Outlook and GMail, and everything works great
”
—-
wok for me too, eah!
on a ftp-web server.
Thank for great tutorial.
David
February 1st, 2009
Great tutorial.. I am having an problem though.. I want to have the submit button to be an image.. I tried making the changes but it wont work as an image.. any ideas?
Hassan Ijaz
February 6th, 2009
Hey Jeff, Can you please let me know about some book or a very good site which provides how to create site layouts and then code them , make them ready for the web? Please help me out. I really want to learn that stuff.
Learning a lot from this series Jeff! Awesome!
-Hassan
Jackline
February 8th, 2009
Im so greatful to you i could marry you…..so happy i get it now as a beginner.
James
February 17th, 2009
Anyone else getting this error:
stream_socket_enable_crypto() [streams.crypto]: this stream does not support SSL/crypto in D:\Domains\zoost.ie\wwwroot\eclicks\phpMailer\class.smtp.php on line 194
:-S
Sam
February 18th, 2009
Has anybody else had trouble using a gmail email address without having the GMAIL STUFF section of sendEmail.php?
Works with it in there, but doesn’t when I remove it. I would prefer to remove it as I don’t want my gmail login information visible in the php file.
But overall, thanks for a well produced tutorial.
Karu
February 18th, 2009
hi,Jeff thx for gr8 tutorial but i am having one prob.
When i click submit it just opens send.php in a new tab
Your help would be much appreciated .
camille
February 19th, 2009
Hello,
I have an error using php mailer the same code as the source you put online.
The mail is sent but the following error is written:
Notice: Undefined variable: extra in C:\wamp\www\mess\php\phpMailer\class.smtp.php on line 173
What should I do?
Thaks a lot for your help! Awsome tutarial by the way,
Camille
Siewlee
February 19th, 2009
Jeffrey, u have done a great job on this screencast with all the explaination.
I am lost iin the sending mail part, hope you can help me on this:
I am having the same problem with @james (stream_socket_enable_crypto() [streams.crypto]: this stream does not support SSL/crypto in C:\wamp\www\contact_form\phpMailer\class.smtp.php on line 194)
and also @camille
(Notice: Undefined variable: extra in C:\wamp\www\contact_form\phpMailer\class.smtp.php on line 173).
When i removed the GMAIL stuff $mail-> up to $mail->Send();
Those errors are gone and it sent d messages successfully, but when i go to my gmail to check the mail, no incoming mail. i wonder how to solve this problem.
Hope i will get help from the experts here.
Thanks.
cosinus
February 24th, 2009
hi,Jeff thanks for your tutorial but i am having the same problem as Karu, when i click submit it just opens send.php in a new tab
Help please !
camille
February 27th, 2009
hello Jeff,
I’ve looked all over to solve my problem (that siewlee also has…)
Notice: Undefined variable: extra in C:\wamp\www\contact_form\phpMailer\class.smtp.php on line 173
I cannot find an answer… It would be awsome for us if you could help us on that…
thanks a lot in advance, your work is incredible!
camille
camilo lopez
March 1st, 2009
Thanks so much, after trying a lot of different resources, finally I found something which really works. Thank you very much.
cosinus
March 3rd, 2009
Hello Again,
I dont why but when I used mootools it worked !!!
Thanks again for your tutorial
Maxwell Ivey
March 6th, 2009
Hello; I’m a visually impaired computer user trying to improve my website by adding a contact form for people to use to post new equipment listings to my website. My efforts are further complicated by using an air card as I have to travel quite a bit to make a living while I wait for the website to hit. So, I’d love to view your video tutorials, but it would help greatly if you could tell me which one if any address my specific problem. The form not only needs to have fields for contact info, but I really need for there to be a way for people to submit photos or videos along with their contact as the main purpose of the contact is to list their equipment on my site. I hope you can help with this. Thank you, Max
William Rouse
March 9th, 2009
It would be of value to me if you gave some thought to explaining how to modify your code to have it work from the hosting site of a webpage on the internet SMTP mail server rather than going trough Google.
Thanks for the code. It was helpful to see how this work in an OOP setting.
WBR
William Rouse
March 9th, 2009
Jeff:
Never mind, I spent most of the day, but I figured out how to send from my development system via my hosting site SMTP server.
William
Brian
March 20th, 2009
This tutorial was very informative and I have bookmarked your site. I’m sure I’ll be back very soon. Thank you.
Chris
March 22nd, 2009
I have been watching your tuts all day. They are great!
Crusar
March 24th, 2009
I’ve been looking for at well explained TUT on this subject for so long. Thank you Jeffrey
Dorin
April 9th, 2009
i dont’t know why but it says “Oops The link appears broken
Michael
April 12th, 2009
Thanks for the tutorial, this is exactly what I was looking for. I plan on loading it dynamically using facebox.
Chris
April 30th, 2009
I managed to get this program to work when I did the tutorial. However, when I tried to modify it to use it for a different contact form I did, I had trouble this time around and I don’t understand what’s going wrong.
Johnb
May 5th, 2009
Anyone know how to change the text on the submit button? It says “Contact Me Now”, but html form code says it should be “Contact Me”. I can’t find anything in the files that is causing the text to be overridden.
Juan Vargas
May 15th, 2009
nice tutorial, I am new to web design, and this is the first time that i see a tutorial for .php that i totally understand. thanks!
you are amazing.
Charles Dumont
May 25th, 2009
Uh…yes the tutorial is great but I guess I must be really stupid because I feel I’m still missing tons of info!
What do I do with the source files now? Where do I upload them? Into the Theme I’m using sure BUT, I already HAVE a index.php file there, surely I’m not going to override it with this one…right?? Why wouldn’t the file be called “contact.php” instead? Also, I already have a “JS” folder in my theme file, if I transfer these source files to my theme, am I supposed to take what’s in the source “JS” and put it in with what’s in my existing theme “JS” folder?
I’m sorry but this isn’t clear to me, the entire section of “What to do with the Source files once you’ve modified them” is missing for this dummy…please help!!!
slam
June 7th, 2009
I’m using a local host. I tried and tested it but my yahoo account is not receiving anything.
I changed the email address provided in sendmail.php to my own email but it seems like is not working on my side.
What should I do?
Please help.
Tester
June 13th, 2009
Hi….
I just checked your form with yahoo mail & gmail …..& its not working….
Infact form submitted successfully but i never recieved it in my mailbox…..
I have some other form which are working perfectly but they are not ajaxed….
Welll wishing you luck …..tc
Mo
June 19th, 2009
Thanks for the tutorial. I am having an issue where I just get the php script after hitting the send e-mail button. Anyone know why that is?
Derek Loewen
June 20th, 2009
I removed the Gmail portion as well, and it works great, thanks.
There is one big issue with this form though - it will not submit with javascript disabled. To fix this, use a noscript HTML tag like so:
<!--
document.write('');
-->
You can find more details about this method in the article at http://www.webaim.org/techniques/javascript/alternatives.php
Derek Loewen
June 20th, 2009
Sorry, the full code didn’t show up in my previous comment, but you can grab it from that link.
Rolando
June 21st, 2009
Thank you for this great tutorial!
I just have a question… I can’t find my php.ini file in my server, I’m using a shared hosting account.
Can anyone help me to find it???