Multi-Step-Form - PHP Multi Step Multipurpose Ajax Form


Item Support

Thank you for purchasing the Template. If you have any questions that are beyond the scope of this help file, please feel free to email us with mention Purchase Code ( Where Is My Purchase Code?) via my user page contact form here. You can also Ping Us through Item Support Tab (better and fast). Thanks so much!


Multi-Step-Form is a Full Responsive Multi Step PHP Working Multipurpose Ajax Form with Required field jQuery validation built on PHP, HTML5/CSS3, jQuery and Ajax. Code written in a simple way by which you can easily integrated at your site.

Multi-Step-Form Responsive PHP Working Multi Step Ajax Form can be used for your organization, company, business. So that your visitors, customers, clients, agents, members can use this form to get Quote and/or let you know their service concern through the form. Using this Plugin you can manage Multi Step form. We have done all setup PHP, jQuery and Ajax, so no page reload will occur. Get the IP of the sender inside the email body and this form has Anti Spam (simple Math Captcha) human check.

Multi-Step-Form is a responsive, clean, well documented Ajax Form. It can be simply integrated at your site with the documentation help. All the codes are clean, well commented and well organized with proper help documentation. It looks great with all types of devices. Try out the demo.

Features


  • PHP, jQuery, Ajax Form
  • AJAX enabled (no page reloads)
  • PHP Working Ajax Form with Required field jQuery validation
  • SMTP option available
  • Google Auto Location Search for Address Field (Google Api will need)
  • Get the IP of the sender inside the e-mail body
  • File attachment features included
  • Anti Spam (simple Math Captcha) human check
  • Easy Setup for sending email to recipient. 100% working script.
  • W3C Valid HTML Code
  • HTML5 & CSS3
  • 100% Responsive & Mobile-Friendly Layout
  • Bootstrap Framework
  • Font Awesome icons
  • Browser Compatibility
  • Fully Customizable
  • Easy integration into your current HTML/PHP site
  • Clean and well commented Code
  • Easily customizable
  • Well Documentation ( proper help instructions for setup )
  • Dedicated Support
  • and Much More!

Installation


After extract the main zip file, you'll see these folders and files:

  • multi-step-form >> Main theme folder
    • css >> css file folder
    • fonts >> icon fonts folder
    • js >> javascript files folder
    • images >> image files folder
    • uploads >> temporaryly upload attachment
    • phpmailer >> The classic email sending library for PHP
    • mgsc-email-template >> email template HTML
  • documentation >> help file folder

HTML FILES INCLUDED :

  • HTML FILES INCLUDED :
    • index.html >> Style 1
    • multi-step-form-2.html >> Style 2
    • multi-step-form-3.html >> Style 3

PHP FILE INCLUDED :

  • quote-process.php >> Process Form for sending email
  • mgs-functions.php >> Common function for all Form

CSS Structure


css-structure

Javascript


js-file

Settings


Font-awesome Icon

To change icon & it's size just change icon class name like fa-phone, fa-envelope, fa-home classes (see examples below). Find more on fontawesome & fontawesome examples

icon-fa

How to edit Service box

edit Service Box

How to edit text

  1. Go to template folder & open the file with your HTML/PHP editor.
  2. Find the text you need.(You can use the search tool CTRL+F)
  3. Edit text in HTML/PHP editor. Save the file and open it with your Browser to see the changes.

How to edit intro text

edit intro text

How to edit Form

form-settings

How to edit Form - more explanation

HTML File
Form Fields

At Final Steps writing inputed data

writing-data-html
JS File
Form Field autocomplete off
autocomplete off
Form next/back button active/hide on mandatory field fillup
next-back button active-hide 1
Form next/back button active/hide on mandatory field keypress/fillup
next-back button active-hide 2
Form next/back button active/hide on terms & condition agree
next-back button active-hide 3
All form data are sending to quote-process.php through Ajax
form data are sending to php
Form success/error message print
alert-error-message success-error message print
Step 1
Next/Back button functionality
next-back-button
Step 2
form validation check
Step 3
At step 3 form validation check
form validation check form validation check2
At step 4 before going to step 5/final step writing all inputed data
final step writing all inputed data
PHP File: Processing form when all validatioin has done and form submitted successfully
Form process in PHP
Process form

