Jump to content

How can I change the font size on a form field?

Recommended Posts

  • Replies 4
  • Created
  • Last Reply

@rcsfonseca You can change the font sizes on forms using Custom CSS. You can decide on the font size of names, descriptions and field contents by changing the values below:


/***************************************
Styling changes to Form
***************************************/
.form-wrapper .field-list {
 .title {
   /* Title of field (eg Name, Subject, Message) */
   font-size: 18pt;
 }
 .description {
   /* Description */
   font-size: 26pt;
 }
 .field {
   .caption {
     /* Captions of fields (eg First Name, Last Name) */
     font-size: 16pt;
     .field-element {
       /* Text in the field boxes (First Name, Last Name) */
       font-size: 28pt;
     }
   }
   .field-element {
     /* Text in the field boxes (inc placeholder text) */
     font-size: 20pt;
     /* Shading colour of all boxes */
     background: #F9FFE5;
   }
 }  
}


Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 5 months later...

This is so great!

which part of this would control the "answer" text in a form field question? For example, choosing "yes" or "no" in a multiple choice question - the answers themselves, i.e. "yes" and "no" are still in a tiny font. I have been unsuccessful in changing them using this code and am probably missing something.

You can see an example here:http://www.highcountrycaregiverfoundation.org/program-events/day-break-tues-9-6-2016

see the question "will your care recipient be attending?"

Link to comment

Checkboxes are field options. You can change them with something like this:


.form-wrapper .field-list .field .option {
   font-size: 16px;
}


Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 1 month later...
  • 7 months later...

Archived

This topic is now archived and is closed to further replies.

Guest
This topic is now closed to further replies.
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.