Jump to content

Changing the sizes of the text for Form Field Options

Go to solution Solved by creedon,

Recommended Posts

  • Replies 19
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  .form-wrapper .field-list .field .option {
  
    font-size : large;
    
    }
    
  </style>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...
15 hours ago, kentbateman1 said:

How would you accomplish the same thing for the "Description" text

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
On 1/31/2023 at 5:41 AM, kentbateman1 said:

How would you accomplish the same thing for the "Description" text

Add the following to Page Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  .form-wrapper .field-list .description {
  
    font-size : large;
    
    }
    
  </style>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1 month later...

Hey Creedon - I am trying to increase the wording for First Name and Last Name; see attached.
I tried by adding your code: to the header on code injection but it did nothing to the First Name and Surname - any other ideas?
 

<style>

  .form-wrapper .field-list .description {
  
    font-size : large;
    
    }
    
  </style>

form field.png

Edited by curlybirdie21
Link to comment
14 hours ago, curlybirdie21 said:

I am trying to increase the wording for First Name and Last Name

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
On 3/31/2023 at 2:34 AM, curlybirdie21 said:

I tried by adding your code: to the header on code injection but it did nothing

Descriptions are a bit different than the field captions.

Add the following to Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  @media
  screen and ( min-width : 768px ),
  screen and ( max-width : calc( 1908px - 1px ) ) and ( orientation : landscape )
  
    {
    
      .sqs-block-form .field-list .caption {
      
        font-size : large !important; /* default : calc( ( 0.8 - 1 ) * 1.2vw + 1rem ) */
        
        }
        
      }
      
  </style>

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Okay Creedon
When I added that code to the Header, the strangest thing has since happened.
I have a coloured shape that features on my bio pages - see https://lysaght.squarespace.com/bio/richard-stilwell (see attached)
The block remained when I added your code, but the colour changed to white.
Nothing changed, even when I went into the shape to edit the colour to turquoise.
I removed the code, and the block returned!
Any ideas?
I've removed your code for now, so you can see what I mean.

block.png

Link to comment
14 hours ago, curlybirdie21 said:

When I added that code to the Header, the strangest thing has since happened.
I have a coloured shape that features on my bio pages

If the code was added to the code injection for the Contact page then there is no way it could affect the bio pages if everything is working on SS's end.

14 hours ago, curlybirdie21 said:

The block remained when I added your code, but the colour changed to white.

Did you add my code to Design > Custom CSS? If so that would mess things up. The code is HTML and only CSS can go in Custom CSS. If you want to install the code in Custom CSS instead of Code Injection for the Contact page then remove the style tag ( <style> and </style> ).

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Ah, okay, I know what I did wrong - I added the code to settings/advanced/code injection when I should have just added it to the specific page. I'll try that now. Can I use this code on the country page too? 

I want this to apply to all the small text, i.e. anywhere with additional guidance, like here for - see attached. The code you supplied me only makes the First Name and Last name bigger, not the other small bits of text.

Can you also explain exactly what I do to the code to make the small text slightly smaller - you say to change it to 16px, but I don't know where you suggest I add it - sorry, I am not any code at code - just copying and pasting it into the necessary pages!

Could you advise on all of the above? thanks so much!

small text.png

Link to comment
On 4/6/2023 at 4:45 PM, curlybirdie21 said:

Ah, okay, I know what I did wrong - I added the code to settings/advanced/code injection when I should have just added it to the specific page. I'll try that now. Can I use this code on the country page too? 

I want this to apply to all the small text, i.e. anywhere with additional guidance, like here for - see attached. The code you supplied me only makes the First Name and Last name bigger, not the other small bits of text.

Can you also explain exactly what I do to the code to make the small text slightly smaller - you say to change it to 16px, but I don't know where you suggest I add it - sorry, I am not any code at code - just copying and pasting it into the necessary pages!

Could you advise on all of the above? thanks so much!

small text.png

Add to Design > Custom CSS

span.caption-text {
    font-size: 14px !important;
}
input.field-element, input.field-element::placeholder {
    font-size: 14px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.