What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
How can I create a collapsible section that displays previously entered data?Asked by kyle_impactradius on January 06, 2015 at 02:14 PM
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.
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.
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.
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.
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.
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.