Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2
Sign in to follow this  
rachelpp

Edit font style in Form Block?

Question

(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.

Can I change the size of the form text?

Edited by rachelpp
Improve screenshot

Share this post


Link to post

9 answers to this question

Recommended Posts

  • 3

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>

Edited by squareology

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@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>


Edited by squareology

Share this post


Link to post
Guest
This topic is now closed to further replies.
Sign in to follow this  

×
×
  • Create New...