Written by: Aleš Sýkora

The Author of Toolset.wiki. Big fan of Toolset plugins and WordPress.

I am big fan of WordPress and Toolset plugins. I have done many projects based on WordPress. I also have experience with online marketing, PPC advertising and SEO. I live in Czech Budweis – the town of Budweiser Budvar breverage in the south of the Czech Republic – the heart of Europe.

I love skateboarding, snowboarding, frisbee, fitness, healthy lifestyle, tattoos, mountain biking and other sports. I enjoy having time with friends with good beer and good music.

Multistep form with Toolset Forms and Bootstrap Accordion

Last Update: 10. 11. 2019 , Category:

What if you have really long form. It may be some job application form etc. You definitely don’t need to scary your potential colleague with very long form. You should create some multi-step form. Of course it can be done many ways.

Today we will make a multi-step form i bootstrap accordion module which can look like this with some CSS work.

toolset form

At first we will neeed to set up the accordion. We will make 5-step form. So the accordion will have 5 panels. We also add button to every panel. This button open next section when user click on it. Let’s get a look how the accordion code looks like.

<!--zAccordion start-->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading1">
                        <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
                                        Panel title
                                </a>
                        </h4>
                </div>
                <div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
                        <div class="panel-body">
                                Panel Body
                                <!--Added button for opening next section-->
                                <div class="text-center"><button type="button" class="btn btn-secondary btn-md" data-toggle="collapse"
                                                data-parent="#accordion" data-target="#collapse2">Next</button>
                                </div>
                        </div>
                </div>
        </div>
        <!--Next panel start-->
        <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading2">
                        <h4 class="panel-title">
                                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
                                        Panel Title
                                </a>
                        </h4>
                </div>
                <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
                        <div class="panel-body">Panel Body
                                <!--Added button for opening next section-->
                                <div class="text-center"><button type="button" class="btn btn-secondary btn-md" data-toggle="collapse"
                                                data-parent="#accordion" data-target="#collapse3">Next</button>
                                </div>
                        </div>
                </div>
        </div>
        <!--Next panel start-->
        <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading3">
                        <h4 class="panel-title">
                                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3">
                                        Panel Title
                                </a>
                        </h4>
                </div>
                <div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
                        <div class="panel-body">
                                panel body
                                <div class="text-center"><button type="button" class="btn btn-secondary btn-md" data-toggle="collapse"
                                                data-parent="#accordion" data-target="#collapse4">Next</button>
                                </div>
                        </div>
                </div>
        </div>
        <!--Next panel start-->
        <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading4">
                        <h4 class="panel-title">
                                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
                                        Panel Title
                                </a>
                        </h4>
                </div>
                <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
                        <div class="panel-body">
                                Panel Body
                                <div class="text-center"><button type="button" class="btn btn-secondary btn-md" data-toggle="collapse"
                                                data-parent="#accordion" data-target="#collapse5">Next</button>
                                </div>
                        </div>
                </div>
        </div>
        <!--Next panel start-->
        <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading5">
                        <h4 class="panel-title">
                                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse5" aria-expanded="false" aria-controls="collapse5">
                                        Panel title
                                </a>
                        </h4>
                </div>
                <div id="collapse5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading5">
                        <div class="panel-body">
                                Panel body
                        </div>
                </div>
        </div>
</div>
<!--Accordion end-->

Next step is creating a post form in Toolset forms. You will find the tutorial how to set up the form on Toolset website.

After that you need to put the accordion in to the form and add your form fields inside the panel body sections. And of course, you can use the bootstrap grid inside the accordion panel. So you can make nice 2-3-4… columns form.

Then your panel section may look like this:

<!--Next panel start-->
        <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="heading4">
                        <h4 class="panel-title">
                                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse4">
                                        1. Contact information
                                </a>
                        </h4>
                </div>
                <div id="collapse4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading4">
                        <div class="panel-body">
                            <div class="row">    
                                <div class="col-sm-6">
                                        <div class="form-group">
                                                <label>Name</label>
                                                [cred_field field="name" force_type="field" class="form-control" output="bootstrap"]
                                        </div>
                                </div>
                                <div class="col-sm-6">
                                        <div class="form-group">
                                                <label>Name</label>[cred_field field="name" force_type="field" class="form-control" output="bootstrap"]
                                        </div>
                                </div>
                            </div>
                                <div class="text-center"><button type="button" class="btn btn-secondary btn-md" data-toggle="collapse"
                                                data-parent="#accordion" data-target="#collapse5">Next</button>
                                </div>
                        </div>
                </div>
        </div>

Of course we need the send button. You should add this button after the accordion.

[cred_field field="form_submit" output="bootstrap" value="Odeslat" class="btn btn-primary btn-md"]

Support Us via our Affiliate link!

Toolset logo WordPress

What to do next?

Need a Toolset License?

Buy via affiliate link!

Looking for a tutorial?


Help other users – Add your snippet!


Join the discussion!