Contact Form AJAX And jQuery

Overview

The Responsive Contact Form Easy to integrated at your website. Can be used for your organization, company, business or Personal use. So that your visitors, customers, clients, agents, members can contact you, let you know their concern through the form.

Features

  • Bootstrap based
  • JQuery form validation
  • AJAX Enabled (no page reloads).
  • No database required
  • FontAwesome Included
  • Easy to integrated at your website
  • Php mail function is included.
  • Easy to set option for Email to make the script function
  • Responsive Design for all devices.
  • Show modal popup after form submit.

Requirements

  • PHP v5.3 or higher.

Instructions

A) Directories

css – files for CSS.
emails – Folder contains php pages class library for PHP that provides a collection of functions to build and send email messages.
fonts – Contains FontAwsome.
help – Help file (HTML)
ihandler – Contains PHP Page contactmail-withclass.php script to send message.
images – Contains images files.
includes – Contains PHP pages included script for header and footer pages.
js – Contains JS files or javascript files.
contact.php – PHP page contact.

B) Installation

Installing the form requires the following steps.

  1. Including the css files
  2. Including the javascript files
  3. Load list of country flags and phone code
  4. Configuring contactmail-withclass.php with any optional parameters.

Below describes these steps in more detail.
In step 1, you will need to include the css files, which is located in the css directory, to include the css files simply specify the following lines of code within your tag:

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" /> <link rel="stylesheet" type="text/css" href="css/intlTelInput.css" /> <link  rel="stylesheet" type="text/css" href="css/style.css" />      <link  rel="stylesheet" type="text/css" href="css/padd-mr.css" /> <link id="vers" rel="stylesheet" type="text/css" href="css/light-version.css" />                

In step 2, you will need to include the jquery’s library files, which is located in the js directory. to include the js files simply specify the following lines of code within your footer page HTML or PHP

 <script type="text/javascript" src="js/intlTelInput.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery/jquery-ui.js"></script> <script type="text/javascript" src=""https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="js/magnific-popup/jquery.magnific-popup.min.js"></script> <script type="text/javascript" src="js/jquery.validate.min.js"></script> <script type="text/javascript" src="js/validator.js"></script>             <script type="text/javascript" src="js/sendmailContact.js"></script>    

In step 3, adding this Script to load list of country flags and phone code within your footer page.

 <script>         var input = document.querySelector("#mtelephone");         window.intlTelInput(input, {            allowDropdown: true,           // autoHideDialCode: false,          // autoPlaceholder: "off",            dropdownContainer: document.body,           // excludeCountries: ["us"],           formatOnDisplay: true,           geoIpLookup: function(callback) {              $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {                var countryCode = (resp && resp.country) ? resp.country : "";                callback(countryCode);              });            },           // hiddenInput: "full_number",           initialCountry: "auto",           // localizedCountries: { 'de': 'Deutschland' },            //nationalMode: true,           // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],           // placeholderNumberType: "MOBILE",           //preferredCountries: ['cn', 'jp'],            separateDialCode: true,           utilsScript: "js/utils.js",         }); </script>     

You can use this as a template and copy and paste it onto your own page, but will have to modify it accordingly with your own site layout.
Finally in step 4, you will need to configure contactmail-withclass.php:
Change those variables on line 20 and 21 with the real e-mail address and password to send the mail information:

 $mail->Username = "[email protected]"; $mail->Password = "your password";      

Related