1 Star2 Stars3 Stars4 Stars5 Stars (9 votes, average: 5.00 out of 5)

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.

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 11th, 2017 by Maximus Mccullough

Contact Form with AJAX jQuery Bootstrap PHP and MySql

Pages: 1 2 Next

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

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