WordPress for Designers: Day 18

I’ll bet that many of you have used or have been searching for a WordPress contact form to you for yourself or a client. Plugins can be great and very convenient, but your also relying on the plugin developer to make sure it works and does what you want. Today, we are going to build our contact page, complete with a working AJAX/php contact form! We will use the jQuery library to pull off the AJAX call and animation effects. It’s a day you won’t want to miss if you have ever wondered how to build an AJAX contact form with WordPress.

Day 18: Creating an AJAX Contact Form

Resources you May Enjoy…



36

Comments
  • Thank you so much for your screencasts!

  • Matt says:

    Wow! For whatever reason I never thought of creating a separate page for stuff like that! That gives me some encouragement!

    Great stuff, Drew, and keep it up!

  • danc Chan says:

    Guess I am the second one who read this screen cast this round. Thanks Drew for the promising screen cast.

    Hey, still the same question. Mind to have the screen cast sharper/clearer? I know you tried to read everything out, but just try your best, mate.

    Have a wonderful day.

  • Ali says:

    great one ..
    but why the volume of the sound is always low ?!

  • Garrett says:

    GREAT TUTORIAL!!!!!!

    I have always been mystified why my input forms look a bit janky and uneven, but I see now that I just need to apply display:block to the inputs.

    +1 on teaching us how to submit forms with Ajax. AWESOME.

  • Ariel says:

    Wow, this is sooo great! thanks so much for this screencast Drew, learned a lot!

  • Rafael Minero says:

    Great screencast again! Really making me want to know more about wordpress.

    Thanks.

  • Angel says:

    Thank you!, I’m trying to stay away of using pluggins

  • Sylvin says:

    Nice !

    Could we please get the source files of PHP script and JS file in order to follow the screencast easily?

    Thanks!

  • Richard says:

    Awesome Drew, Nice job as usual. I am thoroughly enjoying this series, and found this installment to be particularly handy.

    FWIW: The word is pronounced “On-Q”. :)

  • Bram says:

    Verry nice screencast!

    It would indeed be helpfull to have to 2 scripts for download.

  • Shibi Kannan says:

    That was fast, I wasn’t expecting to see Day18 so soon but it is never too late to watch a good sceencast. It helped me understand why people do both php mailer and jquery stuff for their contact forms. One I noticed the error messages keep adding up in bottom, how to refresh by ajax and clear previous errors.

  • Owzzz says:

    Really enjoying this screencast series… I find it so much easier watching tutorials as opposed to reading them..

    Just starting my first wordpress project.. will post a link up when it’s done..

    Thanks again Drew

    Great Work..

  • Fantastic…this is exactly what I was needing today!

    It would be great to have a HQ version for download so the code is actually readable.

  • Pat says:

    Another nice screencast!! I was just looking for a decent tutorial on wp_enqueue_script and then I found this!!

    Im having a problem getting it to work however – the server seems to be adding some kind of query to my script name. In the source code its showing up as ‘correct/file/path/scriptname.js?ver=2.8.4′.

    Ideas anyone???

    Thanks again for the fantastic series!!!!

  • Mike says:

    I like this series as much as I did with 24 on Fox :D coz I just cant have enough with this.

    One thing though, it may be nice if you can add some kind of anti spam method for the day 19th.

    Thank you so much for doing a fantastic job. I love WP more bcoz of you Drew

  • I’m loving this series Drew! Thanks very much for taking the time to record all of these screencasts.

    I used to be a Joomla man but I’m preferring to use Wordpress for my clients now and I’m learning a lot about the Wordpress functions from your screencasts. I definitely prefer the Wordpress functions as opposed to Joomla’s MVC framework. The Wordpress functions are always so logical and the Wordpress Codex site is unreal when it comes to documentation.

    I used to prefer Joomla for all the module positions you can put into the templates but since I created a couple of themes for clients that have multiple sidebars I’m nearly gonna ditch Joomla all together.

    Now I just need to find the time to do my own site properly!!!

    Thanks again Drew :)

  • Owzzz says:

    Yeah agreed,

    Could do with the source code for this as when I make the screencast full size to read the text its blurred.

    Can you make it a higher res?

  • GhostPool says:

    I can send mail via the contact form just fine using the default php method, however it will not send using javascript. I don’t get any errors, it’s just the form ignores the javascript and still sends the default way.

    What am I doing wrong?

  • Amber says:

    Hi there!

    Just wanted to say that I really appreciate the screencasts. They are very helpful and informative and appreciate all the time you spend to prep these!

    I have a few comments/questions/etc:

    1. With this screencast, most of us are running this on a local server (as you stated was the way we should set this up on the very first day), this we aren’t able to test if the email was sent or not. I get an error such as this (and I hope it appears in the comments):

    Warning: mail () [function.mail]: Failed to connect to mailserver at “localhost” port 25, verify your “SMTP” and “smtp_port” setting in php.ini or use ini_set() in C:\xampp\htdocs\paperbusiness\send_mail.php on line 9
    Problem sending email. Whoops.

    2. I noticed that you pulled the ajax-loader.gif from somewhere on your computer, but didn’t explain where you got it or anything.

    3. To solve the issue with the hard coding of the url everywhere, you can simply use the php call of bloginfo(‘template_directory’) right before you start with the directory of /style /. More info here: http://codex.wordpress.org/Template_Tags/bloginfo

    4. I am having a really really really hard time reading your code, especially since I have no knowledge of JS/AJAX and very limited knowledge of PHP syntax. It is really hard to see what is a colon (:), semicolon (;), comma (,), period (.), parenthesis ( ( or) ), and a curly bracket ( { or } ). It would be nice if you can release parts of the code with the screencastsl, zoom in on your screen (like Jeff), or state/say everything that you are typing.

    I really hope this works, as I am not able to test it out on my local server.

    Great tutorials though and I appreciate all the time and prep you put in delivering these!

  • Mike says:

    For some reason, I cannot make this thing to work. No matter what I filled in the form, it always returned “please fill in all fields …” :(

    I make sure there is no typo in the code already >”<

  • Mike says:

    I second what Amber said!

    How did you configure your localhost for the mail() to work? I googled but no hope. May be you can tell us how did you do it in your next video screencast?

  • Bram says:

    @ Amber

    I dont know where Drew did get his loader immage from.
    But I get mine from http://www.ajaxload.info/
    Its basicly just an animated gif so you can design a custom one if you would like to.

  • Amber says:

    @Bram, Thank you for that! I appreciate it!

    Also, now that I got this up on a live server, the JS is not working. It sends the email ok, but it does not do the loader or the message below the submit button. Instead it displays ‘your message has been sent’ on a white page. I can’t figure out what I am doing wrong.

  • Amber says:

    ADD: Aren’t we suppose to put something in the functions.js file like we did for the looped slider?

  • donna says:

    I am also having the same issue as Amber (i.e. the email is sent but it displays the “sent” message on a white page. It acts like the ajax components are not even there. Has anyone been able to get this to work? Are there any steps that are missing from the tutorial? Thanks for any help you can give.

  • Owzzz says:

    Im having the same issue as donna and amber…

    Im guessing my js file is incorrect as I could not be certain from the screencast if the colons were semi’s or not..

    better resolution would not go a miss..

    loving the screen casts by the way!

  • Bram says:

    Mine is working perfect, so there is nothing wrong or incomplete with te code.
    Maybe check the ajax_mail.js again, also make shure the return false; is on the right place.

  • donna says:

    I did finally get it to work. After running under firebug, I could see that it wasn’t finding jquery. I assume the wp_enqueue is supposed to load jquery? I had to explicitly load jquery in the header using google.load(“jquery”, “1.3.2″) and then everything worked.

    I also had some typos along the way so a better quality resolution would have definitely helped.

  • Amber says:

    @ Bram and @ Donna,

    Would either of you mind giving us a link to your code?

  • dominic says:

    amber:

    I had a similar problem as you. Where the email was sent when the jquery code was not activated but not vice versa. After a couple of hours I narrowed it down to the part of the jquery code (your mileage may vary… perhaps it was just my install) where you state the variables. “input_name = …..” etc…

    So what you need to do here is:
    1. add IDs to your input areas (contact.php) ie. id=”name” for your name input.. id=”subject” for your subject input …etc.
    2. then remove the ‘eq(0), eq(1), eq(2)’ bits
    3. and replace them with #name or #subject …. so the full markup is = $(‘input#name’).val(),

    ALSO, the wp_enqueue did not work for me. so I used a conditional statement in the header to activate the script.

    Hope this helps.

  • salah says:

    please help
    there is error

    “Warning: mail() [function.mail]: “sendmail_from” not set in php.ini or custom “From:” header missing in D:\camel\www\2\send_email.php on line 9
    problem sending email.woopsy .
    this is the code

    please help . i am waiting

  • salah says:

    oh its server problem

    but the form don’t sends email
    i have changed the email few times but it don’t works
    it said that my message is sent in the white page but i do not find any message in my email boxes what’s the problem ?

  • john says:

    hey Drew, I LOVE THIS SEries. I was having a hard time making contact form work. I am following along loosely but building a site where i have a search bar in the header and the contact form in the side bar. When send the message (from the contact form) it say “sorry no posts found by that name.”

    can any one help

    thanks,
    and big props to drew running us through this…. really a great series

  • john says:

    sorry for my horrible spelling… haha… i really should have took the time to proof that one… haha

  • Jaysone says:

    cant wait for day 19 :)