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
- Open
templatemo_536_dream_pulse/index.htmlfile in a text editor. Addid="contact-form"inside<form>at line 336. - From
contact-form/index.htmlfile, copy code fromline 32-34and paste it intemplatemo_536_dream_pulse/index.htmlfile atline 347. - 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.
4. Open templatemo_536_dream_pulse/send-email.php in a text editor. At line 2, replace with your email. Save and close.
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.
I followed these directions but I still can’t get it to work. I am using Templatemo 503 Newline
Can you show me your code?
Hi!
I need some help. Everything ok, but if send a message from mobile browser, all of mails land in spam.
Hi!,
Can you please try adding headers to the PHP code as shown in this tutorial?
http://www.velvetblues.com/web-development-blog/avoid-spam-filters-with-php-mail-emails/
I have the same problem_ Did yoiu sort it out? How?
Thanks!
A
Hello
Can you help me ?
I made the changes on templatemo_537_art_factory original, but impossible to make it work!
Hi Joel,
Please change id of the form to “contact-form” at line 387 in index.html.
I just made the change, but it still doesn’t work, when I click send, I have a return home page. In private perhaps?
Did you upload it to your server? Can I test it?
I just made the change, but it still doesn’t work, when I click send, I have a return home page. In private perhaps?
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
Hi Bruce,
It may have been sent to the junk folder.
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?
Hi Federico,
There seems to be something wrong with your
send-email.phpfile. Could you send me that file? clock at learnteachcenter dot com.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.
Hi Wayne,
Could you tell me your purchase transaction ID or the email address you used to purchase the contact form?
Yes, my order reference 738226.
The email that was used is: wayneebartlett@gmail.com
thank you for your quick response.
Hi Wayne,
I couldn’t find a transaction with that order reference or the email address. Could you forward your purchase receipt email to clock at learnteachcenter dot com?
Sorry for the inconvenience!
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?
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?
Hello,
The form is not working. Any help ?
Hello,
Can you tell me what error you got?
It’s a popup contact form (https://www.tooplate.com/view/2097-pop) so there isn’t any error. If you give me an email i can send you the URL and access credentials.
Please send to clock at learnteachcenter dot com
Thank you.
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?
Hi Marius,
Thank you for your purchase.
Please take a look at this tutorial: https://www.youtube.com/watch?v=8mEacCYGsRo.
great! thanks for your quick reply. much appreciated!
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 ?
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?
here is my website
Ok, I’ll take a look.
I have sent an email to you with the updated files. Please check and let me know.
What do you meed about clock ?
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.
Hi,
send-email-ajax.js is missing in your js folder. Please check.
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?
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.