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.

Demo - Tabbed Slider

Section 1: Your Details

Tabbed Slider Tutorial: Formidable Forms

The Code:

<!–– 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>

<!–– Section HTML ––>
<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>

The ‘Next and previous buttons’ html should be placed in an html element at the bottom of each ‘Section’ field of your form. For each ‘button’ you will need to amend the field ID to match your page sections. E.g frm_field_71_container and frm_field_87_container in the example above will need to match your page sections.

The ‘Section HTML’ should replace the the content in your ‘Section’ field in the Customise HTML 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>

<!–– Click Tab 1 by Default Script ––>

<script>
$(document).ready(function () {
document.getElementById("defaultOpen").click();
});
</script>

Place the tab script above in the Customise HTML > Before Fields section of your form.

/* 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. Adjust 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.

Let's Get Started

If you’re ready to get started with your next project click on the button below to try the Project Planner

TRY THE PROJECT PLANNER

You may also like…

Staff TimesheetDemosFormidableTutorials
14 Jul 2018

Staff Timesheet: Formidable Forms

This article details how to create a basic staff timesheet using Formidable Forms, ideal for home or remote workers or…
DemosFormidable
25 Jun 2018

Formidable Forms – Radio & Checkbox Demos

Radio Button & Checkbox Styles These styles have been created using JS, CSS and Formidable Forms. Read the full tutorial…
DemosFormidableTutorials
25 Jun 2018

Formidable Forms – CSS Isolation Demo

This demo was created using Formidable Forms and CSS only hover styles to create an isolation style hover effect. This…