Form Layout: Making a form like my previous JotForm

  • Profile Image
    ANDROSS
    Asked on January 12, 2018 at 10:14 AM

    Hi,

    I'm not sure if you updated your form builder, but I don't think I can build a form like my old one:

    https://form.jotform.ca/71315644674257

    For example, I wanted to build a header for my new form the way the header is in the old form above. But the header widget doesn't seem to allow for a title and image, it just seems to allow for a question. Also, it seems that overall, the form builder now is structured to create a form more in a 'timeline' than a traditional form.

    How can I create a form like my previous Jotform? Is there a certain kind of form template I should be using?

    Ideally, I'm trying to make a form as close to this as possible:

    http://www.norelcosafecam.com/site/files/pdf/Norelco_SafeCAM_Credit_App_Fillable.pdf

    Someone from support suggested the Narrative Fields widget, but I don't think it's responsive/mobile friendly.

    Thank you.

  • Profile Image
    aubreybourke
    Answered on January 12, 2018 at 11:28 AM

    You can change the form layout in your form settings.

    The old layout is "All questions in one page"

    The new layout is "One question in one page"

    1515774432The Easiest Online Form Builde

  • Profile Image
    ANDROSS
    Answered on January 12, 2018 at 02:28 PM

    Thanks, Sir. On a side note, I noticed that when building a table, the Column Width isn't changing when viewing in Preview mode no matter what size in pixels I set. Is the Column Width fixed? I am trying to adjust its width to suit the Table Width, but it doesn't work.  Thank you.

    Table Width
    PX

    Width of this matrix table in pixels.

    Column Width
    PX

    Suggested width of each column in pixels.

  • Profile Image
    aubreybourke
    Answered on January 12, 2018 at 02:53 PM

    You mean like this:

    1515786675The Easiest Online Form Builde

    Insert this CSS code:

    #cid_45 {

        width : 100%;

    }

    #cid_45 th.form-matrix-column-headers {

        min-width : 130px !important;

    }

    .form-matrix-values {

        height : 30px !important;

    }

     

    #input_45_0_0,

    #input_45_0_1,

    #input_45_0_2,

    #input_45_0_3,

    #input_45_1_0,

    #input_45_1_1,

    #input_45_1_2,

    #input_45_1_3, 

    #input_45_2_0,

    #input_45_2_1,

    #input_45_2_2,

    #input_45_2_3,

    #input_45_3_0,

    #input_45_3_1,

    #input_45_3_2,

    #input_45_3_3 {

        width : 125px !important;

    }

    How-to-Inject-Custom-CSS-Codes 

  • Profile Image
    ANDROSS
    Answered on January 12, 2018 at 03:55 PM

    Wow, thanks!

    The IDs you're referencing with your CSS are peculiar to me. Just curious, why are you using the, "!important"?

    Thanks again.

  • Profile Image
    aubreybourke
    Answered on January 12, 2018 at 04:22 PM

    1) To get the IDs you need to access the advanced CSS editor

    1515791746The Easiest Online Form Builde

    Then up the top right, you click on the CSS tab.

    This view will allow you to see CSS changes instantly (without having to press preview).

    To get the class for a field you just click on it once. A class selector will style all elements of that class.

    To get the id for a field you double click on it. An id selector will style only the one field (this is how I got those id's)


    2) The !important; keyword is an override setting. It basically gives precedence to this setting, if there was any other that might prevent it from loading. It is recommended when using Jotform as there is allot of CSS going on. 


  • Profile Image
    ANDROSS
    Answered on January 12, 2018 at 04:23 PM

    Thank you very much. :)

  • Profile Image
    aubreybourke
    Answered on January 12, 2018 at 04:24 PM

    Welcome. If you require any further assistance please feel free to post another question.