-
ANDROSSAsked 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.
-
aubreybourkeReplied 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"
-
ANDROSSReplied on January 12, 2018 at 2: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 WidthPXWidth of this matrix table in pixels.
Column WidthPXSuggested width of each column in pixels.
-
aubreybourkeReplied on January 12, 2018 at 2:53 PM
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;
}
-
ANDROSSReplied on January 12, 2018 at 3: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.
-
aubreybourkeReplied on January 12, 2018 at 4:22 PM
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.
-
ANDROSSReplied on January 12, 2018 at 4:23 PM
Thank you very much. :)
-
aubreybourkeReplied on January 12, 2018 at 4:24 PM
Welcome. If you require any further assistance please feel free to post another question.