Go to template folder & open mgs-functions.php file with your HTML/PHP editor and change according to you will find (Change here). Please check the following screenshot image.

phpmailer

Some Explanatio of the above screenshot

Sending Email from Local Web Server using PHPMailer

phpmailer

From email address and name

email address and name

How to set up form recipient email and name

recipient email and name

Contact Process - SMTP setup

Tell PHPMailer to use SMTP

use SMTP

Enable SMTP debugging

SMTP debugging

HTML-friendly debug output

html-friendly

Set the hostname of the mail server

hostname

Set the SMTP port number

SMTP port

Set the SMTP authentication

authentication

Additional Settings

Add CC and BCC

CC and BCC

HTML or Plain text email

HTML or Plain text

Set email Subject and email body

Go to template folder & open contact-process.php/YOUR-FORM-PROCESS-FILE.php file with your HTML/PHP editor and change Subject as you need. Please check the following screenshot image.

Email subject

email subject

Prepare email body

email body

File size restriction

file-size

Change email body Content

Go to mgsc-email-template folder & open mgsc-email-template....php file with your HTML/PHP editor and change as you need.

How to use email Template/Plain email

Open your form processing php file and set as described in the following screenshots. You will get email template html in mgsc-email-template directory

email body
Confirmation email php Customization

email settings php file => mgs-functions.php

Set $mgssendconfirmation = true; if want to send Confirmation email to sender

email-send-confirmation-settings

Confirmation email php file => mgs-send-confirmation.php

email-send-confirmation
email copy to Sender

usercopy settings php file => mgs-functions.php

Set $usercopy = (isset($_POST["usercopy"])) ? filter_var($_POST['usercopy'], FILTER_SANITIZE_NUMBER_INT) : 1; if want to send Usercopy email to Sender

make it 1 if want to force send Usercopy email to Sender.

usercopy-email-send-settings

Otherwise you can put a checkbox in your form for sender checked if they want a usercopy.


<input name="usercopy" id="usercopy" type="checkbox" value="1"><label for="usercopy">Send a copy to My email</label>				
				
checkbox-for-sender-usercopy
How to add Different Language Calendar

You have to add a language file for your specific langauage Calendar. In root js=>locales directory you will find around 82 differnet calendar language files.

calendar-lang-file calendar-lang-file
Remove Math Captcha

Before Submitting the form (Last step) jQuery will check the math captcha has solved correctly.
For removing math captcha you have to remove the field code from html file and also have to remove code from js file.

Remove field

In js file you will see a comment around line 10:

Remove all js code from there around line 10 - 26:

math-captch-1

And also you have to replace line 57 - 69 with the following code: event.preventDefault(); submitForm();

math-captch-1
Remove a form field

Before going to next step jQuery validation will check all required field has inputted properly.
For removing field for example Select Service (reqsevice) you have to remove the field code from html file and also have to remove from js and php files.

If you search reqsevice in js file you will see it in nextStep2 and nextStep5, please remove those from there and also you have to remove from php file.

Remove all js code for reqsevice:

Remove field math-captch-1

Remove all php code for reqsevice from PHP file:

Remove field math-captch-1
Add a form field

Before going to next step jQuery validation will check all required field has inputted properly.
For adding field for example Select Service (reqsevice) you have to add the field code in html file and also have to add code in js and php files.

for Removing field we have removed code from js and php file. So, for adding field now we should to reverse mean need to add those code

Please check above Remove a form field section to get an idea

Theme Setup

Theme 1

Theme 2

Theme 3

Google Api Setup

Go to bottom of a html file and put your YOUR_API_KEY as you can see in the image

address-auto-search-settings

How to Get a key for Google Places API Web Service

Go to the Get a key for Google Places API Web Service page and flow the instraction

Credits