Help with Formatting/Costum CSS

https://form.jotform.com/213296935158061

I would like my form to have narrower input boxes and also in the second section, I'd like all of those line items on one line. I tried playing with the advanced design settings as well as the css but couldn't get anything to work.

Hi There,

Thank you for reaching out to us.

In the properties of each field from the sidebar, there is an option to shrink field which narrows the field and makes it appear smaller.

To customize this further, you can inject custom CSS into the form to modify the width and height of the input fields. To provide more details on which field you would like to make narrower and we can go ahead and come up with the CSS to help you get this done.

Your second question is moved to a different thread.

Feel free to ask for further assistance.

Yes, I have the shrink on. Help with the CSS would be great. I tried playing with it but it didn't work. It is the last 6 modules on the 2nd page of the form starting with Name and ending with Notes

You want to display all the field in one line, is that correct? I have injected custom CSS code in your form to display all the question side by side and in one line. Please check the screenshot below:

Please test your form and see if the fields are being displayed correctly or not.

Do get back to us if you need any other changes.

Yes, that is much better. Is it possible though to have all the boxes the same heighth? Also, I'm going to be adding duplicates of this. Will they all be part of the CSS code or will I have to change the code?

Hi there,
After checking the Injected CSS in your form, all the fields have the same height, except the Dropdown "Program" Element. For that Element to be the same height as the other fields implement the following code to your existing one:

#input_15 {

 height: 40px;

}

.form-section.page-section {

  justify-content : space-between;

}

If you intend to duplicate the fields, you will have to Inject Custom CSS for the duplicated fields additionally, because every Element has its unique ID for the CSS.
Follow the instructions and details provided in the following guide for a better understanding
→ How to Inject Custom CSS Codes

Let us know if you need any further assistance.
Thank you.

Not quite working yet. I added to more sections of while it looks ok in build mode, it doens't show up when I preview the form.

Also wondering if I can a button to add the next group. For instance if they have 2 employees they are entering, when they enter the first line, a button to add another line and so forth.

We will be glad to help you with your concern further. Perhaps you can share with us screenshots of how the fields on your form look like on your end both on the builder page and when on preview mode.

How-to-Post-Screenshots-to-Our-Support-Forum

As for your other requirements, you may want to consider checking the Configurable List widget to see if that will meet your requirements.

How-to-Set-Up-the-Configurable-List-Widget

It is also possible to style the Configurable List widget using custom CSS codes to match the style of the other fields on your form.

How-to-Inject-CSS-Codes-to-Widgets

We will wait for your response.

Hello @losdbenefits,

The screenshot you attached from the preview mode looks good. All 5 fields are in one line with the same height.

I added to more sections of while it looks ok in build mode, it doens't show up when I preview the form.

Can you please share with us how the form looks like on the builder page?

This is what I can see on my end.

Additionally, please try adding this CSS code if the current one still doesn't work:

.form-section.page-section {

 justify-content: flex-start !important;

}

Please check - https://form.jotform.com/213315214781954

Best,

Nina

My preview mode does not look like your preview mode.

Here are the two screen shots

BUILD

Preview

Hi,

Please clear your browser cache by following this tutorial:

https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop

Once this is complete your form should display correctly on your side but if not please try using a different browser application, I can suggest Firefox.

Firefox download:
https://www.mozilla.org/en-US/firefox/new/

Please let us know if this solved the problem on your side.

Hope to hear from you soon.

Looks like the form has been fixed now.

I tried using the configurable list widget, but it lumped all the fields into one on the linked spreadsheet. I need the fields to be separate on the spreadsheet. Any other suggestions or how to make it work similar to the configurable list by clicking to add rows but to have all the fields to have unique settings?

Hi,

As the configurable list is considered as one element, all of the rows will be entered in the same field on the spreadsheet.

As a workaround, you can use conditional logic. Create separate questions for each field you want to show separately in the spreadsheet, and duplicate them. Hide the duplicated questions, and add one additional question, such as "Add an entry?", that will determine if the user wants to add a row. Then you can use conditional logic to show the duplicate fields as the second row.
Please see our guide below:
How-to-show-or-hide-fields-base-on-users-answer

Let us know if you need further assistance.

And now one more question regarding spreadsheet integration.

next row of spreadsheet , Name2, program2, eetype2, hours2, days2, notes

etc

I'm trying to create a spreadsheet this lists each person individually rather than on one line.

Hi there,

Thanks for getting back.

I have moved this concern to a separate thread: https://www.jotform.com/answers/3547304

For the update, please refer to the link above.

Regards,

The label on the submit button has disappeared...

Could you please allow me some time to closely look into this?

Your patience is most appreciated.

Thanks for patiently waiting.

The issue is now resolved. Please check and confirm.