Showing/hiding a fields with the conditional logic (Add More feature)

Trying to think through a solution...

Your team helped me with a different type of audit form recently. The link is as follows:

https://www.jotform.com/build/80953834822160

When you submit the form, you can click on a link in the Thank You email, which does the following:

1. Returns you to the form

2. Pre-populates the contact information (upper half) of the form - so the user doesn't have to reenter data - when they wish to populate a new audit.

We developed this so the user can add new audits over and over, either the same day or at a later date, for the same location. However, they have to 'submit' and 'leave' the form, get the Thank You email and click on the link to return to the form to add a new audit.

https://form.jotform.com/81363918222153

1. Have a button: "Add a Floor". User clicks on this and is taken to the "Floor Number" field where they enter the floor number.

2. Next, create a button called "Add a Room" - User clicks on this and is taken to the section for "Room Type"

3. Create a button called "Add a Surface" - User clicks on this and is taken to the section for "Cleaning Surface"

4. THEN after the Surface section, have a 'bank' of 4 buttons: "Add a New Floor", "Add a Another Room", "Add Another Surface", and "Submit".

One of the many challenges is keeping the Surface(s) and Room(s) bundled with the correct Floor.

If this even possible?

Original Thread

Hello lritter,

We are all already notified by our colleague of the challenge you are experiencing when developing your form :)

I have checked related threads and your form, and can suggest the following:

1. At the moment I am not sure how, but I think you can take advantage of Section Collapse elements to keep the Surface(s) and Room(s) bundled with the correct Floor. I can see that your buttons "Add Floor" etc. are only images at the moment, so I suppose there could be an option to style section collapses as buttons. I'm afraid, you future form will need a lot of custom css code to meet your needs, but we can help with some.

2. The other thought I got is to create separate forms for Floor, Room, Surface and to redirect users to them when they hit Submit. When the small form is filled out, there could be new options added: to add new floor, room, surface with redirection to appropriate forms. All this process could be supported with some kind of unique id to connect the submissions of different forms. But, there still would be inconvenience as the search option is needed to review the submissions of such form.

I think the first option would work better for you. Please allow me some time to create a sample form, so I could provide an actual example.

I will update this thread as soon as possible.

Thank you for contacting us.

Hi Victoria,

Happy Wednesday!

I agree with your opinion on the options you outlined. #1 keeps everything together, where #2 seems like a reporting challenge.  

No pressure - just wanted to share some thoughts I had.

Thank you!

Hello again,

Happy Wednesday to you too! 

My apologies, I am still working on the sample form, I will update you with any results soon.

Thank you!

Hello lritter,

I was checking possible options to implement the idea you shared and here is what I can suggest.

Surface sections can be handled by Configurable List widget. For ROOM and FLOOR you will need to create sections manually and set up the conditional logic to show more options based on user's input. I hope you do not need to have a lot of FLOOR options on the form.

I have used Checkboxes (Multiple Choice) elements styled as buttons to check user's input. 

Please check the nesting structure on the screenshot below. Every FLOOR section contains several ROOMS, which have SURFACE multiplier under them: 

So, the conditions are the following:

1. IF Add a Floor IS FILLED, then next ROOM section is shown AND the button to add next floor:

2. Every ROOM section has a button to add 1 more room. If Add a Room IS FILLED > SHOW next room section, which already has a button to add 1 more:

It seems that's it. Here is my test form, you may clone it to inspect closer:

https://form.jotform.com/82137740016955 

Please let us know if this will work for you.

Wow!!! From first look, I think you nailed it, Victoria! I'll take it on a test run and customize those content wells that need customizing. Thank you! Thank you! Thank you! My hero!

Please let us know after implementing the solution as suggested by my colleague.

Let us know if you have further questions. We will be happy to assist.

Thanks.

I tested and we've got a super foundation. Here's some of the initial items that need tweaked:

1. I created a link on the Thank You page that allows the user to return to the same form and 'add' more floors, etc. It also pre-populates all of the fields in the first section of the form as seen in the following screen shot. However, notice the date. I believe this is because I have the date's default setting to 'today's date'. Any tips?  

