How to make a form that appears in an accordion

  • Profile Image
    Asked on December 14, 2017 at 10:46 PM


    I have lots of similar web pages on a site, which I will call "Collection Pages." They have lots of content on them.

    I want to add two long forms to those pages. However, I do not want to have too much stuff on the page (the current content and the two forms) fighting for space and attention.

    I therefore initially want the visitor to the page to see just a little prompt for each form, such as "complete form A now" and "complete form B now." Then when the visitor clicks either of those, the appropriate form opens up. (The forms will each have some text fields, an autocomplete field, and some checkboxes). 

    Of course, the obvious answer is to have that prompts go to a separate page with the form. However, I need the visitor to copy some info from the Collection Page they are on, and paste that info into certain fields of the form. And, no, I cannot create another version of each Collection Page with that info and the forms. I really do need the forms to be on the Collection Pages-- just not eating up a bunch of space.

    If we were tech-savvy, we could hide the form in an accordion, but we are not techies. I need to find a way to make Jotform do the work.

    I assume we could also have a tiny vertical window for each form (just enough to show one question), and make the person scroll the form, but that is an awful experience. Also, one of the questions is a long series of checkboxes, so the vertical dimension could not be all that small.

    How do we accomplish this in jotform?

    I guess it would be some way of having a first question, which is a checkbox (like, "check this box if you want to complete form A?"), and if they check the box, then the logic would make the other fields appear. It would be best if--once the first box is clicked--then some javascript opens up the form with all the other fields of the form appearing at once, rather than each question exposing the one next question after it. 



  • Profile Image
    Answered on December 15, 2017 at 02:51 AM


    Could you please check the example form below if it meets your request or not?

    You can follow the instructions in order to embed your forms to another form and build an accordion view using IFrame embed widget and Section Collapse field.

    1. Create 2 separate form on JotForm for 'Form A' and for 'Form B'.

    2.  Create the 'Main' form which will include 'Form A' and 'Form B'.

    3. Add 'Section Collapse' field under 'Page Elements' to the 'Main' form.

    4. Add 'IFrame Embed' widget under the 'Section Collapse' field on the 'Main' form. 

    5. Copy the URL of 'Form A' and paste it into the IFrame widget. 

    6. Add another 'Section Collapse' field under 'Page Elements' to the 'Main' form.

    7. Add another 'IFrame Embed' widget under the second 'Section Collapse' field on the 'Main' form. 

    8. Copy the URL of 'Form B' and paste it into the second 'IFrame Embed' widget. 

    You can follow the instructions on the gif below.


    I Hope that helps.

    If you need any further assistance, please let us know.

  • Profile Image
    Answered on December 28, 2017 at 02:57 PM

    Very cool. Better than what I envisioned. Loving jotform and the support.