You are here:
< Back

In this tutorial, I will show you how to add AJAX & PHP code to send emails using Simple Contact Form.

You can see the form demo here.

Prerequisites

To follow this tutorial, you need:
1. A Templatemo or Tooplate Template (I will be using Templatemo 536 Dream Pulse in this example.)
2. Contact Form

Extract both zip files and follow the steps below.

1. Copy Files

From contact-form folder to templatemo_536_dream_pulse folder, copy send-email.php to root folder and js/send-email-ajax.js to js folder.

2. Contact Form Scripts

  1. Open templatemo_536_dream_pulse/index.html file in a text editor. Add id="contact-form" inside <form> at line 336.
  2. From contact-form/index.html file, copy code from line 32-34 and paste it in templatemo_536_dream_pulse/index.html file at line 347.
  3. Also in templatemo_536_dream_pulse/index.html, add <script src="js/send-email-ajax.js"></script> before the closing</body>tag. Save and close.
Contact Form Scripts

4. Open templatemo_536_dream_pulse/send-email.php in a text editor. At line 2, replace with your email. Save and close.

send-email.php

3. Upload to Your Server and Test

Upload templatemo_536_dream_pulse files to your web host and test the form.
You should receive the test message in your email shortly.

37 Comments

  1. I followed these directions but I still can’t get it to work. I am using Templatemo 503 Newline

    Reply
  2. Hi!
    I need some help. Everything ok, but if send a message from mobile browser, all of mails land in spam.

    Reply
  3. Hello
    Can you help me ?
    I made the changes on templatemo_537_art_factory original, but impossible to make it work!

    Reply
  4. I just made the change, but it still doesn’t work, when I click send, I have a return home page. In private perhaps?

    Reply
  5. works great except for 1 litle problem..
    I have set the email to: address in line 2 of the send-email.php to my gmail accoount as I cannot get it to work to my wifes busines account of
    info@amitylabardoodles.com.au
    Is there a string holding the email adress that is set too short?
    I have tried other address without any problems. Could you please shed some light on this.
    Thanks

    Reply
  6. Hi, it doesn’t work. I am using the ‘templatemo_454_compass’ template. I also uploaded the contact-form itself with no modifications and is not working (http://lapaleotta.com/contact-form/index.html). Can you help me?

    Reply
    • Hi Federico,
      There seems to be something wrong with your send-email.php file. Could you send me that file? clock at learnteachcenter dot com.

      Reply
  7. I have “Tinker Free Website Template” and I added the “contact-form” and could not get it to work. It errors and gives the error message every time.
    I have followed the instructions above.

    Reply
  8. Hi, I’m trying to use the files in templatemo_540_lava_landing_page and it won’t send. I’m also trying to have the submit button link to another html page.

    I have checked the junk and spam folders of my email and tested half a dozen times with no success.

    Can you please help?

    Reply
    • Hi Anthony,

      Did you receive an error message when you submit the form?
      Could you send index.html & send-email.php to clock at learnteachcenter dot com?

      Reply
  9. Hello,
    The form is not working. Any help ?

    Reply
  10. Hi
    the form works, and now I tried to add the functionality to add an attachment to the email, but I fail. can you support? any tutorial which can help?

    Reply
  11. Hello,

    After all thank you for the template.
    I use the temple 2097-pop from tooplate. I think I follow the instructions but I don’t find why it doesn’t work.
    Does the website have to be online to work or it can work locally ?

    Reply
    • Hello Olivier,
      Thank you for your contact form purchase.
      The website has to be online to work. However, the 2097-pop template requires some modifications to the code. Can you send your website files to clock at learnteachcenter dot com?

      Reply
  12. What do you meed about clock ?

    Reply
  13. This doesn’t work. Once I submit the form I’m brought back to the top of the home page with no result message. And no email in the spam folder or inbox. Template 537.

    Reply
    • Hi,
      send-email-ajax.js is missing in your js folder. Please check.

      Reply
      • I missed that. Thank you. But it’s still not working. Do I need to set the URL in the send-email-ajax.js to point to the directory of send-email.php?

        Are you able to continue this support via email?

        Reply
        • No, but send-email.php file must be in the same folder as index.html file.

          Yes, I can continue this support via email. My email is clock at learnteachcenter dot com.

          Reply

Leave a Reply

Your email address will not be published. Required fields are marked *