I see that you've created sections. Each audit is limited to 3 floors. Each floor is limited to 3 rooms and each room has limitless surfaces. Which is great. I can duplicate your model as needed, i.e., add more floors/rooms. So, this is sweet!

I noticed the Submit button is hidden until you add the last floor. I'll need to unhide it because some audits may only have one floor. No big deal.

I think I have enough here to be able to customize it to my needs and if I run into anything, I'll be sure ask for help. You've done an amazing job and appreciate all of the time an effort that went it this. Thank you so much. 

On checking the forms Thank you page after clicking the return URL I could not replicate the issue. Could you please check once again?

Please get back to us if you still face this.

Thanks.

Hello lritter,

I have also checked your form. I've noticed that Submit button is hidden, because it is included into last section. You may separate it with different section collapse, so it was always visible:

If you want to allow users to return to the same form and 'add' more floors, etc., I can suggest even better option. You can place an edit submission link on your Thank You page. This would allow to edit the submission, but if you leave a pre-populated link, it will create new submission. 

Here is the guide: How-to-Let-Users-Update-Their-Form-Submissions-at-a-Later-Date

I will also check the date picker population issue and update you with my findings.

Let us know if you need any further assistance, we are always glad to take a look.

Thank you!

Super helpful! I've added the Section Collapse as you recommended.

My colleague and I are testing the form and have run into some challenges. 

1. The configurable list widget does not translate well into Excel. The colleague has the job of analyzing the data. So, I'm waiting to see if this is a big issue for her. 

2. The configurable list widget drop down menu does not allow for multiple selections. I may need to duplicate that field, i.e., 'Recommendation 1', 'Recommendation 2'. Any other thoughts?

3. Number of fields is a challenge too. Initially, my colleague suggested we have at least 10 floors with 5 rooms each, but the number of fields would be exponential. So, we've brought this down to 5 floors and 5 rooms each. Any tips on how to duplicate these fields fast and keep the formatting consistent? I wish there was a way to section collapse in 'Build Mode' to make this process easier. 

Despite the challenges, I appreciate the foundation you built.

Hello,

Unfortunately, I am not sure if I understand excel problem of Configurable List, but I assume you refer to the fact that the data is forwarded into single cell. I'm afraid there's nothing we can do about this. 

Also, the widget is not very flexible as to customizing, so if you need to allow multiple selection, the best way would be to add a field for every selection.

My sincere apologies that I was not able to help with first two of your questions. However, it seems that I can provide a useful advise as to duplicating multiple fields.

You can take advantage of managing multiple fields feature:

How-to-Manage-Multiple-Fields

I think you should be able to select the whole floor and duplicate it this way. Afterwards, few conditional statements will need to be added and buttons styled at css section.

Hope this helps!

Hi Victoria,

I am aware of the multi-select feature, which is great. I was hoping there would be an easier way to duplicate the formatting/styling in css. That's the part that is going to take some time.

Thanks!

I can see that you have very organized css code under your form. The checkboxes for buttons have also values, so you could use this in css. For example, if the value for Floor checkbox is set to "2" prior to duplicating, you could use the following workaround and newly added buttons would be already styled:

Also, you could select ranges when styling the background:

/*Room Type, Room Location, Competitor Dispensers, Betco Dispenser Recommend, Rate Room, Comments, Upload Image*/

#section_179 > li:nth-child(n+2):nth-child(-n+8),

#section_212 > li:nth-child(n+2):nth-child(-n+8),

#section_218 > li:nth-child(n+2):nth-child(-n+8) {

    background-color : #f2e6ff !important;

    padding : 10px 0px 10px 35px;

    font-family : arial;

}

The code above should replace 21 id selector for 3 room sections:

Hope this would be of help, but, unfortunately, your form needs a lot of pixel perfect work.

Wow! This really helps a lot. Great tips!

For the Section Collapses, how do I find the field number for these? I see that you have 179, 212 and 218. I've since added more, but for the life of me, I can locate the field numbers.

Thank you!

Hello,

I've used the inspect element tool of the browser (right click):

I really hope this helps, but if you need any help, please let us know.

Thanks!