Created On
byAye Aye Mon
You are here:
< Back

If you do not want to install it by yourself, I provide the installation service. You can buy it here.

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

You can find the form demo links below:

1. Contact Form with an Attachment

2. Simple Contact Form

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.

For Contact Form with an Attachment:

At lines 7 & 8, replace with your allowed file types and recipient email respectively. Save and close.

For Simple Contact Form:

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.

September 5, 2019

68 Comments

  1. Chris

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

    Reply
  2. Marci

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

    Reply
  3. jo

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

    Reply
  4. joel sanniser

    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. Bruce McLean

    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. Federico

    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
    • Aye Aye Mon

      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. Wayne Bartlett

    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. Anthony Hague

    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
    • Aye Aye Mon

      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. Charalambos

    Hello,
    The form is not working. Any help ?

    Reply
  10. Marius

    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. Olivier Lavenant

    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
    • Aye Aye Mon

      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
  13. Olivier Lavenant

    What do you meed about clock ?

    Reply
  14. Diddy Smalls

    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
    • Aye Aye Mon

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

      Reply
      • Diddy Smalls

        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
        • Aye Aye Mon

          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
  15. abhijeet kumar

    can you please help me with template 453_outline. Send message is not working in stay in touch part

    Reply
  16. Stephen Newman

    Absolutely the best customer support I have ever encountered. Bar none.

    Diligently helped me get my Simple Contact Form working on my web site. The best money I’ve ever spent on software.

    Kudos to you Aye Aye Mon.

    Reply
  17. drew dixon

    Hello. I haven’t been able to get this to work just yet. When I put the

    Send result message will display here.

    It inserts a green box on top of my “Send Message” button. Also, when I send the message it just refreshes the page. I’m not positive what I am doing wrong here. Any help would be much appreciated.

    Reply
    • Aye Aye Mon

      Hello Drew,
      I have tested your contact form and it works fine. To hide the green message before sending, please add the following code to the end of the templatemo-style.css file.
      .d-none { display: none; }

      Reply
      • drew dixon

        Green Box is now gone, but I still haven’t received an email yet from the form. It shows that the message has been sent successfully and I have tried sending to different email addresses by changing the send email script. Could you please help me figure this one out? I can send you my files if you need. Thanks so much.

        Reply
  18. Drew Dixon

    I checked the spam folder and it isn’t there either.

    Reply
  19. First Timer

    1) in the send-email.php file, how to add two email addresses to receive a visitor’s form submission? for example, one copy goes to the webmaster, another copy goes to a company employee?

    Reply
  20. Babu M

    My sent email concept is not working, I email you. Template:templatemo_537_art_factory
    Kindly do the needful
    very urgent

    Reply
  21. Rin

    Hi, could you please me, an error message pop out like below:

    Notice: Undefined variable: body in /storage/ssd2/917/13603917/public_html/send-email.php on line 8 success

    Reply
  22. Carlos Olmos

    hola , su ayuda por favor , compre el

    Simple-Contact-Form
    — See the installation instructions at https://www.ltcclock.com/knowledge-base/simple-contact-form/

    pero no lo puedo instalar , lo necesito para el template Hydro_509, por favor su ayuda. gracias

    Reply
  23. John Hart

    I am unable to get the simple contact form to work correctly. I am using the tooplate page template located here: https://www.tooplate.com/view/2107-new-spot
    The error page that is generated refers to the following: HTTP Error 405.0 – Method Not Allowed
    The page you are looking for cannot be displayed because an invalid method (HTTP verb) is being used.
    The site is hosted on Azure.
    Please assist.

    Reply
    • Aye Aye Mon

      Hi John,
      Thanks for your purchase!
      I checked your website and found that the jquery file is missing.
      Please copy and paste jquery.min.js file to the js folder and in the index.html file, import jquery.min.js above the send-email-ajax import.
      Import jquery above send-email-ajax.

      Reply
  24. David Argence

    Hi !

    Works perfectly, thank you for your work.

    Is there a way to modify the color of the text and background of the success message (green) ?

    Reply
    • Aye Aye Mon

      Hi David,

      Thanks for your purchase and comment!

      You can modify the colors by adding a new CSS rule to your CSS file like so:

      .alert-success {
      color: #fff;
      background-color: #5bc0de;
      }

      Reply

Leave a Reply

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