How to Create a Contact Form Using PHP and AJAX

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.

Download the Source Code

69

Comments
  • Juan Vargas says:

    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.

  • 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 says:

    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 says:

    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 says:

    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 says:

    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 says:

    Sorry, the full code didn’t show up in my previous comment, but you can grab it from that link.

  • Rolando says:

    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???

  • Benn says:

    Has anyone managed to get this to work within wordpress yet?

    Im really struggling to get the sendEmail.php and the phpMailer scripts to work within a page template.

    Can anyone help please?

    B

  • Martin Martev says:

    Hi, your tutorial works perfectly for me as long as i don’t try to add something.
    I want to add a phone number field and a couple of drop down selects but i can’t make it work can you point me in the right direction here are my files:
    http://torogas.com/test/nasnew/form.rar
    you can see the form live here:
    http://torogas.com/test/nasnew/contacts.php

  • Martin Martev says:

    never mind that it was a miss on my end

  • Martin Martev says:

    to MGFX this happend to me too in my case i did receive the e-mail they just ended up in the trash bin and never showed up in the inbox and did not show as unread mails in the trash but it still worked

  • Ronald H. says:

    The fact that you made a video about this really makes a difference. I my opinion, all tutorials need both video (for visual), and text for refer purposes.

  • Mattrix says:

    I must be doing something wrong, because I get these errors straight away, before changing any of the downloaded source code:

    Notice: Undefined variable: error in C:\wamp\www\contact_form\sendEmail.php on line 22

    Deprecated: Function eregi() is deprecated in C:\wamp\www\contact_form\phpMailer\class.phpmailer.php on line 594

    Notice: Undefined variable: extra in C:\wamp\www\contact_form\phpMailer\class.smtp.php on line 173

    Warning: 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

    If anyone can tell me what I’m doing wrong it would be appreciated.
    (oh, I’m running through WAMP, but I just got it, so I don’t really know how to work it.)

  • Chris says:

    Great screencast! Cheers Jeff!

    To people getting this error:

    Notice: Undefined variable: error in C:\wamp\www\contact_form\sendEmail.php on line 22

    or something similar, if you host it on the internet, this error should not appear. Well in my case it didn’t. I’m guessing it is something to do with wamp not allowing to send mail.

  • Corinne says:

    Hello Jeffrey,

    I’ve been using your form on several websites but for some reason it’s not working for a current one.

    I use Chrome’s Javascript console and this is what I get:

    Uncaught ReferenceError: $ is not defined (Line 1)

    What I did was remove the message portions because I just needed visitors to sign up with their name and email. The PHP script works fine thankfully!

    Mail script: http://templates.cordesignonline.com/comingsoon/mailscript.js
    Page: http://templates.cordesignonline.com/comingsoon

    I’ve compared the JS code with the original and nothing else is different so I’m thinking it might be the HTML or even CSS. Please help if you can. I know you’re a busy guy!

    Thanks a lot,
    Corinne

  • bb designer says:

    hey jeff! you r great ! actually,i tested your form locally with wamp and it works fine but when i checked it online by free hosting company byethost.com which allows sendmail function when i send message it waits for a while and says u r message has been sent as usuall ! but i’m unable to receive any mail ? why is dat? can u help me plz? should i get paid hosting ? or wat kinda solution do u prefer?

    thanks in adavnce !
    sj.

  • When i test this in ie8 i get the object expecter error on line 15 char 3
    this is my code
    $(function() {
    // These first three lines of code compensate for Javascript being turned on and off.
    // It simply changes the submit input field from a type of “submit” to a type of “button”.

    var paraTag = $(‘input#submit’).parent(‘p’);
    $(paraTag).children(‘input’).remove();
    $(paraTag).append(”);

    $(‘#main input#submit’).click(function() {
    $(‘#main’).append(”);

    var name = $(‘input#name’).val();
    var email = $(‘input#email’).val();
    var tel = $(‘input#tel’).val();
    var contactmethod = $(’select#contactmethod’).val();
    var comments = $(‘textarea#comments’).val();

    $.ajax({
    type: ‘post’,
    url: ’sendEmail.php’,
    data: ‘name=’ + name + ‘&email=’ + email + ‘&tel=’ + tel + ‘&contactmethod=’ + contactmethod + ‘&comments=’ + comments,

    success: function(results) {
    $(‘#main img.loaderIcon’).fadeOut(1000);
    $(‘ul#response’).html(results);
    }
    }); // end ajax
    });
    });
    any ideas?

  • when i added a select menu in my form it does not work in ie8 (object expectetd error) on this line: var cont = $(’select#cont’).val(); works in other browsers and older ie versions any ideas?