Contact Form AJAX And jQueryContact Form AJAX And jQuery
Helpfel Contact Form using Ajax and JqueryContact Form AJAX And jQuery
Helpfel Contact Form using Ajax and JqueryOverview
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.
- Including the css files
- Including the javascript files
- Load list of country flags and phone code
- 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";
Other items by this author
PHP Script Installation Service
Don't worry about the installation of your script! Have your PHP Script installed for you.
|
$39 | Buy now |
Category | Scripts & Code / PHP Scripts / Forms |
First release | 5 November 2018 |
Last update | 5 November 2018 |
Files included | .php, .css, Javascript .js |
Software version | PHP 7.0, PHP 5.3, PHP 5.4, PHP 5.5, PHP 5.6 |
Tags | php, bootstrap, form builder, contact us, message, send, validation, responsive form, form validation, jquery contact form, form manager |