Formidable Pro – JQuery Tour Demo

This is an example of implementing the Bootstrap JQuery Tour script into a Formidable Pro form. Demo available after documentation.

Build your form as you always would and then do the following: Go to the “Customize HTML” section of your form. In the “Before Fields” subsection we add the following (just to add some visual improvements to the tour) before anything else:

<style>
.btn.btn-default {
    border-color: #ffffff !important;
}

.tour-step-background {
    background: #ffffff !important;
}
</style>

Next we wrap each of our fields in the div tags that the jquery script will point to like so:

<div id="step1">
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
    <label for="field_[key]" class="frm_primary_label">[field_name]
        <span class="frm_required">[required_label]</span>
    </label>
    [input]
    [if description]<div class="frm_description">[description]</div>[/if description]
    [if error]<div class="frm_error">[error]</div>[/if error]
</div>
</div>

And our next field…

<div id="step2">
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
    <label for="field_[key]" class="frm_primary_label">[field_name]
        <span class="frm_required">[required_label]</span>
    </label>
    [input]
    [if description]<div class="frm_description">[description]</div>[/if description]
    [if error]<div class="frm_error">[error]</div>[/if error]
</div>
</div>

And so on…

Note that we are really only adding opening div tags (with a defined ID) and a closing div tag:

<div id="name-here">
....Original field styling here....
</div>

Finally in the “After Fields” subsection we add the following:

<script src="https://techmavenconsulting.com/wp-content/themes/nullcoreII/tour/js/bootstrap-tour-standalone.min.js"></script>
<script>
jQuery(document).ready(function(){
 
    var tour = new Tour({
        storage : false,
  template: "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><div class='popover-navigation'><button class='btn btn-default' data-role='prev'>« Prev</button><span data-role='separator'>|</span><button class='btn btn-default' data-role='next'>Next »</button><button class='btn btn-default end' data-role='end'>End tour</button></div></div>",
  backdrop: true,
  backdropPadding: 10,
    });
 
   tour.addSteps([
       {
        element: "#step1",
        placement: "top",
        title: "Step 1",
        content: "This tour will guide you through some of the features we'd like to point out."
      },
      {
        element: "#step2",
        placement: "top",
        title: "Step 2",
        content: "Here are the sections of this page, easily laid out."
      },
      {
        element: "#step3",
        placement: "top",
        backdrop: true,
        title: "Step 3",
        content: "This is a section that you can read. It has valuable information."
      },
      {
        element: "#step4",
        placement: "top",
        backdrop: true,
        title: "Step 4",
        content: "This is a section that you can read. It has valuable information."
      },
      {
        element: "#step5",
        placement: "top",
        backdrop: true,
        title: "Last Step",
        content: "This is the end of the tour. Please review the preceding documentation for setting up a tour on your site."
      },
 
    ]);

// Initialize the tour
tour.init();

jQuery('#tour').click(function () {
        // Start the tour
        tour.restart();
});
 
}());
</script>

Looking at the code above you should now be able to easily add additional steps. Refer to the Bootstrap documentation to understand how to add additional features or take your users across different pages throughout your site.

Notes:
Line 1: You will need to modify the url of the directory where you will keep your bootstrap script.
Lines 52-55: These lines call the necessary JQuery to start the tour. ‘#tour’ is the name of the link or button ID that will start the tour. We use the “restart()” script as opposed to the “start()” script as it will fire more than once.

Enjoy!

Tour Demo