Adjusting HubSpot form width in OceanWP and Elementor

Other Questions HubSpot
1

Hi everyone! I’m struggling with HubSpot forms on my website. They’re only showing up in a third of the column width. I’ve tried adding CSS to the OceanWP theme’s stylesheet and Elementor’s CSS injectors, but no luck.

I’m not a CSS expert, so I’m a bit lost. Here’s what I’ve attempted:

.custom-form .form-wrapper fieldset {
  margin: 0 auto;
  max-width: none !important;
}

This didn’t work, though. The forms are still narrow. Any ideas on how to make them full-width? I’d rather not create a child theme if possible.

Thanks for any help you can offer!

2

I’ve dealt with similar issues when integrating HubSpot forms into WordPress sites. In my experience, the problem often lies in conflicting CSS rules or specificity issues. Have you tried inspecting the form elements using your browser’s developer tools? This can help pinpoint which styles are being applied and where they’re coming from.

One approach that worked for me was targeting the HubSpot form container directly and setting its width to 100%. Something like this:

.hs-form-iframe {
width: 100% !important;
max-width: 100% !important;
}

If that doesn’t do the trick, you might need to adjust the parent container’s width as well. It’s possible that the column itself is restricting the form’s width.

Also, make sure your CSS is being loaded after HubSpot’s styles. Sometimes, the order of stylesheet loading can affect which rules take precedence. If you’re still stuck, consider using a plugin like ‘Simple Custom CSS and JS’ to ensure your styles are applied last.

3

Have you considered using the !important declaration more aggressively? Sometimes third-party plugins like HubSpot can be stubborn with their default styles. Try this CSS:

.hs-form, .hs-form-iframe, .hs-form-container {
width: 100% !important;
max-width: 100% !important;
}

.hs-form .form-columns-1, .hs-form .form-columns-2, .hs-form .form-columns-3 {
max-width: none !important;
}

If that doesn’t work, the issue might be with Elementor’s column settings. Check if the column housing your HubSpot form has a specific width set. You may need to adjust the column width to 100% in Elementor’s settings.

Lastly, ensure you’re not accidentally limiting the form width elsewhere in your theme or Elementor settings. Sometimes, global width constraints can override local CSS.

4

I’ve encountered this issue before when working with HubSpot forms in WordPress. One solution that worked for me was to target the iframe directly. Try adding this CSS to your Elementor custom CSS:

.hs-form-iframe {
width: 100% !important;
min-width: 100% !important;
max-width: none !important;
}

If that doesn’t solve it, the problem might be with the parent container. Check the column settings in Elementor and make sure it’s set to full width. Also, inspect the form using browser dev tools to see if there are any conflicting styles.

Another trick is to use the ‘Simple Custom CSS and JS’ plugin to ensure your styles are loaded last and override any default HubSpot or theme styles. This way, you can avoid creating a child theme while still having full control over your form’s appearance.

5

hey mate, i had the same prob with hubspot forms. try this css:

.hs-form-iframe, .hs-form {
width: 100% !important;
min-width: 100% !important;
}

add it to elementor’s custom CSS for the section. worked for me. if not, check if theres any weird padding or margin on the column. good luck!