Ninja Team

<p><strong>Easily add multi step forms to Contact Form 7</strong></p>
<p>This is an add-on for Contact Form 7 that allows you to transform your long contact form into a WordPress multi-step form.</p>
<p>Imagine that your form has 20+ fields and appears to be a lengthy list… Don’t discourage your audience with that! Let’s make your form look simpler!</p>
<p>The shorter, the better.</p>
<p><a href="https://demo.ninjateam.org/contact-form-7-multi-step/" rel="nofollow ugc">LIVE DEMO</a> | <a href="https://1.envato.market/Contact-Form-7-Multi-Step" rel="nofollow ugc">GO PRO</a> 🚀</p>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/kMrQUDXcJs8?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p><a href="https://ninjateam.gitbook.io/contact-form-7-multi-step/" rel="nofollow ugc">Documentation</a></p>
<h3>⚡️ FEATURES</h3>
<p><strong>Unlimited Steps</strong><br />
Simply add as many steps or form pages as you want.</p>
<p><strong>Native Interface</strong><br />
Create new steps right inside your Contact Form 7 menu with their built-in tags and options.</p>
<p><strong>Easy to Use</strong><br />
A tab makes a new step, thus very easy to switch and edit the form’s fields.</p>
<p><strong>Custom Step Title</strong><br />
Give your step a specific name to optimize your form with clear types of information.</p>
<p><strong>Full Compatibility</strong><br />
Works seamlessly with Contact Form 7 and all of its extensions.</p>
<p><strong>Use cases:</strong></p>
<ul>
<li>Quote form</li>
<li>Request form</li>
<li>Registration form</li>
<li>Quotation form</li>
<li>Subscription form</li>
<li>Event form</li>
<li>Application form</li>
<li>Reservation form</li>
</ul>
<h3>🔑 HOW DOES MULTI-STEP FORM WORKS?</h3>
<p>This Multi-Step plugin extends the Contact Form 7 functionality. After activating, you can start adding a new tab as a new step to your form. You can also have many multi step forms on the same website.</p>
<p>Check out <a href="https://ninjateam.org/contact-form-7-multi-step-pro-doc/" rel="nofollow ugc">step-by-step setup guide here</a>.</p>
<p>With Multi-Step Pro, form steps can have their own titles, custom <strong>Back</strong> and <strong>Next</strong> buttons, animation effects, and more:</p>
<ul>
<li><strong>Progress bar</strong> (Pro): show numbered steps, various pre-built design options, percentage display</li>
<li><strong>Show input</strong> (Pro): add this new tag to help display input data in the previous fields and steps</li>
<li><strong>Preview button</strong> (Pro): insert a button to allow your visitors to double-check their submitted data before sending the form</li>
<li><strong>Choose step</strong> (Pro): let the audience choose a particular step to complete first</li>
</ul>
<p>Happy Form Building! 🧡</p>
<h3>🎏 COMPATIBILITY</h3>
<p>This CF7 Multi-Step plugin goes well with:</p>
<ul>
<li><a href="https://wordpress.org/plugins/cf7-database" rel="ugc">Database for Contact Form 7</a></li>
<li><a href="https://woo.com/vendor/yaycommerce" rel="nofollow ugc">WooCommerce Extensions</a></li>
</ul>
<h4>💅 Looking for an appointment booking form?</h4>
<p>Start scheduling WordPress appointments with a <a href="https://wordpress.org/plugins/bookster/" rel="ugc">real-time booking form plugin</a> 🌐</p>


Multi Step for Contact Form 7

Works Great

Break your looooooong form into user-friendly steps

Phoeniixx

