Hiding irrelevant steps on multi page form

Feature Requests
,
1

I am creating a multi page form with conditional logic, the logic works fine as the user cannot get to certain pages if their answers did not meet the requirements but all of the steps are shown across the top of the form. I don’t really want users to see all the steps as only some will be relevant to them, I know that I can just hide all the steps but I ideally want to keep the relevant steps rather than just hide them all.

Has anyone encountered this issue before? If so how did you manage to work around it?

Thanks

1 Like
2

Interesting that this result came up when I searched:

https://stackoverflow.com/questions/52872451/hiding-irrelevant-form-pages-with-gravity-forms

1 Like
3

Yep that was me too!

1 Like
4

We don’t have a good way to do that right now, but we do have it on our list of requested features. There’s no release date slated for the feature at this time.

In the past, we have recommended hiding the steps to avoid confusion, but we can see the need for having the steps change dynamically as pages are removed or added with conditional logic.

5

Hi Chris, I’m in desperate need of this feature myself. Has there been any further movement on this?

6

Hi Phil. I saw that David Smith already responded to you on Slack regarding this. It’s being worked on for 2.5 but it’s not currently supported and I have not seen any workarounds to date.

7

I MIGHT, have a quasi answer… So the HTML code you are working with looks like something like this:

<div class="gform_body">
   <div id="gform_page_35_1" class="gform_page" ></div>
   <div id="gform_page_35_2" class="gform_page" style="display:none;"></div>
   <div id="gform_page_35_3" class="gform_page" style="display:none;"></div>
</div>

Hypothetically, you want to add display: none; to the current page and another to delete the style. This is easy enough to do but you’ll need to know some javascript/jquery and write a function.

function boom(){
    document.querySelector('#gform_page_35_1').setAttribute("style", "display: none;");
    document.querySelector('#gform_page_35_2').removeAttribute("style");
    document.querySelector('#gform_page_35_3').setAttribute("style", "display: none;");
}

Or something like that, which will hide pages 1 and 3 and display page 2. The other thing you need to do is tie that JavaScript in with condition or trigger of when this function would apply.

if( this ){
    boom();
}

or something like…

document.getElementById('#choice_35_2_1').triggerEvent('click', boom );

Best of luck!

8

Hi Chris, thanks a bunch - good to know that it’s in the pipeline! You obviously saw my suggestion for it’s working - could I put that somewhere as a feature suggestion?

9

Hey Parkbum. Much appreciated, but that coding’s a bit above my pay grade I’m afraid, unless I’m taken by the hand and told “take that, put it here” etc… :wink:

10

If you want to know where to put it. I use a plugin called Scripts and Styles. It’s great for adding codes for specific WP pages or ones for the entire site.

You can hire me if you like. I answer questions like this so I can sharpen that and get better but I’m willing to take on side work if you need it.

1 Like
12

Oh - lol - this is the feature request section. Anyway, how I see it working is like this:

If a page is set to show based on conditional logic, that page’s step (above the form) should be hidden by default unless the condition is met. Conversely, if a page is set to hide based on conditional logic, the step should be visible by default unless the condition is met.

13

Crikey - I’ll get the hang of this board soon…

1 Like
14

That is what we are working on in version 2.5. When the page itself is hidden by page conditional logic, don’t show the step for that page in the progress indicator.

2 Likes