In this tutorial we create a contact form that enters contact information into a database. It will then send an email to you from your website. We do this with AJAX, jQuery, Bootstrap, PHP and MySql.
https://youtu.be/y4M_u–t5YA
AJAX jQuery Functions Used
- ready() function to check the readiness of the DOM {Document Object Model}
- click() function to check and see if a button is clicked.
- val() function to get the values from in input fields.
- var to set our variables in AJAX
- $.ajax() to make the ajax call
- html() to target a display div to display results.
Bootstrap Classes Used
- class of container
- class of form-group
- class of form-control
- class of btn btn-default
Input Types Used
- email to validate email address.
- text for normal text and number entry.
- tel for mobile devices so they bring up a phone dialer.
- textarea to have columns and rows to write in.
PHP Functions Used
- mysqli_real_escape_string() to sanitize post variables.
- FILTER_SANITIZE_EMAIL to sanitize emails.
- FILTER_SANITIZE_STRING to sanitize strings.
- mysqli_query() to query mysql
- close() to close a connection to a database
- mail() to send email from server in PHP.
Contact Form with AJAX jQuery Bootstrap PHP and MySql was last modified: June 16th, 2022 by
Summary
Article Name
Contact Form with AJAX jQuery Bootstrap PHP and MySql
Description
In this tutorial we create a contact form that enters contact information into a database. It will then send an email to you from your website. We do this with AJAX, jQuery, Bootstrap, PHP and MySql.
Author
Maximus McCullough
Publisher
A1WEBSITEPRO LLC
Logo
6 Comments
The best walk-through and explanation of anything I have seen on this topic. THANKYOU!!!
Hi Paul, glad to help. Thanks for the comment. 🙂
Hi,
Do you have a complete download of all the files ?
I can only find 2 links to 2 of the files and then its copy and paste for another 2 files !!
Have you done this on purpose if so WHY?
Never seen that before if you are going to give us the project files WHY not a single file to download?
Regards Costas
I am sorry you are having trouble. Here is a link to the scripts so you can download them.
A big thank you for this very clear tutorial and code! I’m a beginner with PHP and MySQL. I’ve read a lot about it and tried many things to include a contact form on my webpage using Ajax, JS, PHP and MySQL altogether. Sometimes it worked fine but the code was always horribly complicated and I didn’t understand it (which was not the point for a learner). Your code is very neat and easy to follow. I found your page after hours of struggling. Just when I was about to have a nervous breakdown, you made it worked in an intelligible way. Good job!
Thank you Emilie, glad to help 🙂