When embedding forms in web and landing pages - the required field markers drops down to the next line below the label.
Upon inspection, the marker’s span display is showing up as block.
Please check.
Would also appreciate if we can have a setting option to show this or not for required fields in the form editor.
Another thing, there is a forced var padding around the form in the same use case. Please make this optional in the settings.
Hey @LeonardoDVinci,
this might be a theme/CSS issue.
Checked a new form in one of my themes and it’s getting displayed correctly.
Add this to your theme where the forms are being styled
label.hsfc-FieldLabel span span.hsfc-FieldLabel__RequiredIndicator{
display:inline-block !important;
}
best,
Anton
Not sure if this is the correct approach. HubSpot should fix the code when the form is embedded.
Hey @LeonardoDVinci ,
Are you using Classic forms or New React forms?
Regards,
Sorry, it might not be clear on my post - I’m referring to the forms built from the new form builder.
Hi @LeonardoDVinci and thanks for getting back to us!
With the new beta form editor, you might notice some differences from the legacy forms.
Features like custom CSS and jQuery manipulation aren’t fully compatible with forms created in the new editor just yet, as we are still actively developing additional capabilities. This means custom styling may not always behave as expected for now.
For required field markers and padding adjustments:
In the new editor, custom CSS overrides are still limited, but you can use CSS variables such as:
--hsf-field-label-requiredindicator__color to style required indicators
--hsf-background__padding to adjust form padding
If you’re using legacy forms, you have more flexibility and can style elements using standard CSS selectors like .hs-form label or scope your edits with the .hs-inline-edit class.
If you need full control over your form styling, I recommend continuing with the legacy form editor until these developer features are fully rolled out in the new editor.
Also, I’d recommend sharing this via the HubSpot Developer Feedback Form. If you prefer, I can submit it on your behalf, I’d be happy to do so. Just let me know.
I hope this helps!
Bérangère
This post was created with the assistance of AI tools