Contact Form 7 Multi Step


Item Support

Thank you for purchasing the Template. If you have any questions (after purchase or pre-purchase query) 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 (after purchase or pre-purchase query) through Item Support Tab (better and fast). Thanks so much!

need-item-support


 

 

WordPress Contact Form 7 Multi Step Addon. Split Long Form into Multi Step. Contact Form 7 Multi Step Add-ons is Extremely easy Configurable. Contact Form 7 Multi Step Add-ons Split your long form into step by step UI.

Installation


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

  • mgscformsevenmultistep.zip >> Main Plugin package
  • mgscformsevenmultistep-documentation >> help file folder

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

Installing Plugin via FTP client:
Installing Plugin via WordPress Admin Panel:

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
mgscformsevenmultistep-setttings

 

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 the following image as an example how to use the step Shortcode in your Form:
mgscformsevenmultistep-title

 

How to Change Button Text
Buttons

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 the following image as an example how to use the step Shortcode in your Form:
mgscformsevenmultistep-title

 

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

Buttons

 

(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:

 

(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:

 

(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:

 

(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:

 

How to Setup Theme

We have currently few themes.

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

Theme 1

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

Theme 2

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

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

Theme 3

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

Theme 4

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

Theme 5

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

Theme 6

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

Theme 7

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

Example:


 

CSS Settings (Optional)
form error

Add the following css in your theme style css to hide Form Top error

.help-block.with-errors.mandatory-error.displerrortop {
   display: none;
}

Add the following css in your theme style css to hide Form Bottom error

.help-block.with-errors.mandatory-error.displerrorbot {
   display: none;
}

 

[You can add in your theme style css]

Customize the following css to change the Steps Number (1,2,3,...) Style and add in your theme style css to make effect

.wpcf7-form .mgswpcf7multistepsection .form-layer-step.active .form-layer-step-icon {
	background-color: #1c20e2;
}

Customize the following css to change the Form Button (Next/Back) Style and add in your theme style css to make effect

.wpcf7-form .mgswpcf7multistep-btn-group .btn {   
	font-size:18px;
	padding: 6px 25px;
	border-radius: 3px;
}
.wpcf7-form .mgswpcf7multistep-btn-group .mgswpcf7btn-custom {
	background-color: rgba(3, 8, 223, 0.9);
	border: 1px solid rgba(3, 8, 223, 0.9);
	color: #fff;
}
.wpcf7-form .mgswpcf7multistep-btn-group .mgswpcf7btn-custom::before {
	background-color: #fff;
}
.wpcf7-form .mgswpcf7multistep-btn-group .mgswpcf7btn-custom:hover, .wpcf7-form .mgswpcf7multistep-btn-group .mgswpcf7btn-custom:focus, .wpcf7-form .mgswpcf7multistep-btn-group .mgswpcf7btn-custom:active {
	border-color: #0505f5;
	color: #000;
}

 

Steps Buttons

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

Theme 3

[You can add in your theme style css]

Also you can add the following css in your theme style css to hide the above Steps Buttons (in case of many steps)

.wpcf7-form .mgswpcf7multistepform-layer-steps {
	display: none;
}

 

percentage display

[You can add in your theme style css]

Add the following css in your theme style css to hide the above Percentage

.wpcf7-form .mgswpcf7multistepsection h3.mgswpcf7multistepsection-title em {
    display: none;
}

 

percentage display

[You can add in your theme style css]

Add the following css in your theme style css to hide the above Ready to Start! Button

.wpcf7-form .mgswpcf7multistep-btn-group.mgswpcf7multistep-btn-box-1 .btn.mgswpcf7btn-default.disable {
    display: none;
}

 



 

Contact Form 7 Multi Step example code (Ready for You)
mgscf7-multi-step-form-booking

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: [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

 

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 Theme style and customize Step Title and Button Text

We have currently few themes.

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

Theme 1

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

Theme 2

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

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

Theme 3

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

Theme 4

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

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

Theme 5

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

Theme 6

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

Theme 7


[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']

[submit "Send"]
[wpcf7mgscfsmultistep-endux backbtntext='Back' totalsteps='5']

 

Color Theme


If you need to change the color of the multi step form

mgscf7-multi-step-blue-theme

please contact Us and We will assist you. Please click Here to get support

support

 

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

support

 

Credits