<p><a href="http://mltistepcheckoutfree.phoeniixxdemo.com/" rel="nofollow ugc">FREE VERSION DEMO LINK</a> | <a href="http://mltistepcheckoutfree.phoeniixxdemo.com/wp-content/uploads/2018/06/Multistep-checkout.pdf" rel="nofollow ugc">FREE VERSION DOCUMENTATION LINK</a></p>
<h4>Overview</h4>
<p>Multistep checkout for woocommerce can be used to convert your checkout page into multisteps.</p>
<h4>Free Features:</h4>
<ul>
<li>Editable all the labels and buttons</li>
<li>Combine Billing and shipping form in a Single tab.</li>
<li>Combine order review and payment form in a single tab.</li>
<li>Styling options are available.</li>
<li>Convert your checkout page into five steps – Login, Billing, Shipping, Review Order, and Payments</li>
</ul>
<p><a href="http://mltistepcheckoutfree.phoeniixxdemo.com/" rel="nofollow ugc">FREE VERSION DEMO LINK</a> | <a href="http://mltistepcheckoutfree.phoeniixxdemo.com/wp-content/uploads/2018/06/Multistep-checkout.pdf" rel="nofollow ugc">FREE VERSION DOCUMENTATION LINK</a></p>
<p><strong>Take a look at how to set up Multistep Checkout in Woocommerce</strong><br />
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/9VGQOzypEqk?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h4>Premium Features:</h4>
<p><a href="http://multistepcheckout.phoeniixxdemo.com/checkout/" rel="nofollow ugc">PREMIUM VERSION LIVE DEMO</a> | <a href="https://www.phoeniixx.com/product/multistep-checkout-for-woocommerce/" rel="nofollow ugc">PREMIUM VERSION LINK</a> | <a href="https://www.phoeniixx.com/wp-content/uploads/2017/02/Multistep-Checkout.pdf" rel="nofollow ugc">DOCUMENTATION LINK</a></p>
<h4>Global Settings</h4>
<ul>
<li> Option to enable or disable Checkout plugin. </li>
<li> Option to select the checkout style type.</li>
<li> Option to set the tab alignment in the Centre, Left, or in Right.</li>
<li> Option to change the label for Login, Billing, Shipping, Order info,and Payment.</li>
<li><strong>New:</strong> Option to combine the Billing and Shipping details.</li>
</ul>
<h4>Style 1</h4>
<ul>
<li> Option to set the text size. </li>
<li> Option to select the font weight- Normal, Bold, Bolder and Lighter.</li>
<li> Option to set the text color.</li>
<li> Option to choose the text transform – Uppercase and Lowercase.</li>
<li> Option to set the text active color.</li>
<li> Option to set the icon background color.</li>
<li> Option to set the icon active background color.</li>
<li> Option to set the icon border color.</li>
<li> Option to set the icon border active color.</li>
<li> Option to set the number color.</li>
<li> Option to set the number active color.</li>
<li> Option to set the padding.</li>
</ul>
<h4>Style 2</h4>
<ul>
<li> Option to set the text size. </li>
<li> Option to select the font weight- Normal, Bold, Bolder and Lighter.</li>
<li> Option to set the text color.</li>
<li> Option to choose the text transform – Uppercase and Lowercase.</li>
<li> Option to set the text active color.</li>
<li> Option to set the border bottom active color.</li>
<li> Option to set the background color.</li>
<li> Option to set the background active color.</li>
<li> Option to set the margin for the tabs.</li>
<li> Option to set the padding.</li>
</ul>
<h4>Style 3</h4>
<ul>
<li> Option to set the text size. </li>
<li> Option to select the font weight- Normal, Bold, Bolder and Lighter.</li>
<li> Option to set the text color.</li>
<li> Option to choose the text transform – Uppercase and Lowercase.</li>
<li> Option to set the text active color.</li>
<li> Option to set the arrow color.</li>
<li> Option to set the background color.</li>
<li> Option to set the background active color.</li>
<li> Option to set the margin for the tabs.</li>
<li> Option to set the padding in left.</li>
<li> Option to set the padding in right.</li>
</ul>
<h4>Style 4</h4>
<ul>
<li> Option to set the text size. </li>
<li> Option to select the font weight- Normal, Bold, Bolder and Lighter.</li>
<li> Option to set the text color.</li>
<li> Option to choose the text transform – Uppercase and Lowercase.</li>
<li> Option to set the text active color.</li>
<li> Option to set the background color.</li>
<li> Option to set the background active color.</li>
<li> Option to set the margin for the tabs.</li>
<li> Option to set the padding .</li>
<li> Option to set the border radius.</li>
<li> Option to set the alignment for text in Centre , Left or in Right.</li>
</ul>
<h4>Style 5</h4>
<ul>
<li> Option to set the text size. </li>
<li> Option to select the font weight- Normal, Bold, Bolder and Lighter.</li>
<li> Option to set the text color.</li>
<li> Option to choose the text transform – Uppercase and Lowercase.</li>
<li> Option to set the text active color.</li>
<li> Option to set the background active color.</li>
<li> Option to set the margin for the tabs.</li>
<li> Option to set the padding .</li>
<li> Option to set the border bottom color.</li>
<li> Option to choose the border bottom style- Solid, Dotted, Dashed, Double, Groove, and Hidden.</li>
<li> Option to set the border bottom width.</li>
<li> Option to set the border radius.</li>
</ul>
<h4>Style 6</h4>
<ul>
<li> Option to set the text size. </li>
<li> Option to select the font weight- Normal, Bold, Bolder and Lighter.</li>
<li> Option to set the text color.</li>
<li> Option to choose the text transform – Uppercase and Lowercase.</li>
<li> Option to set the text active color.</li>
<li> Option to set the icon background color.</li>
<li> Option to set the icon active background color.</li>
<li> Option to set the number color.</li>
<li> Option to set the number active color.</li>
<li> Option to set the padding in left.</li>
<li> Option to set the padding in right.</li>
</ul>
<h4>Style 7</h4>
<ul>
<li> Option to set the text size. </li>
<li> Option to select the font weight- Normal, Bold, Bolder and Lighter.</li>
<li> Option to set the text color.</li>
<li> Option to choose the text transform – Uppercase and Lowercase.</li>
<li> Option to set the text active color.</li>
<li> Option to set the background color.</li>
<li> Option to set the  background active color.</li>
<li> Option to set the number color.</li>
<li> Option to set the number background color.</li>
<li> Option to set the padding in left.</li>
<li> Option to set the padding in right.</li>
</ul>
<h4>Style 8</h4>
<ul>
<li> Option to set the text size. </li>
<li> Option to select the font weight- Normal, Bold, Bolder and Lighter.</li>
<li> Option to set the text color.</li>
<li> Option to choose the text transform – Uppercase and Lowercase.</li>
<li> Option to set the text active color.</li>
<li> Option to set the background color.</li>
<li> Option to set the background active color.</li>
<li> Option to set the padding .</li>
<li> Option to set the margins.</li>
</ul>
<h4>Style 9</h4>
<ul>
<li> Option to set the text size. </li>
<li> Option to select the font weight- Normal, Bold, Bolder and Lighter.</li>
<li> Option to set the text color.</li>
<li> Option to choose the text transform – Uppercase and Lowercase.</li>
<li> Option to set the text active color.</li>
<li> Option to set the background color.</li>
<li> Option to set the background active color.</li>
<li> Option to set the padding.</li>
<li> Option to set the margins.</li>
</ul>
<h4>Style 10</h4>
<ul>
<li> Option to set the text size. </li>
<li> Option to select the font weight- Normal, Bold, Bolder and Lighter.</li>
<li> Option to set the text color.</li>
<li> Option to choose the text transform – Uppercase and Lowercase.</li>
<li> Option to set the text active color.</li>
<li> Option to set the background active color.</li>
<li> Option to set the number color.</li>
<li> Option to set the number active color.</li>
<li> Option to set the number background color.</li>
<li> Option to set the number background active color.</li>
<li> Option to set the border size.</li>
<li> Option to set the border style- Solid, Dotted, Dashed, Double, Groove, and Hidden.</li>
<li> Option to set the border color.</li>
<li> Option to set the padding.</li>
<li> Option to set the margins.</li>
</ul>
<h4>Style 11</h4>
<ul>
<li> Option to set the text size. </li>
<li> Option to select the font weight- Normal, Bold, Bolder and Lighter.</li>
<li> Option to set the text color.</li>
<li> Option to choose the text transform – Uppercase and Lowercase.</li>
<li> Option to set the text active color.</li>
<li> Option to set the background active color.</li>
<li> Option to set the background hover color.</li>
<li> Option to set the background color.</li>
<li> Option to set the border size.</li>
<li> Option to set the border style- Solid, Dotted, Dashed, Double, Groove, and Hidden.</li>
<li> Option to set the border color.</li>
<li> Option to set the padding.</li>
</ul>
<h4>Style 12</h4>
<ul>
<li> Option to set the text size. </li>
<li> Option to select the font weight- Normal, Bold, Bolder and Lighter.</li>
<li> Option to set the text color.</li>
<li> Option to choose the text transform – Uppercase and Lowercase.</li>
<li> Option to set the background color.</li>
<li> Option to set the padding.</li>
<li> Option to set the margins.</li>
</ul>
<p><a href="http://multistepcheckout.phoeniixxdemo.com/checkout/" rel="nofollow ugc">PREMIUM VERSION LIVE DEMO</a> | <a href="https://www.phoeniixx.com/product/multistep-checkout-for-woocommerce/" rel="nofollow ugc">PREMIUM VERSION LINK</a> | <a href="https://www.phoeniixx.com/wp-content/uploads/2017/02/Multistep-Checkout.pdf" rel="nofollow ugc">DOCUMENTATION LINK</a></p>
<h4>Premium WordPress Themes</h4>
<p>Here is our premium wordpress theme</p>
<ul>
<li><a href="https://www.phoeniixx.com/product/foody/" rel="nofollow ugc">Foody Themes</a></li>
<li><a href="https://www.phoeniixx.com/product/jstore-theme/" rel="nofollow ugc">Jstore Themes</a></li>
<li><a href="https://www.phoeniixx.com/product/eezy-store/" rel="nofollow ugc">Eezy Themes</a></li>
<li><a href="https://www.phoeniixx.com/product/craze/" rel="nofollow ugc">Craze Themes</a></li>
<li><a href="https://www.phoeniixx.com/product/seofication/" rel="nofollow ugc">Seofication Themes</a></li>
<li><a href="https://www.phoeniixx.com/product/news-prime/" rel="nofollow ugc">News Prime Themes</a></li>
</ul>
<blockquote>
<h4>Our Website</h4>
<ul>
<li>  <a href="https://www.phoeniixx.com/" rel="nofollow ugc">https://www.phoeniixx.com/</a></li>
</ul>
<h4>Support Email</h4>
<ul>
<li>  <a href="mailto:support@phoeniixx.com" rel="nofollow ugc">support@phoeniixx.com</a></li>
</ul>
<h4>NOTE</h4>
<ul>
<li>  Our plugin support the Multisite Network.
</li>
</ul>
</blockquote>


Multistep Checkout for  Woocommerce

It works good. however, select2.js in checkout page doesn't work in checkout page with select input element when user is doing checkout without log in. If you are able to fix this, I would give you 5 stars. Anyway, great job !

good but select2 doesn't work in checkout

Multistep checkout for woocommerce can be used to convert your checkout page into multisteps.

Multi Step for Contact Form 7 vs Multistep Checkout for Woocommerce