HTML Form Styling

[NBraden]

Hi everyone,

We have this Salesforce form on the footer of our website:

I'm trying to replace it with a HubSpot form, but I can't get it to look right. The form looks all scrunched and misaligned like this:

If I try increasing the width of the form, then the input containters overlap like so:

Anyone have ideas on how to get it to look like the original? Here's the CSS code I have in there right now which makes it look like the second screenshot:

.hs-form {
display: block;

font-size: 16px;

text-align: center;

text-transform: uppercase;

letter-spacing: 4px;

color: #4386AC;

line-height:30px;

}

.hs-input {

display:block;

Width: 300px !important;

font-family:franklin-gothic, sans-serif;

font-size:18px;

line-height:30px;

color:#ffffff !important;

background-color:#4386AC !important;

border: 2px solid #4386AC !important;

border-radius:5px;

}

.hs-button {

background-color:#005581;

color:#ffffff;

text-transform:uppercase;

font-family:franklin-gothic, sans-serif;

font-weight:bold;

font-size:16px;

padding:10px;

width:200px;

border: 1px solid white;

border-radius:10px;

transition: all 0.3s ease-in-out;

}

.hs-button:hover {

background-color:#DF7A1C;

border: 1px solid #DF7A1C;

cursor:pointer;

}

[RJaglan]

Hi  @NBraden 

I believe in order to custom style your form in CSS you need to take care of these three points: 

• These options are only available for forms created using the marketing form builder in Marketing Hub and CMS Hub Professional or Enterprise subscriptions.
• Forms that have been set as raw HTML. This is a must step as it will deactivate HS default styling.
• Other forms, such as collected forms or lead flows, do not support these customization options.

  As HubSpot forms are built with JavaScript, not HTML therefore you need some additional steps

  
  
  Looking at your code one of the things I saw missing:
  
  hbspt.forms.create(

  { portal Id: '', form Id: '', css Class: '' });

  
  Now I assume that you are the developer therefore please take a look at these two resources in order to custom style your form:
  
  Set-Up and style your form on an external website. 

  Document for developers: How to customize the form embed code! 

  I hope this solves your problem 🙂
  
  

  Best,
  Rahul

[NBraden]

Hi,

I am using the "hbspt.forms.create" stuff you mentioned. I embedded the HubSpot form as a raw HTML form. Now I'm trying to get the HubSpot form (second and third image) to look like the original form we had built through Salesfroce (first image).

The code I posted is the custom CSS code I'm using to style the raw HTML form, but I can't get it to look right. Do you know how to get the input containers to either stop overlapping or getting misaligned (examples in the second and third images)?

[RJaglan]

Hi @NBraden 

Did you try using "target attribute" in your form styling ?

In the form embed code, add a comma (,) after the formId attribute value, then enter a new line and enter target: '[container name]' .For example, you can force the form to render in a container on the page with the CSS class of the sidebar.

Or

Multiple forms embed codes added to same <div> tag

To ensure the forms load and display correctly, add the form InstanceId attribute and specify a unique value for each form embed code.

In the form embed code, add a comma (,) after the form Id attribute value, then enter a new line and enter form InstanceId: '[number]' .It's recommended to number each form in the order it appears on the page (e.g., '1' for the first form, '2' for the second form, etc.).

Please have a look at this article: form-in-the-wrong-place-on-external-page