Community Discussions

HubSpot Sales

HubSpot Agency Partner Kick-Off

HubSpot Marketing

COS Design

HubSpot Ideas

Search, post, and collaborate on how we can improve HubSpot products

HubSpot Agency Partner Kickoff 2017 Q&A


Support Resources

Internal Knowledge Base

Showing results for 
Search instead for 
Did you mean: 
0 Kudos

Update HubSpot Form's outputted code to include class for type of field

It would be great if the outputted HTML for HubSpot forms included a class for the type of field being used in the div that has the class "hs-form-field".


Our clients ALWAYS want adjustments to the styling for forms and it'd make it much easier to have a class on the wrapper for fields like select boxes submit buttons etc. Allowing us developers to do things like style select boxes without having to target a specific field "internal name". Currently for every select field in a form we have to update the CSS to include each select field's internal name. This is critical for styles that require things like :after 's 

<div class="hs_topic field hs-form-field" data-reactid=".hbspt-forms-0.0:$0.1:$topic"><label class="" placeholder="Enter your Topic" for="topic-80038a99-298e-4f33-9784-cb569ca71f93_7369" data-reactid=".hbspt-forms-0.0:$0.1:$topic.0"><span data-reactid=".hbspt-forms-0.0:$0.1:$topic.0.0">Topic</span><span class="hs-form-required" data-reactid=".hbspt-forms-0.0:$0.1:$topic.0.1">*</span></label><legend class="hs-field-desc" style="display:none;" data-reactid=".hbspt-forms-0.0:$0.1:$topic.1"></legend><div class="input" data-reactid=".hbspt-forms-0.0:$0.1:$topic.$topic"><select id="topic-80038a99-298e-4f33-9784-cb569ca71f93_7369" required="" class="hs-input invalid error" name="topic" data-reactid=".hbspt-forms-0.0:$0.1:$topic.$topic.0"><option value="" disabled="" selected="" data-reactid=".hbspt-forms-0.0:$0.1:$topic.$topic.0.0">Please Choose a Topic</option><option value="General Inquiry" data-reactid=".hbspt-forms-0.0:$0.1:$topic.$topic.0.1:$General Inquiry">General Inquiry</option></select></div><ul class="hs-error-msgs inputs-list" style="display:block;" data-reactid=".hbspt-forms-0.0:$0.1:$topic.3"><li data-reactid=".hbspt-forms-0.0:$0.1:$topic.3.$0"><label data-reactid=".hbspt-forms-0.0:$0.1:$topic.3.$0.0">Please select an option from the dropdown.</label></li></ul></div>

Bonus Points:
Add a class field here - which would add a class to the hs-form-field div for the specific field
Screenshot of where I'm talking about: