How can I create a collapsible section that displays previously entered data?

Hi there,

I'm attempting to create a long, multi-section form.  At the beginning, I'd like the first section to be visible/expanded, and all other sections to be collapsed.  When the user completes / submits the first section, I'd like it to convert to static display text and the next section to open up.  I believe this is called an "accordion" form and is utilized often in checkout processes.  It allows the user to review their previously submitted information while continuing to fill out the form, and has the benefits of a multi-page form.

Anyways - is this type of form possible currently in JotForm?  I've searched but I can't find any examples.

Thank you!!

I think you can accomplish this using the Form Collapse tool which you can find under the Survey Tools.

Please take a look at this demo form: http://form.jotformpro.com/form/50055798039967 and let us know if it's similar to what you want to accomplish. If it is, feel free to clone the form to your account if you want to.

Best Regards.

Thanks Raul - that's on the right track but it's missing the piece with the completed form collapsing into static text.  Also, in that example the areas can be opened and closed at will, whereas the intended functionality would force the user to complete a section before they could proceed.

Hi,

I'm not sure if I understand if completely. But, what you would like are the following:

1. Using a form collapse for sections

2. Only make the section available when the previous section is filled out

3. Place a static text based from a condition.

You can check this form that I have https://www.jotform.com/form/50058717740960. And follow the screenshots below on how I set it up.

1. I added 3 sections, and added a static input text box in section 2. After adding all the necessary fields, you can navigate to "Conditions" to add advance logic to our form. You can check this guide to learn more about Conditions: Smart Forms Using Conditional Logic 

2. I choose "Show / Hide a form field" to show and hide the sections. I want the user to fill out the Section 1 before Section 2 is displayed.

3. Here's my condition with a rule and action.

4. I then again add another condition but using the option "Update a Form Field value" under Conditions Wizard. I want to add the text "Static Here" inside the text box field "Static Text".

5. To set the text box as a read only and users won't be able to edit it, we will change the properties of the text box field. 

6. Change "Read Only" to "Yes".

You will then just repeat the process to your other sections and fields. Let us know if  you need more assistance on this.

Thank you.

That's close also, but effectively here's what I'm trying to do:

Notice how once the first section is filled out, the values the user entered now appear as static text at the top of the page. 

I've had a lot of trouble finding a working example of this form online (i.e. a Javascript demo or something), but I believe this is an "Accordion" style or " Apple" style form.

With this type of form I imagine it needs validation on each section also, so that I can't omit a field and still proceed on to the next area.

Unfortunately, this is not something that can be achieved via our form builder. We do not have an option to show some previously filled data as a static text section nor adding the custom animations.

However, if you would like to modify a JotForm based form in a custom way, it might be possible with a form source code that can be copied/downloaded. If you need a help of professional web developers in this case, we can recommend Freelancer Marketplaces like http://odesk.com and https://www.elance.com.

Thank you.