\
**Category:** CMS Development\
**Tags:** css, html, forms, professional\
**Created:** [September 10, 2022, 4:27pm UTC](https://community.hubspot.com/t/html-form-styling/64840 "2022-09-10T16:27:05Z")\
**Posts on this page:** 4\
**Page:** 1
**Author:**  [@NBraden](https://community.hubspot.com/u/NBraden)\
**Post date:** [September 10, 2022, 4:27pm UTC](https://community.hubspot.com/t/html-form-styling/64840/1 "2022-09-10T16:27:05Z")
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;
}
---
**Author:**  [@RJaglan](https://community.hubspot.com/u/RJaglan)\
**Post date:** [September 10, 2022, 6:46pm UTC](https://community.hubspot.com/t/html-form-styling/64840/2 "2022-09-10T18:46:25Z")
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.](https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#with-css-in-your-external-stylesheet-marketing-hub-professional-enterprise-or-legacy-marketing-hub-basic-only)
- Other forms, such as collected forms or lead flows, do not support these customization options.
---
**Author:**  [@NBraden](https://community.hubspot.com/u/NBraden)\
**Post date:** [September 10, 2022, 6:59pm UTC](https://community.hubspot.com/t/html-form-styling/64840/3 "2022-09-10T18:59:51Z")
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)?
---
**Author:**  [@RJaglan](https://community.hubspot.com/u/RJaglan)\
**Post date:** [September 10, 2022, 8:54pm UTC](https://community.hubspot.com/t/html-form-styling/64840/4 "2022-09-10T20:54:03Z")
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 \ 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 _f **orm 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](https://knowledge.hubspot.com/forms/form-in-the-wrong-place-on-external-page)**