Formidable Forms – Tabbed Slider

This demo was 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 Pro as an alternative options for faster page transitions.

Demo - Tabbed Slider

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.

Still have questions?

Still have questions or not sure where to start? Use our quick contact to ask us a question.

Start Planning

If you’re ready to get started click here to complete our Project Planner.

You may also like…

FormidableTutorials
26 Mar 2019

Formidable Forms: File Upload Folder

Formidable Forms: Changing the File Upload Folder The Problem: You may want to change the folder that files will be…
FormidableTutorials
26 Mar 2019

Formidable Forms: Create an Invoicing system

Formidable Forms: Create an Invoicing system Here’s a guide on how to use Formidable Pro to create an invoicing system…
FormidableTutorials
26 Mar 2019

Share a form entry between users

Formidable Forms: Create a shared entry & view The Problem In some cases you may need to build a form…