topic Re: Change Size of Form Field Help Text? in CMS Development

Change Size of Form Field Help Text?

lindsay_s_Chi — Thu, 26 Jul 2018 15:29:02 GMT

Hi everyone!

Same situation - Hubspot Design rookie here, not sure where I would fix this.

For this landing page:

https://www.paro.io/partner-vc?hs_preview=CArkrymk-5967192896

Trying to change the size/style of the Help Text underneath the "Which firm referred you to Paro?" field? Not sure where/how exactly to put in the new style *just* for the help text. Can anyone point me in the right direction where exactly I'd make this change, and perhaps provide some sample code?

Re: Change Size of Form Field Help Text?

Stephanie-OG — Thu, 26 Jul 2018 15:41:27 GMT

Hi Lindsay,

If you go to your Design Manager and search for the Act2.css file, then use Ctrl + F to search for "legend" within the file, you should see something like this (it may all be on one line as well):

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}

You can use font-size to set the font size, like this (I've used 12px as an example):

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
    font-size: 12px;
}

Note that this will update the font-size for all "legend" items across your site.

Stephanie O'Gay Garcia
HubSpot Design / Development / Automation
Website | Contact

Re: Change Size of Form Field Help Text?

lindsay_s_Chi — Thu, 26 Jul 2018 16:00:21 GMT

Hey Stephanie!

Thanks for this!

Two follow up questions:

1) Since I don't necessarily want to update it for *everyone* (I'm a contractor and don't want to mess with their main mojo), is there a way to update it for just my form? (or copy that .css file to a new one, attach it to my template only?)

2) Will that change update all of the text in the form, or just the help text? I only want to update the help text, and I want to leave all other text as-is (the help text is what appears under the question)

Thank you!

Lindsay

Re: Change Size of Form Field Help Text?

Stephanie-OG — Thu, 26 Jul 2018 16:17:26 GMT

Hi Lindsay, there are a few ways of doing it.

You could add in CSS that just applies to this page by going to Settings > Advanced Options > Head HTML and adding:

<style>
  legend { font-size: 12px; } 
</style>

This will only apply to this page and only to legend elements (the "This will ensure you receive the appropriate partner discount." is the only legend element on this page).

Stephanie O'Gay Garcia
HubSpot Design / Development / Automation
Website | Contact

Re: Change Size of Form Field Help Text?

lindsay_s_Chi — Thu, 26 Jul 2018 17:00:52 GMT

That did the trick, thank you Stephanie!