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.
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)
Video
Part 1 – Create an HTML Form with Bootstrap style (subtitle on the way)
Part 2 – Add cover background, set up an AJAX request