Formidable Forms – Tabbed Slider

This demo was created using the Formidable Forms WordPress plugin and uses a JS powered tab slider instead of the standard ‘page break’ sections that come with Formidable Pro.

Project Planner

Section 1: Your Details

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.