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

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

This form has four fields:

Name,
Email,
Message,
Interest (checkbox): won’t be seen in video but you can find code in GitHub repo of this article.

The form 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.

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.

Update!

Hi guys, because the code in this project was quite old (Bootstrap already has v.4 and in these videos I am using v.3), so I updated my code but not yet releasing any video about the changes. Here are things that now different than the code mentioned in this video series:

About the email server, I no longer use Gmail SMTP, but use my custom domain’s email. If you use Gmail and encounter any issues, it probably because Google requires manual approval on using SMTP on third party app. Please check this link for Gmail SMTP config.
Some Bootstrap classes no longer work if you use v.4, for example:
- Bootstrap no longer has “well” class, so I move to use “card” system
- Similarly, the class “col-md-offset” changed into “offset-md-“. See here for Bootstrap class migration
Finally, I add extra fields of checkboxes into the code.

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)