Possible to keep a field visible throughout the entire multi-page form?

I have moved a field called "Select for second client" into a fixed navigation bar at the top of the page, which is a checkbox that will eventually show or hide client 2 fields on the entire form.

As the form is 30 pages long and might take 30-60 minutes to complete with a client or two, I'd like this option available to be changed regardless of what page the user is on, so they don't need to go back 20+ pages to get the first page to uncheck it in the event a second client joins or leaves the process mid-way though.

This is the form: https://form.jotformeu.com/90072236358355

As the way the Jotform system works is that the webpage doesn't change when you click next page, it just hides the previous form pages and shows the next one. As a result, my field disappears from the top navigation bar when the next page is viewed. 

I have tried duplicating the checkbox on every page and made conditions that if any of the duplicated checkboxes are ticked, then tick all the others, as they aren't actually linked otherwise. Problem here is that this isn't possible so I need to do a one-to-one condition for every field, that is 30x30-30 (given that the first field doesn't need to fill itself), that's 870 conditional logic equations which is not worth the time.

So the best way I have seen to attack this problem is to somehow make the one field from the first page visible on all pages. I've tried overwriting the pages that use "ul .form-section page-section { display : none }" by being specific to the field with "#id_530 { display : block !important }" however despite being more specific, it is still overwritten by the parent object (the form page) being hidden as a whole.

If I could, I'd move the field HTML element and change the parent object so that it won't be bound to one page and thus wouldn't hide, however HTML manipulation on here isn't possible. I've been bound to CSS.

Does anyone have any idea on how to solve this problem, point me in the right direction, or give me a hint?

Thanks for any help,

-Oliver

The form is currently designed for the desktop view, tablet view is usable, however mobile view is unusable as some pages are too tight. Currently best viewed on the desktop.

Please allow me some time to get a suggestion for your form. I will get back to you via this thread.

Thanks. The form hasn't been revamped past page 10, so for testing purposes, just the first few pages would be great for now.

-Oliver

Hi Oliver, To be honest, I do not see an option to show specific a form field on every page of multi-page form. Every next page is hiding container element, so this does not seem to be possible. 

I'm sorry, it seems I have found a CSS solution for you. Please try this test form: https://form.jotform.com/90092950206958 Feel free to clone it to inspect better: How-to-Clone-an-Existing-Form-from-a-URL

I have placed checkbox to first separate page, that page can be displayed over next pages. At least I think so. 

Another problem would be to hide 'Next' button of the first page on next pages, but this is handled as well:

.page-section:nth-child(1) {

  display: block !important;

  visibility: visible !important;

}

.page-section:nth-child(n+2) {

  top: -100px;

  background-color: white;

}

How-to-Inject-Custom-CSS-Codes

Hi Victoria,

I hadn't thought of using an extra page before, that's fantastic.

Will implement this solution and see if it works effectively.

Thanks for your help.

-Oliver

Hi Victoria,

This solution worked perfect, thanks.

I just need to find a way to hide the back button on the second page as the first page doesn't contain anything else other than the checkbox.

I've managed to start the form from the second page using ?jumpToPage=2, which is great.

-Oliver

Hi Oliver, Just wanted to let you know about jumpToPage URL parameter if you would like to start from second page. Great to know that you have found this workaround already. If this will not work good enough, please let us know and we will check for other solutions. 

I think you can hide specific Back button via page break properties:

Hope this helps.

Hi Victoria,

I've just implemented this and works just like planned, perfect.

Regarding the URL parameter, it works, but would like to know if there are other methods as well, as someone could remove that parameter or change it to jump pages to get around required fields/pages.

Thanks for your help,

-Oliver

The form should still validate fields on submission even if they are skipped. 

I have tried to show across all pages a checkbox placed to last page instead of first one. Here is a test form: https://form.jotform.com/90142314006946 

And the code I used:

.jotform-form .page-section:last-child {

  display: block !important;

  visibility: visible !important;

  position: absolute;

  top: -1em;

}

You can move your existing page at the bottom of form builder as shown on screencast:

If you do not want to update your finished form now, you can embed it to web page, users will get your website address instead of form link with jumpTo parameter: Getting-the-Form-iFrame-Code

There could be other workarounds to mask page one with a loading gif for example. 

Hi Victoria,

I've now implemented your alternative method by placing the checkbox on the last page. 

The only problem I've come across now is that the next button no longer appears on the first page, or in fact any page that I've tested. However they only show a back button which doesn't do anything once clicked.

I'm guessing this is because the 'last page' is technically being displayed at the top with the first page and thus since the last page doesn't have a next page there isn't a next button displayed.

From looking at your solution screencast and testing your form, you don't have this issue, which leads me to believe I may have done something incorrectly. I can't see what that might be though.

Thanks,

-Oliver

I assume a problem is with z-indexes for elements. I am checking your form, but it takes time. I will update you here if I find a solution.

Hi Victoria,

I did reach the CSS cap of around 47000 characters, so I've cut a lot of code and cleaned it up, removed around 10000 characters. It is possible I may have removed something vital, however the z-indexes haven't been touched from before I implemented your solution so not sure that would be the issue.

Thanks,

-Oliver

It seems I have found it. Page break of the last page is covering Next and Back buttons. Please try this code to hide it:

.form-all ul:last-child > li.form-input-wide > div.form-pagebreak {

  display: none !important;

}

Hi Victoria,

This has indeed solved the issue.

Thank you very much for your help and patience throughout the problem, it has made a big difference.

-Oliver

Hello Oliver, I have moved your next question as new thread, we will answer it shortly here: https://www.jotform.com/answers/1702458