Contact Form with AJAX jQuery Bootstrap PHP and MySql

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.

Scripts for this project located here.

Contact Form with AJAX jQuery Bootstrap PHP and MySql was last modified: June 16th, 2022 by Maximus Mccullough

Summary
Contact Form with AJAX jQuery Bootstrap PHP and MySql
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
Publisher
A1WEBSITEPRO LLC
Logo
Contact Form with AJAX jQuery Bootstrap PHP and MySql

Pages: 1 2 Next

6 Comments

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.