Contact Form 7 Multi Step

Installation

Each WordPress plugin can be installed in two ways: via ftp client or through the admin panel:

Installing Plugin via FTP client:

• unzip the 'mgscformsevenmultistep.zip' package (the zip package is inside the folder you have downloaded from CodeCanyon),
• connect to your server,
• navigate to the folder where your WordPress is installed,
• upload the 'mgscformsevenmultistep' folder into the 'wp-content/plugins' directory (the path of mgscformsevenmultistep will look like this: wp-content/plugins/mgscformsevenmultistep),
• open the wp-admin panel (where you have installed the WordPress e.g www.your_domain.com/wp-admin/),
• login to your wp-admin panel then from the Left Sidebar choose 'Plugins',
• find the 'Contact Form 7 Multi Step' and click the 'Activate' button next to it.

Installing Plugin via WordPress Admin Panel:

• open the wp-admin panel (where you have installed the WordPress e.g www.your_domain.com/wp-admin/),
• login to your wp-admin panel then from the Left Sidebar choose 'Plugins',
• under 'Plugins' choose 'Add New' then 'Upload',
• you will be redirected to upload options, click the 'choose file' button and navigate to the unzipped package that you have download from CodeCanyon site, inside that package is a file called 'mgscformsevenmultistep.zip' choose it and click 'open',
• once the plugin uploading done it will be automatically installed,
• Then you will be able to activate the plugin, to do this click the Activate link.

Settings

Contact Form 7 Multi Step Basic Settings Option

At the begining of each step You have to add shortcode as like the Following [at the very begining of each step]

[wpcf7mgscfsmultistep-range-ux cstep='1' totalsteps='4']

Here cstep is the current step and totalsteps is the Total Steps [Do not forget to change cstep & totalsteps value]

At the end of the form mean after Send/Submit button You have to add the following Shortcode

[wpcf7mgscfsmultistep-endux totalsteps='4']

Add the above shortcode at the end of the form. Do not forget to put the exact Total Steps Number totalsteps

 

You can use the following shortcode for required step [Do not forget to change totalsteps value]

Step 1 [Paste at the very begining of step 1]

Step 2 [Paste at the very begining of step 2]

Step 3 [Paste at the very begining of step 3]

Step 4 [Paste at the very begining of step 4]

Step 5 [Paste at the very begining of step 5]

Step 6 [Paste at the very begining of step 6]

Step 7 [Paste at the very begining of step 7]

Step 8 [Paste at the very begining of step 8]

Step 9 [Paste at the very begining of step 9]

Step 10 [Paste at the very begining of step 10]

---

 

Check the following image as an example how to use the step Shortcode in your Form

 

How to Display Step Title

You have to Add the Steps Title with the following code in each step Shortcode

Change Steps Title (Step1|Step2|Step3......) according to your choice

stepstitle='Step1|Step2|Step3|Step4|Step5|Step6|Step7|Step8|Step9|Step10'

Example:

 

Check Video Presentation on Youtube

Check the following image as an example how to use the step Shortcode in your Form:

 

How to Change Button Text

You have to Add the Button Text with the following code in each step Shortcode

nearlytheretext='You Are Nearly There'

areyoureadytext='Are You ready!'

nextbtntext='Next'

backbtntext='Back'

Example:

After the Form Send/Submit button:

 

1. cstep='1' there is no nextbtntext and backbtntext only nearlytheretext
2. cstep='2' there is no backbtntext instead areyoureadytext
3. cstep='3' to last cstep='..' can be both nextbtntext & backbtntext (if you need to change)
4. after the Send/Submit button in the last shortcode there is no nextbtntext

 

Check Video Presentation on Youtube

Check the following image as an example how to use the step Shortcode in your Form:

 

Translation Redy: language file included. So, if you can change any text into your local language using any WordPress Multilingual Plugin as like WPML/Loco Translate/qTranslate or any other you like.

 

More Explanation

 

(1). How to change Form Tag (in just above screenshots: You Are Nearly There) Text

You have to Add the following code only in the cstep='1' Shortcode

nearlytheretext='You Are Nearly There'

Example:

 

Check Video Presentation on Youtube

 

(2). How to change Are You ready! (in just above screenshots: Are You ready!) Text

You have to Add the following code only in the cstep='2' Shortcode

