Adding Form Collapse to Form

  • Profile Image
    leslieradon
    Asked on May 09, 2016 at 08:17 AM

    I have spent hours going through the templates but can't see anything like my attachment.

     

    In this form, you click on a piece of tex, and a small box opens alongside.

     

    If this is not feasible, I would like to have a text list (in boxes as the attachment) and when clicking on one piece of text another jotform OR an image opens ON THE SAME PAGE.

     

    Is this too much?

     

    Leslie Radon

  • Profile Image
    liyam
    Answered on May 09, 2016 at 12:14 PM

    Hello,

    It's quite similar to how the form collapse element works. So there is a possibility on how to make it work, although you will need to manually create this and manually design this by injecting CSS into your form.

    Here's a sample of that collapse element in action: https://form.jotform.com/61295032696965

    Note: I did not fully put on a design and just gave a sample on how the element works.

    You can find the said form collapse element, on the left panel under Survey Fields

    Ideally, what you can do for now is create the fields that you have in mind and we can help by instructing you on the next steps in order to achieve how you wish for your form to appear.

    Please do get back to us with your updates.

    Thanks. 

     

  • Profile Image
    leslieradon
    Answered on May 10, 2016 at 01:45 AM
    Hey,
    Good to hear from you.
    I have attached the list that I want to put into the form.
    Each line on the list, should open up to expose, text and / or image.
    See my attachment, look on the kr-services-ALL page. (in Excel file; KR
    Explore)
    Meanwhile I am learning all I can from your instructions.
    Cheers,
    Leslie Radon
    ...
  • Profile Image
    leslieradon
    Answered on May 10, 2016 at 01:45 AM
    Him
    I cant find Form Designer, where is it please?
    Leslie
    ...
  • Profile Image
    Chriistian
    Answered on May 10, 2016 at 02:33 AM

    Did you send an image as an attachment? Unfortunately the attachment you have sent cannot be seen on the forum. To send an image to the forum, please visit this thread here: https://www.jotform.com/answers/835112, then follow this guide: How to add screenshots/images to questions to the support forum?

    As for the Form Designer, you can find it by going to your Form Builder and clicking on the Designer button as seen below.

    For more information on the form designer, you can also check out this guide: Form Designer Tutorial

    If you need further assistance, please let us know.

  • Profile Image
    leslieradon
    Answered on May 11, 2016 at 09:44 PM
    Hi Liyam,
    Did you get my list. I'm waiting for your help.
    Thanks
    Leslie Radon
    ...
  • Profile Image
    liyam
    Answered on May 11, 2016 at 10:17 PM

    hello Leslie,

    Unfortunately, no list was attached. If you're trying to attach a document, unfortunately, it's not possible here at the forum, as mentioned by Chriistian.

    Would it be possible to paste the text here instead?

    Thanks.

     

  • Profile Image
    leslieradon
    Answered on May 12, 2016 at 12:44 AM
    Hi Liyam.
    Aaah!
    Okay here is the list;
    Let My Property (Landlord)
    Manage My Property (Landlord)
    Fully Managed Letting Service (Landlord)
    Lite Package (Landlord)
    Essential Package (Landlord)
    Komplet Package (Landlord)
    Single Room Package (Landlord)
    Commercial Package (Landlord)
    Floor Plan & Photos
    Key Holding Service
    Customised Carpentry Service
    Decorating Service
    Electrical Service
    Maintenance Service
    Make Over Service
    Handyman Service
    Plumbing Service
    Roof Fixing Service
    Leslie
    ...
  • Profile Image
    leslieradon
    Answered on May 12, 2016 at 12:44 AM
    I have also attached the list here, which looks better in Excel'
    Leslie
    ...
  • Profile Image
    Chriistian
    Answered on May 12, 2016 at 02:17 AM

    I have created a demo form where I added the Form Collapse with the titles from the list you have provided. Here's the link to the demo form: https://form.jotform.com/61321553121946 

    You can use and modify the demo form by cloning the demo form to your account. To do so, simply follow this guide: How to Clone an Existing Form from a URL

    If you need further assistance, please let us know.

     

  • Profile Image
    leslieradon
    Answered on May 12, 2016 at 04:44 AM
    Hello Christian,
    Yes, that's the kind of thing I'm after. Thanks so much.
    Now I need to reduce the size of it, and the text a lot; so that the
    whole form can be seen without scrolling.
    When I open properties, I see only 3 adjustments, none is text size,
    etc.
    How can I adjust the text size and the frame size?
    Thank you, Leslie Radon
    ...
  • Profile Image
    leslieradon
    Answered on May 12, 2016 at 04:44 AM
    Hello Christian,
    I have figured out how to change the font. With CCS preferences. That's
    ok.
    I have reduced the width of the boxes just by click and dragging.
    But I am stuck on how to reduce the depth of the boxes. Distance from
    top to bottom. They take up a lot of room.
    Also when I click one of the boxes it opens ok but jumps, the whole
    thing goes to the top of the page and it takes a while to figure out
    what has happened.
    It would be better if it didn't move, like my sammple i send you. Can
    you help in this regard?
    Leslie Radon
    ...
  • Profile Image
    Chriistian
    Answered on May 12, 2016 at 05:21 AM

    I see that you were able to adjust the width of the boxes successfully. As for the distance of the boxes from each other, you can modify them by injecting the custom css below:

    .form-section-closed {

        height: 40px!important;

    }

    To inject css, simply follow this guide: How To Inject Custom CSS.

    As for the jumping of the boxes, unfortunately there is no option on the form builder to disable it. However, we can avoid the jump from happening by adding ?nojump at the end of the URL of your form.

    Here's a URL of your form where I added ?nojump at the end: http://www.jotform.com/form/61321931871453?nojump

    You will notice that the form no longer jumps to a certain point when opening a box.