How to Install Simple Contact Form in Pop Design Template

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

This tutorial will show you how to add AJAX & PHP code to send emails using the Simple Contact Form.

Prerequisites

To follow this tutorial, you need:
1. Pop Design template
2. Contact Form

Extract both zip files and follow the steps below.

1. Copy Files

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

2. Contact Form Scripts

1. Open 2097_pop/index.html and contact-form/index.html in a text editor.
2. From contact-form/index.html -> 2097_pop/index.html, copy & paste the code shown in screenshot #1. (The resulting code is shown in screenshot #2)
3. Save and close.

Screenshot #1

4. Open 2097_pop/js/send-email-ajax.js in a text editor.

At line 1, change #contact-form to .contact-form

At line 42, change #result-message to .result-message

5. Open 2097_pop/js/main.js. Add the following code at line 209.

form = $('.contact-form');
form.submit(function (e) {
	e.preventDefault();
	sendEmail();
});

6. Open 2097_pop/send-email.php in a text editor.

For Contact Form with 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.

3. Upload to Your Server and Test

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