areyoureadytext='Are You ready!'

Example:

 

Check Video Presentation on Youtube

 

(3). How to change Next Button (in just above screenshots: Next Button) Text

You have to Add the following code in the cstep='2' to cstep='n' (where n=last step no.) Shortcode

nextbtntext='Next'

Example:

 

Check Video Presentation on Youtube

 

(4). How to change Back Button (in just above screenshots: Back Button) Text

You have to Add the following code in the cstep='3' to cstep='n' (where n=last step no.) Shortcode

backbtntext='Back'

Example:

Also You have to Add After the Form Send/Submit button Shortcode

Example:

 

Check Video Presentation on Youtube

 

How to Dsiplay Form Input (Confirmation & Submit)

You have to Add the Confirmation Shortcode just above the Send/Submit button in the last step.

The following Confirmation Shortcode is an example for you.

in the Confirmation Shortcode labelnfname property you have to provide all of your form Field Label & Field name.

The following screenshot code is an example for you. Please check how to manage the Confirmation shortcode.

Separator (::) between Field Label & Field Name.

Separator (|) between each Field Property (Field Label::Field Name).

---

 

Example Confirmation Shortcode:

[wpcf7mgscfsmultistep-confirmation labelnfname='Select OS::opsys|Select Service::services|Select Features::features|Your Website::web-url|Project Budget::probudget|Project Priority::priority|Estimated Launch Date::launchdate|File Upload::fileupload|Your Name::your-name|Your Address::your-address|Your Email::your-email|Your Phone::your-tel|Prefered Contact Method::preferedcontact|Requirement Details::requirementdetails|Additional Info::additionalinfo']

---

 

How to Setup Theme

We have currently 7 Theme Styles (Design).

Theme 1 default theme and you do not need to do anything for this theme.

Theme 2 - for choosing this theme you have to set:

Theme 3 - for choosing this theme you have to set:

You can choose this Theme 3 if the steps are many more

Theme 4 - for choosing this theme you have to set:

Theme 5 - for choosing this theme you have to set:

Theme 6 - for choosing this theme you have to set:

Theme 7 - for choosing this theme you have to set:

You have to Setup Theme by adding the following code in each step Shortcode (if you like to change theme).

Example:

---

Check Video Presentation on Youtube

Color Theme

How to Setup Color Theme

We have currently 16 Color Themes

You have to Setup Color Theme by adding the following code in each step Shortcode (if you like to change Color theme)

mgswpcfscolortheme='bluecolortheme'

mgswpcfscolortheme='greencolortheme'

mgswpcfscolortheme='redcolortheme'

mgswpcfscolortheme='orangecolortheme'

mgswpcfscolortheme='yellowcolortheme'

mgswpcfscolortheme='purplecolortheme'

mgswpcfscolortheme='coffeecolortheme'

mgswpcfscolortheme='cyancolortheme'

mgswpcfscolortheme='marooncolortheme'

mgswpcfscolortheme='blackcolortheme'

mgswpcfscolortheme='magentacolortheme'

Example:

---

Check Video Presentation on Youtube

Auto scroll to Step Buttons Settings

By default Auto scroll will be enable but if you don't like Auto scroll to top of the Step Buttons

You have to add the following code:

in the last line shortcode:

 

Check Video Presentation on Youtube

---

Validation error display settings

Add the following Shortcode in each Step Shortcode to hide Form Top error

displvaliderror='bottom'

Add the following Shortcode in each Step Shortcode to hide Form Bottom error

displvaliderror='top'

 

Check Video Presentation on Youtube

---

 

You can hide the above Steps Buttons by choosing theme (Theme Settings: Theme Style: 3). Please check Theme Settings.

---

 

Add the following Shortcode in each Step Shortcode to hide the above Percentage

hidepercentage='1'

 

Check Video Presentation on Youtube

---

 

Add the following Shortcode in 2nd Step (cstep=2) Shortcode to hide the above Ready to Start! button

hideareyoureadybtn='1'

 

Check Video Presentation on Youtube

Implementation Through Direct Raedy Code

Contact Form 7 Multi Step example code (Ready for You)

Just Copy any of the following example code and paste into your Contact Form 7 form code area. Now add the form fields with your form required fields and change button text.

