Tabbed Slider: Formidable Forms
The Tabbed Slider demo is created using the Formidable Forms WordPress plugin and uses a JS powered tab / button slider instead of the standard ‘page break’ sections that come with Formidable Forms Pro as an alternative options for faster page transitions.
Tabbed Slider Tutorial: Formidable Forms
The get started building a tabbed / multi-part form like the demo above you need to build your form. The basic structure of the form is quite straight forward and should be as follows:
- Use ‘Section’ fields to group your form fields together. These will be animated in and out when the user clicks the ‘Next’ and ‘Previous’ buttons.
- At the end of each Section field add an empty HTML field. This will be used to add your ‘Next’ & ‘Previous’ buttons later.
Once you have the form built carry on with the tutorial below.
Adding some code:
Now that your basic form is built you need to go to the form Settings > Customise HTML section and for each ‘Section‘ field replace the default content of that field with the code below:
<div id="frm_field_[id]_container" class="frm_form_field frm_section_heading form-field[error_class] tabcontent">
<h3 class="frm_pos_[label_position][collapse_class]">[field_name]</h3>
[if description]
<div class="frm_description">[description]</div>
[/if description]
[collapse_this]
</div>
Next you will need to add the following script to the ‘After‘ fields section of your form.
<!–– Tab Script ––>
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "grid";
elmnt.style.backgroundColor = color;
}
</script>
Back to the form
Once thats done you can return to your form and create the ‘Previous‘ and ‘Next‘ buttons for the form. To create these buttons you will need to copy & paste the following code into the each HTML field that you added to your form at the end of each ‘Section’ field:
<!–– Next and previous buttons ––>
<a class="tablink" id="defaultOpen" onclick="openPage('frm_field_71_container', this, '#eaeaea')">Previous</a>
<a class="tablink" onclick="openPage('frm_field_87_container', this, '#eaeaea')" id="defaultOpen">Next</a>
For each ‘button’ you will need to amend the field ID to match the relevant page sections.
For example in the code above frm_field_87_container is the field ID of the NEXT section that i wish to display when the user clicks on the ‘Next‘ button. Similarly frm_field_71_container is the field ID of the PREVIOUS section that i wish to display.
Once you have the HTML buttons created and the script in place you’ll also need to add some CSS:
/* Align Submit Button */
.with_frm_style.frm_center_submit .frm_submit {
width: auto;
margin: auto;
display: block;
margin-top: -95px;
z-index: 10;
}
/* Style tab links */
.tablink {
background-color: #f2f2f2;
color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 120px;
margin: 30px 10px 0 0;
text-align: center;
font-weight: 800;
}
.tablink:hover {
background-color: #eaeaea;
}
/* Style the tab content */
.tabcontent {
color: inherit;
display: none;
padding: 50px 20px 10px 20px;
background-color: inherit;
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes bounceInLeft {
0%,
60%,
75%,
90%,
100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInLeft {
0%,
60%,
75%,
90%,
100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}The CSS above can be added to your theme, the Formidable Styles > Custom CSS section or directly to the page that contains your form.
You may need to adjust the CSS above as required for your theme / website styling.
Tabbed Slider: Summary
There you have it, you should have a fully working Tabbed Slider form in place which you can toggle through using the ‘Next’ / ‘Previous’ buttons.
If you liked this tutorial, visit our blog for more ways to improve your websites and workflow.
