Split up form, pages or other options

  • Profile Image
    frenda
    Asked on August 29, 2018 at 09:56 AM

    Hi,

    I have quite a long form that I would like to split up in three parts. I have a few questions regarding this:

    1. Is it possible to create a sort of dashboard that the customer will arrive to when clicking a form link. From that dashboard they could navigate to the three different parts of the form and when a part is finished it will show, or a progress bar on each part. The customer will be able to return to the form and keep filling out information during a few weeks time.

    2. I added the Form Tabs Widget but it is acting a bit weird. It has been placed on top of some text (see the screenshot). I also wonder if it is possible to make the tabs bigger and wider?

    Best regards,

    Amanda

    Screenshot
  • Profile Image
    AshtonP
    Answered on August 29, 2018 at 12:18 PM

    Forms tab widget is the best thing for your requirements. I checked your form and it appears that you have removed this widget. I have cloned your form and added the tabs to this page shown in the page below -

    I have added below code to increase the font size and list width.

    .tabs-list li {
        font-size: 30px;
        width: 23%;
    }

    You can increase and decrease the font size as per your requirement. You need to inject this code in the Form Tab Widget. Refer to this article - How-to-Inject-CSS-Codes-to-Widgets

    65923_form_tabs.png

    When I added this widget on the form it didn't overlap any elements at all. You can take a look at my form - https://form.jotform.com/82404411849961

    Let us know if you need further help.

  • Profile Image
    frenda
    Answered on August 29, 2018 at 12:27 PM

    Thank you Ashton for your answer and the code!

    This is the form I have the widget in: https://form.jotformeu.com/82393324060350 

    In that form it overlaps.

    Amanda

  • Profile Image
    Kevin_G
    Answered on August 29, 2018 at 01:37 PM

    Please try injecting the following CSS code to your form: 

    .tabs-list.default {

        margin-bottom: 30px;

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    I hope this helps. 

  • Profile Image
    frenda
    Answered on August 30, 2018 at 03:36 AM

    It worked, thank you!