Please do not forget to change totalsteps value. In this example code has total 5 steps so we have set totalsteps='5'
you have to change totalsteps value based on your form total steps.

You can use any of the following Contact Form 7 example code
in your Contact Form 7 form code to set Multi Step Form.

And just replace the form field code (example: Your Name (required) [text* your-name])
with your required field tag code and change Button text as you need.

And Done!

Enjoy! the Contact Form 7 Multi Step

Check Video Presentation on Youtube

For Default Step Title Text (Step1|Step2|Step3|Step4|Step5|.......)

[wpcf7mgscfsmultistep-range-ux cstep='1' totalsteps='5']
<label> Your Name (required) </label>[text* your-name]

[wpcf7mgscfsmultistep-range-ux cstep='2' totalsteps='5']
<label> Your Email (required) </label>[email* your-email]

[wpcf7mgscfsmultistep-range-ux cstep='3' totalsteps='5']
<label> Tel (required) </label>[tel* your-tel]

[wpcf7mgscfsmultistep-range-ux cstep='4' totalsteps='5']
<label> Website (required) </label>[url* web-url]

[wpcf7mgscfsmultistep-range-ux cstep='5' totalsteps='5']
<label> Your Message </label>[textarea your-message]
[submit "Send"]
[wpcf7mgscfsmultistep-endux totalsteps='5']

With customize Step Title

You can change step title (Step1|Step2|Step3|Step4|Step5|.......) as you need

[wpcf7mgscfsmultistep-range-ux cstep='1' stepstitle='Step1|Step2|Step3|Step4|Step5' totalsteps='5']
<label> Your Name (required) </label>[text* your-name]

[wpcf7mgscfsmultistep-range-ux cstep='2' stepstitle='Step1|Step2|Step3|Step4|Step5' totalsteps='5']
<label> Your Email (required) </label>[email* your-email]

[wpcf7mgscfsmultistep-range-ux cstep='3' stepstitle='Step1|Step2|Step3|Step4|Step5' totalsteps='5']
<label> Tel (required) </label>[tel* your-tel]

[wpcf7mgscfsmultistep-range-ux cstep='4' stepstitle='Step1|Step2|Step3|Step4|Step5' totalsteps='5']
<label> Website (required) </label>[url* web-url]

[wpcf7mgscfsmultistep-range-ux cstep='5' stepstitle='Step1|Step2|Step3|Step4|Step5' totalsteps='5']
<label> Your Message </label>[textarea your-message]
[submit "Send"]
[wpcf7mgscfsmultistep-endux totalsteps='5']

With customize Step Title and Button Text

You can change step title (Step1|Step2|Step3|Step4|Step5|.......) and button text as you need

