Changing the sizes of the text for Form Field Options

Hi!

I want to increase the size of the fields on my contact form on my website jgraphiccom.com/connect. Specifically under where it says "What Are You Interested In". The text for the options there is a little small. How can I code a larger text size for it?

This is perfect. How would you accomplish the same thing for the "Description" text @creedon?

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.

Hi @creedon. The page in question is citychurchknox.com/groups. 

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.

@creedon that's perfect, thank you! Is the best way to change it site-wide to put it in Design > Custom CSS?

On 2/3/2023 at 6:43 PM, kentbateman1 said:

Is the best way to change it site-wide to put it in Design > Custom CSS?

Yes. When adding code to Custom CSS be sure to remove the <style> and </style> if the code has them.

That first reply with the code worked! Thank you Creedon!

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>

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.

https://lysaght.squarespace.com/contact

Site-wide password: Homepage

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.

Hey Creedon, that worked! Thanks so, so much!
What should I do if I want to reduce the font size slightly as the First Name and Last Name are actually now bigger than the field name = "Name"

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.

14 hours ago, curlybirdie21 said:

What should I do if I want to reduce the font size slightly as the First Name and Last Name are actually now bigger than the field name = "Name"

Use a px size. For example 16px. You can change the number to any number you want.

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

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!

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!

Add to Design > Custom CSS

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

My thanks Tuanphan - that has worked a treat! Any chance you could reply to my other thread we have running atm? 🙂