Form Layout: Making a form like my previous JotForm

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.

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"

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.

You mean like this:

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 

Wow, thanks!

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

Thanks again.

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

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. 

Thank you very much. :)

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