Form with conditional visibility loads slow when progressing through pagination

Hi @mom4i911024

I am sorry to hear that you are experiencing issues with the Forminator form.

Thank you for sharing the form export, I was able to replicate the issue with the form on my testing site and took a look further at the form. I noticed the form is quite vast with many visibility conditions. In such cases, some slowness is expected as the browser runs those scripts with the pagination trigger.

In this case, to better the load time, maybe you can try adding the fields with the same visibility condition to a field group, this way the visibility conditions will be applied on the field group instead of each field thereby improving the form performance.

Here is more information about the field groups: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#field-group

Hope this helps. Should you have any further queries, please feel free to reply back. We’ll be glad to assist you.

Kind Regards,
Saurabh

Hi Saurabh,

Thank you for taking a look at my form. However, after checking the Field Group feature, i’m not sure it’s going to work in my case. Indeed I do have the same visibility conditions on multiple radio fields, but they are all in different “pages” from the pagination. Is there a way to group them and maintain the current visibility conditions like that? Or did you mean I should replace the pagination with Field Groups?

If I am to remove the page breaks the form speeds up quite a lot. And to explain the form a bit further, all my visibility conditions depend on the selection of the first radio group. Then in each separate page break the same visibility rules are ran, so it’s pretty much the same thing over and over again in each page break. First radio selection group has let’s say 16 options. If the user selects an option from the first eight predefined ones – show this field and if he selects an option from the other 8 predefined ones, show that field.

I was wondering why it’s slowing down so much if the conditional visibility logic is not that complex and it only depends on the first radio field selection.

Kind Regards,

Hi @mom4i911024,

Hope this message finds you well.

Same as Saurabh, the delay is due to the conditionals.

Or did you mean I should replace the pagination with Field Groups?

Yes, we can suggest grouping the radios that have the same Visibility rules in Group Fields and adding only the rules in the Group field instead of on each radio, this way the conditionals will be reduced.

If still not working, please let us know and we will ping our devs and see if they can provide any workaround.

Best regards,
Laura

As far as I can tell it doesn’t work if I keep the pagination and use Field Groups because of the way my form is structured right now.

It works if I remove the pagination and use Field Groups but then the flow of the form becomes different – it shows the next field group on a click instead of with a “Next” button. Is there a way to use Field Groups and still have the Previous/Next button functionality like pagination does?

Also, for the time being, is there a way to add some sort of loading spinner on the button to indicate that the next page in the pagination is loading after I click “Next”?

Hi @mom4i911024

Thanks for response!

You’re right that if your fields are and need to be “scattered” around different pages, the “grouping” solution may not work here because that would require changing the order of the fields (I can see that fields in single page have two or three sets of visiblity conditions).

But I was thinking about how we could simplify that without changing the “flow” and I came up with another idea that seems to do the trick on my end. Take a look please:

https://app.screencast.com/E9FMVVlyXvgeo

This looks rather fast. I’m not sure if it would be the same on your end as there’s always possibility that additional factors are involved (like other plugins on site, overall server load etc) but it is much faster than the original form.

What I did here was:

1. as you said you mostly have same visibility rules set for fields, based on the same “radio-1” field so I looked into that and I noticed that:

a) you indeed have radio fields on each page that have exactly the same rules set, based on the same “radio-1” field

b) and on some pages there are additional fields (like e.g “(Motorgr??e 1800)”) that have rules based on the same “radio-1” field but slightly different set.

2. So I have left those 1b field unchanged with rules as they are, but I made change for the resto of the fields.

– first, I enabled “calculations” option in Settings of the “radio-1” field
– then for each option that are used in one set of visibility rules (so options 1,2,3,4,6,9,11,14) I set calculation value to 1
– and for each option used in second set of visibility rules (so options 5,7,8,10,12,13,15,16) I set calculation value to 2

– then added additional calculation (calculation-2) field to the form and moved it right below radio-1 on first page

– in this calculation field I set formula to be simply {radio-1} and enabled “Hidden” checkbox in “Settings” of that field

– so at this point the calculation=2 field value will always be either 1 or 2 and nothing else, depending on.. what’s selected in radio-1

– and then I’ve set just a single visibility condition for each of the fields 1a – to show it if “calculation-2 is 1” or if “calculation-2 is 2” – depending on the field.

I’m not sure it this is clearly explained but I hope you got the idea. Basically, what we are doing here we are actually grouping but not fields – we are kind of grouping visibility conditions. Ultimately, there’s way way less conditions to check and less data to check. Because

– instead of checking each time which one of the 16 values of “radio-1” is set
– and each time checking if it matches one of 8 rules for one field and one of 8 other rules for another field

now it simply takes already set value of calculation and process a single simple rule for each of those fields.

It seems to be making difference on my end.

I’ve shared modified form for you here

https://pastebin.com/YJQyLRG0

so you could import it to your site (as a copy), test and if it works -review settings to understand how it’s configured. If it helps, then you would want to modify your original form that way too (note: I may have made some mistakes in rules but the general idea is the same).

Best regards,
Adam

Awesome work Adam… thank you very much! Excellent solution, the speed improvement is very noticeable and I can keep the pagination. Thanks again!