How can I add a scroll-down effect to long forms in HubSpot?

Developer Support CMS Development
1

How will i add a scroll down effect. Our waiver is too long enough

2

HI @rhence, For a long waiver, the usual approach is wrapping the text in a scrollable container rather than trying to scroll the whole page: give the waiver’s containing div a fixed max-height (e.g. max-height: 300px; overflow-y: scroll;) in your module or page’s custom CSS.

If this is inside a HubSpot form’s consent/legal text module, you may need to add that CSS directly in the module’s custom CSS field or your theme’s stylesheet, since form legal text doesn’t scroll by default. Is this on a landing page, a form’s terms text, or a custom module? That’ll determine exactly where to add the CSS.

3

This is on our form! Where to find css on form?

4

This form will be put on our website through wix builder

5

Since this is a HubSpot form (even though it’s embedded via Wix), the CSS goes on the form itself, not the Wix page: in HubSpot, go to Marketing > Forms > your form > Style and preview tab, there’s a Custom CSS section there (Marketing Hub Professional+ needed for this). Target the legal/consent text field’s class specifically (inspect it in browser dev tools to get the exact class name) and add the max-height/overflow-y scroll rule to that. Since the form is embedded via script on Wix, the CSS you set in HubSpot’s form editor carries over with the embed, you don’t need to touch Wix’s own styling at all.

6

image
image1280Ă—750 78.3 KB
where can i find the css section

8

Hi @rhence and thanks for reaching out to the HubSpot Community! And thanks @TeeTech for your contributions.

Regarding the scroll-down effect, I’ve found this similar topic that might help: " Scrolling text box in HubSpot form ".

As for the question regarding where to add the CSS, can you please confirm @rhence if that is indeed a HubSpot form on an external website hosted on Wix, so that we can help you the best we can.

I’d love to put you in touch with our Top Experts: Hi @Anton and @zach_threadint do you have any tips to help @rhence, please?

Thanks so much and have a wonderful day!
Bérangère

9

thanks where to find the css section in forms

10

Hey @rhence,

since you’re using the new forms (not legacy forms) it’s a whole different approach - to put it easy:

You will have a very hard time modifying the new forms as customization is a pain in the back.

They’re build upon CSS variables and are just aweful if you want to do a bit more than the styling options HubSpot provides.
At least for now. I truly hope, that HubSpot will implement the same (developer) customization options as in legacy forms at some point in the future.

If you want to stick with the current form builder, split the options into several steps, use conditional logic to show/hide fields based on selected options…

If you want to use the legacy forms, it’s much easier

Grab the form embed code (will only work with legacy forms) and modify it like this

from:

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "123456789", // replace this with your actual HubID
    formId: "xxxxxx-xxxx-xxxxxx-xxxxxx",
    region: "na1"
  });
</script>

to

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "123456789", // replace this with your actual HubID
    formId: "xxxxxx-xxxx-xxxxxx-xxxxxx", // replace this with your FormID
    region: "na1",
    css: "" // adding this removes the default HubSpot form styling
    cssClass: "myForm" // add a custom CSS class to the form
  });
</script>

Once done, look into Wix and find your CSS file(s).

In this file, you can add something like

.myForm form{
   max-height:400px; 
   overflow-y:auto;
}

and you can (and should) add some input styles to the CSS as it might happen that the forms won’t be styled correctly.

My recommedation if you’re not a developer:
Give the AI chat of your choice a URL of a page which includes a form with the desired look&feel of the inputs and a URL of a HubSpot form. And let it handle the CSS creation for you.
Prompt it something like this

You’re a seasoned senior Frontend developer.
I need your help by creating a custom style for my forms.
I’m switching from Wix forms to HubSpot legacy forms and I need you to help me generate the CSS code so that the HubSpot forms look like the Wix forms.
This is my wix form design [URL-to-the-page-with-the-desired-form-styling]
this is the current HubSpot form design [URL-to-the-page-with-the-current-HubSpot-form-styling]

For reference, this is how my modified legacy form embed code looks like
[form-embed-code]
I’m wrapping the form in the class “myForm” so it doesn’t interfere with other forms.
If you need more instructions, ask me.
Another reference:

best,
Anton