Forms - Help making fields appear larger for readability

SELECTED ANSWER

replied on January 29 • Show version history

Is your Meeting Date field a date/time field? If so, you should be able to isolate it using something like this:

#q22 input, #q22 label {font-size: 20pt !important;}

Just change out the 22 for your field ID, and the font size for whatever works best for you.

1 0

View 5 previous replies

replied on January 29 • Show version history

Hi Sarah,

It's like the field isn't wide enough to hold the enlarged text - it's cut off. How can I increase the size of the field itself so the enlarged text is fully displayed?

Sorry, these are probably very elementary questions.

Edit: Never mind, the width property appears to handle that. I was using that before, but must have been doing it incorrectly as it works fine when adding it to the code you posted.

1 0

replied on January 29

Glad to hear you got it working!

0 0

replied on January 29

I send this form as a PDF attachment using an email service task - the CSS doesn't appear to be reflected in this PDF copy of the form. Do you know what I'd need to do in order to get this CSS to affect the PDF attachment?

0 0

replied on January 30

Try this:

#q22 input,
#q22 label,
#q22 div .submission-view {
  font-size: 20pt !important;
  width: 200px !important;
}

Let me know if it's still not working for you, but this seemed to do the trick for me.

1 0

replied on January 31

That is working well! Say I had other fields on this form that I wanted to do the same thing with, but just not be quite as big. What would efficient CSS code look like if I wanted to do that for 4 other fields without affecting the one we're already modifying?

Thanks for all your help!

0 0

replied on February 3

Perfect! Glad it's working for you!

If you're wanting to apply coding to multiple fields at once, the easiest way to do that is by applying a custom CSS class under the Advanced tab for each field you're wanting to customize. For example, I called my custom CSS class "Medium", but you can name it just about whatever you'd like!

Then you would add the following coding, adjusting sizes and CSS name as required:

.Medium input,
.Medium label,
.Medium div .submission-view {
  font-size: 20pt !important;
  width: 200px !important;
}

You don't have to worry about accidentally affecting your previously modified field, as it was isolated to that specific field's ID.

Different types of fields might require different selectors, so if this isn't working for you let me know what types of fields you're working with and I can try and help troubleshoot. :)

1 0

replied on February 4

Thanks so much!

0 0

replied on February 5

No problem at all, happy to help! :)

0 0

Question

Question

Forms - Help making fields appear larger for readability

Answer

Replies

Sign in to reply to this post.