AJAX Contact Form: Sending Emails Without Refreshing Page (Source Code)

In this video tutorial, we will make an AJAX contact form for simple use.

This form has three fields: Name, Email and Message. It lets others send you an email through a web platform without refreshing the webpage using AJAX (Asynchronous JavaScript And XML).

What are used: HTML, CSS, AJAX, PHP. Workspace: Cloud9. All links to resources used in this article are provided below.

Because of the loud noise from the keyboard, I need to mute the voice in some parts, that’s why it might sound sometimes not nature. Sorry about that.

1. What includes in this tutorials

• Setup a workspace in Cloud9 for the project (Part 1)
• Create a Bootstrap form with Name, Email and Message fields (Part 1)
• Add a cover fixed background image (Part 2)
• Set up an AJAX request that communicates with a PHP file where the forms will be validated (Part 2 + 3)
• Validate empty fields and email (Part 3)
• Integrate PHPMailer to send email (Part 4)

2. Demo

You can also contact me from here: AJAX contact form demo

3. Resources

Cloud9

Bootstrap download | CDN | CSS

Unsplash free HD background photo

PHPMailer Github project

W3School Email Validator PHP

4. Video

Part 1 – Create an HTML Form with Bootstrap style (subtitle on the way)

Part 2 – Add cover background, set up an AJAX request

Part 3 – Empty fields and email validation

Part 4 – Send email with PHPMailer

5. AJAX Contact Form – Source Code Download

You are free to use and modify these codes to meet your purposes.

Github download ->>

6. Translation Contribution

You can contribute different languages translation and subtitles to these videos by visiting:

For Part 1: Youtube Translate Channel 

For Part 2: Youtube Translate Channel

For Part 3: Youtube Translate Channel

For Part 4: Youtube Translate Channel