Problems with using our existing CSS classes in HubSpot forms

[Lucy1]

Hi,

I am trying to use existing CSS classes from our code in a HubSpot form. For example, below is the HubSpot generated code for the form where I added cssClass to apply classes that we use but it doesn't do much. I also need to change input fields classes with .hs-form input[type="text"] but can't seem to apply changes since ours .input CSS class is huge with subclasses and referenced in many places.

This is the HubSpot generated form:

<!--[if lte IE 8]>
            <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
            <![endif]-->
            <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
            <script>
              hbspt.forms.create({ 
                css: '',
                portalId: '2408214',
                formId: '87646e62-f797-4b41-b411-c69a6b13117e',
                cssClass: 'col-xs-12 col-md-8 col-lg-6 no-float'
              });
            </script>

And this is our old form which I need to replicate with the HubSpot form:

<form id="trialregister" action="" method="POST" class="col-xs-12 col-md-8 col-lg-6" style="float: none; margin: 0 auto;">
              <input id="register_name" type="text" placeholder="Your name" required class="cover__form__item--05 input input--snow">
              <input id="register_email" type="email" placeholder="Your email" required class="cover__form__item--05 input input--snow">
              <input id="register_phone" type="text" placeholder="Your phone number" required class="cover__form__item--05 input input--snow">
              <button type="submit" class="cover__form__item--05 button button--blue button--small-radius">Start now</button>
</form>

Any help would be much appreciated.

[Jsum]

@Lucy1,

You can't add classes to fields in the hubspot for, however hubspot already has classes added. Use the inspector tool (ctl+shift+i, cmd+shift+i, or right click and inspect element) and click on the form inputs to inspect the code. You will see all kinds of wrappers, inputs, etc. all will have generic and specific class names that you can use. You won't find the code in your source code (view source, ctl_u). I'm not going to pretend to know why that is but instead of the html you get the code you shared. The inspector will give you the html though.