Edit font style in Form Block?

(I am using Dovetail, but can’t find an answer to this question here at Answers for any template.)

In a Form Block, I am using a multi choice checkbox question. Squarespace automatically formats the options users can select from and the text is tiny – some visitors may have trouble reading text this size, so I’d like to edit it to be a little larger.

If you need this feature, too, please vote for it!

Attached is another example of how I am using a Form Block in Bedford and why I need to edit the text size.

The form font is correlated to the 'body' font in the style editor. To make changes to your form size you will have to first change the form font, size and other style.

The form font is correlated to the 'body' font in the style editor. To make changes to your form size you will have to first change the form font, size and other style.

This is some CSS that affects these settings, add it to the Custom CSS Editor:

.title {
 font-size: 14px !important
}
.caption {
 font-size: 10px !important
}

Or, if you need it on just the one page, add it to the Page > Settings > Advanced > Page Header Code Injection (Per-Page Code Injection):

<style>
.title {
 font-size: 14px !important
}
.caption {
 font-size: 10px !important
}
</style>

Thanks, @tryingtobehelpful, the latter mostly worked...captions under input fields are now fixed. (THANK YOU!)

Do you know what the text in a "Text Form Field" is called in CSS code so that I can add that to your fix above? The text under "Agreement" in my above example is still unchanged by the code you suggested.

Thanks again for your generous help :)

Rachel

Hi Rachel,

Could you provide the URL to that form on your site? I'd be happy to take a look. You can find class names and IDs for CSS using the Inspector tool in your browser.

Here are guides to using the Inspector tool with Safari,

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector

Firefox

https://developers.google.com/chrome-developer-tools/docs/overview

and Chrome

https://developer.apple.com/technologies/safari/developer-tools.html

Thanks so much! Here's the development site:

https://rachel-pereira-8nj0.squarespace.com/agreement/

I'd also like the feature to edit the borders in the form block to change the style!!

I'd also like the feature to edit the borders in the form block to change the style!!

@rachelpp - the class is .description, so the code would look like this:

<style>
.title {
 font-size: 18px !important
}
.caption {
 font-size: 14px !important
}
.description {
 font-size: 10px !important;
}
</style>