[wpcf7mgscfsmultistep-range-ux cstep='1' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Nearly There' totalsteps='5']
<label> Your Name (required) </label>[text* your-name]

[wpcf7mgscfsmultistep-range-ux cstep='2' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Step 2 Now!' areyoureadytext='Are You ready!' nextbtntext='Next' totalsteps='5']
<label> Your Email (required) </label>[email* your-email]

[wpcf7mgscfsmultistep-range-ux cstep='3' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Step 3 Now!' nextbtntext='Next' backbtntext='Back' totalsteps='5']
<label> Tel (required) </label>[tel* your-tel]

[wpcf7mgscfsmultistep-range-ux cstep='4' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Step 4 Now!' nextbtntext='Next' backbtntext='Back' totalsteps='5']
<label> Website (required) </label>[url* web-url]

[wpcf7mgscfsmultistep-range-ux cstep='5' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Final Step Now!' nextbtntext='Next' backbtntext='Back' totalsteps='5']
<label> Your Message </label>[textarea your-message]
[submit "Send"]
[wpcf7mgscfsmultistep-endux backbtntext='Back' totalsteps='5']

With customize Step Title and Button Text and also Dsiplay Form Input (Confirmation)

Please check above 'How to Dsiplay Form Input (Confirmation & Submit)' section for more details.

[wpcf7mgscfsmultistep-range-ux cstep='1' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Nearly There' totalsteps='5']
<label> Your Name (required) </label>[text* your-name]

[wpcf7mgscfsmultistep-range-ux cstep='2' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Step 2 Now!' areyoureadytext='Are You ready!' nextbtntext='Next' totalsteps='5']
<label> Your Email (required) </label>[email* your-email]

[wpcf7mgscfsmultistep-range-ux cstep='3' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Step 3 Now!' nextbtntext='Next' backbtntext='Back' totalsteps='5']
<label> Tel (required) </label>[tel* your-tel]

[wpcf7mgscfsmultistep-range-ux cstep='4' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Step 4 Now!' nextbtntext='Next' backbtntext='Back' totalsteps='5']
<label> Website (required) </label>[url* web-url]
<label> Your Message </label>[textarea your-message]

[wpcf7mgscfsmultistep-range-ux cstep='5' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Final Step Now!' nextbtntext='Next' backbtntext='Back' totalsteps='5']

[wpcf7mgscfsmultistep-confirmation labelnfname='Your Name::your-name|Your Email::your-email|Tel::your-tel|Website::web-url|Your Message::your-message']
[submit "Send"]
[wpcf7mgscfsmultistep-endux backbtntext='Back' totalsteps='5']

With Theme style and customize Step Title and Button Text and also Dsiplay Form Input (Confirmation)

We have currently 7 Theme Styles (Design).

Theme 1 default theme and you do not need to do anything for this theme.

Theme 2 - for choosing this theme you have to set:

Theme 3 - for choosing this theme you have to set:

You can choose this Theme 3 if the steps are many more

Theme 4 - for choosing this theme you have to set:

Theme 5 - for choosing this theme you have to set:

Theme 6 - for choosing this theme you have to set:

Theme 7 - for choosing this theme you have to set:

[wpcf7mgscfsmultistep-range-ux cstep='1' mgswpcfstheme='6' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Nearly There' totalsteps='5']
<label> Your Name (required) </label>[text* your-name]

[wpcf7mgscfsmultistep-range-ux cstep='2' mgswpcfstheme='6' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Step 2 Now!' areyoureadytext='Are You ready!' nextbtntext='Next' totalsteps='5']
<label> Your Email (required) </label>[email* your-email]

[wpcf7mgscfsmultistep-range-ux cstep='3' mgswpcfstheme='6' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Step 3 Now!' nextbtntext='Next' backbtntext='Back' totalsteps='5']
<label> Tel (required) </label>[tel* your-tel]

[wpcf7mgscfsmultistep-range-ux cstep='4' mgswpcfstheme='6' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Step 4 Now!' nextbtntext='Next' backbtntext='Back' totalsteps='5']
<label> Website (required) </label>[url* web-url]
<label> Your Message </label>[textarea your-message]

[wpcf7mgscfsmultistep-range-ux cstep='5' mgswpcfstheme='6' stepstitle='Step1|Step2|Step3|Step4|Step5' nearlytheretext='You Are Final Step Now!' nextbtntext='Next' backbtntext='Back' totalsteps='5']

[wpcf7mgscfsmultistep-confirmation labelnfname='Your Name::your-name|Your Email::your-email|Tel::your-tel|Website::web-url|Your Message::your-message']
[submit "Send"]
[wpcf7mgscfsmultistep-endux backbtntext='Back' totalsteps='5']

Check Playlist Videos Presentation on Youtube

Color Theme

How to Setup Color Theme

We have currently 16 Color Themes

You have to Setup Color Theme by adding the following code in each step Shortcode (if you like to change Color theme)

mgswpcfscolortheme='bluecolortheme'

mgswpcfscolortheme='greencolortheme'

mgswpcfscolortheme='redcolortheme'

mgswpcfscolortheme='orangecolortheme'

mgswpcfscolortheme='yellowcolortheme'

mgswpcfscolortheme='purplecolortheme'

mgswpcfscolortheme='coffeecolortheme'

mgswpcfscolortheme='cyancolortheme'

mgswpcfscolortheme='marooncolortheme'

mgswpcfscolortheme='blackcolortheme'

mgswpcfscolortheme='magentacolortheme'

Example:

If you need another color theme

please contact Us and We will give maximum priority. Please click Here to get support

• Take Me Item Page

Demo and Support

Demo

Please click here it will take you codecanyon Item page you will see Live Preview Button.

Otherwise check live preview directly to my server Live Demo.

Support

• Take Me Item Page

Check Video Presentation on Youtube

Credits