Hi @luancampos
You’re facing a common issue with HubSpot forms, especially when they’re added to websites outside of HubSpot. These forms come with built-in styles and container elements that can interfere with your own CSS settings, even if you’ve used width: 100% and box-sizing: border-box. The “invisible container” you’re seeing is probably a fieldset or another wrapper element with a max-width set by HubSpot.
Why This Happens:
- HubSpot’s Built-In Styles: HubSpot automatically applies CSS to its forms. This often includes things like max-width on fieldset, .hs-form-field, or even the entire form, which can stop your fields from stretching to full width.
- CSS Specificity: HubSpot’s styles might be more specific than yours, so even if you’re using width: 100%, their code takes priority.
- Embedded as an iframe: If the form is embedded using an iframe (which HubSpot often does), your site’s CSS can’t directly affect the form’s styles inside that iframe.
How to Fix It:
To make your form fields fill the full width, you’ll need to target the right elements in your site’s CSS and use !important to override HubSpot’s styles. Also, make sure your CSS loads after HubSpot’s.
Use your browser’s “Inspect Element” tool to find the exact classes HubSpot uses. The most common ones are:
- .hs-form — the whole form
- fieldset — wraps groups of fields
- .hs-form-field — individual field containers
- .hs-input — input, select, and textarea elements
- You can also target basic input types like: input[type=“text”], input[type=“email”], textarea, select
Sample CSS to Add to Your Site (not inside HubSpot):
/* General form elements */
.hs-form,
.hs-form fieldset,
.hs-form .hs-form-field,
.hs-form .hs-input,
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form textarea,
.hs-form select {
width: 100% !important;
max-width: 100% !important; /* Crucial to override any max-width */
box-sizing: border-box !important; /* Ensure consistent box model */
}
/* Remove any specific margin/padding that might cause shrinking */
.hs-form .hs-form-field {
margin-right: 0 !important;
margin-left: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
/* For multi-column forms, you might need to adjust these */
.hs-form .form-columns-1 .hs-form-field {
width: 100% !important;
}
.hs-form .form-columns-2 .hs-form-field {
/* Adjust for two columns, accounting for spacing */
width: calc(50% - /* some margin/gap */) !important;
float: left; /* Or use flexbox on the parent if preferred */
}
A Few Things to Keep in Mind:
- Be Specific with Your CSS: The more detailed your CSS selectors are (for example, using .hs-form .hs-input instead of just input), the better chance they have of overriding HubSpot’s built-in styles.
- Using !important: Normally, it’s best to avoid using !important because it can make your code harder to manage later. But in this case—since you’re working with HubSpot’s strong, injected styles—it’s often necessary to get your changes to stick.
- Where You Put Your CSS Matters: Make sure your custom CSS loads after HubSpot’s styles. This usually means placing your CSS in your main theme file (like style.css) or in a custom CSS section of your website builder.
- Turn Off HubSpot’s Default Styles (Advanced Option): If you want full control over how your form looks, HubSpot gives you the option to disable its built-in styles. You can do this by adding css: “” to the form’s embed code. This lets you style everything yourself using your own website’s CSS.
Here’s what the original embed code might look like before making the change:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "YOUR_PORTAL_ID",
formId: "YOUR_FORM_ID"
});
</script>
Modified embed code to disable styling:
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "YOUR_PORTAL_ID",
formId: "YOUR_FORM_ID",
css: "" // Add this line
});
</script>
If you go this route, you’ll need to handle all the styling yourself—from basic fonts and spacing to mobile responsiveness. It can take quite a bit of work, so this option is best if you have a very custom design that really doesn’t work well with HubSpot’s default styles.
- Check the Parent Containers:
Even if your form fields are set to 100% width, they might still be getting restricted by their parent containers—like <div>, <section>, or other wrappers around the form. These might have fixed max-width, padding, or margin that’s stopping the form from stretching fully. Use your browser’s Inspect tool to look through the layout and spot any styles that might be limiting the width.
- Check HubSpot Form Settings:
Don’t forget to review the form settings directly in HubSpot. Even if you’re using custom CSS, HubSpot’s form builder has some basic layout options—like field width and column layout—that can help. Go to the “Style & Preview” tab in the form editor and make sure the form field width is set to Full Width (or something similar), if that option is available. It’s a good starting point before adding more custom code.
How to Debug the Issue:
- Inspect the Form Field: Open your website in a browser, right-click on one of the form fields, and choose “Inspect”. This will open the browser’s developer tools.
- Check the CSS Rules: In the Styles panel, look at the CSS being applied to the input field and its parent elements (like .hs-form-field or fieldset). Focus on any width or max-width properties—especially ones added by HubSpot.
- Find Conflicting Styles: If your custom styles are being ignored, you’ll likely see them crossed out (with a strikethrough). This means HubSpot’s styles are taking priority due to higher specificity.
- Test Fixes in Dev Tools: Try adding width: 100% !important; and max-width: 100% !important; directly in the developer tools to see if that solves the problem.
- Apply Fixes to Your CSS: Once you figure out which elements need adjustments, add those styles to your website’s main CSS file so the fix is permanent.
By targeting the right elements and using !important where necessary, you should be able to make your form fields stretch to fit the full width as expected.
