Hey all,
What’s the go with native out of the box form styling? My newsletter signup page mailinglist has a form that is WAY too big on desktop: oversized input fields, oversized text, even worse on mobile (the fields keep their height but width is reduced so you can’t add a name without it overflowing the field.
How can I style this to be like every other form on the internet that isn’t an eyesore?
(Marketing Starter Plan)
Thanks 
Hey @LMetherall - thanks for posting in the Community!
Just to clarify - have you adjusted any of the form’s styling that would have impacted this? And as a follow-up, are you able to provide a screenshot of just the settings for this form so that users can compare what you currently have to what the defaults are? I want to be sure we get as much context as possible to get you some support!
Shane, Senior Community Moderator
Those are defaults of the Elevate theme, not the forms themselves. You can change the label text size in the Theme Setting’s Forms section, but they don’t have any options to change the field sizes. They’re using pretty strict selectors for applying the padding so unfortunately even changing it in the form editor won’t override this. You would have to apply some custom CSS in the Head HTML of your site or use a different theme.
Thanks Alyssa 
@alyssamwilie got any tips for overriding theme CSS? I’m workign with ChatGPT and we haven’t been able to input any CSS that will bring the form in, it’s still rendering across the screen.
Hi @LMetherall, thanks for asking the HubSpot Community!
- Which HubSpot theme are you using for the form? (Is it Elevate?)
- What CSS have you tried, and where did you add it?
- How is the form embedded (module, HTML, etc.), and can you share a link or screenshot?
The more info, screenshots (without sensitive/confidential information), and details you can provide, the better the Community can assist.
Let’s consult with our Top Experts: Hi @evaldas, @GRajput and @Kevin-C do you have any tips to share with @LMetherall to override the theme CSS, please?
Have a lovely day and thanks so much!
Bérangère
Hi @BérangèreL ,
Thanks for taking the time with this. It turns out ChatGPT was able to generate CSS that did bring in the width after 3 attempts.
Setup:
Elevate Theme
HubSpot landing page and form embedded on page
Page Preview:
CSS:
<style>
/* ===== Force compact width for ANY HubSpot form module on this page ===== */
/* 1) Constrain the FORM MODULE WRAPPER itself */
.dnd-section .row-fluid div[id^="hs_cos_wrapper_"].hs_cos_wrapper_type_form,
.dnd-section .row-fluid .widget-type-form,
div[id^="hs_cos_wrapper_"].hs_cos_wrapper_type_form {
max-width: 520px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
display: block !important;
}
/* 2) Also constrain the actual <form> tag, in case the wrapper keeps stretching */
div[id^="hs_cos_wrapper_"].hs_cos_wrapper_type_form form.hs-form,
.widget-type-form form.hs-form,
.hs-form {
max-width: 520px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 3) Tighten spacing + field sizing (kept from earlier) */
.hs-form .hs-form-field { margin: 10px 0 !important; }
.hs-form label, .hs-form .hs-field-desc {
font-size: 14px !important; line-height: 1.3 !important; margin-bottom: 4px !important; font-weight: 600 !important;
}
.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="url"],
.hs-form input[type="number"],
.hs-form select,
.hs-form textarea,
.hs-form .hs-input {
font-size: 14px !important; line-height: 1.4 !important;
padding: 8px 12px !important;
min-height: 40px !important; height: auto !important;
border-radius: 6px !important; box-shadow: none !important;
}
.hs-form textarea { min-height: 110px !important; resize: vertical !important; padding: 10px 12px !important; }
.hs-form .inputs-list { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px 16px !important; }
.hs-form .hs-button { height: 40px !important; padding: 0 18px !important; border-radius: 6px !important; font-weight: 600 !important; }
/* 4) Extra-large screens: even narrower */
@media (min-width: 1200px) {
div[id^="hs_cos_wrapper_"].hs_cos_wrapper_type_form,
.widget-type-form,
.hs-form { max-width: 600px !important; }
}
/* 5) Mobile: allow full width and single-column choices */
@media (max-width: 600px) {
.hs-form { max-width: 100% !important; }
.hs-form .inputs-list { grid-template-columns: 1fr !important; }
}
</style>
Hi @LMetherall and thanks for sharing your update and the CSS solution!
Glad to hear you got the styling working with ChatGPT’s help.
If you have any other questions or want to share more tips, feel free to post!
Have a wonderful day! 
Bérangère