Embedding a HubSpot form directly in your WordPress theme’s template file gives you full control over placement and structure – but what about styling?
In this guide, you’ll learn how to override the default HubSpot form styles and apply your own CSS while maintaining responsiveness and accessibility.
HubSpot forms are loaded asynchronously via JavaScript, which means their content is injected after page load – this has important implications for styling.
If you haven’t integrated HubSpot with your WordPress site yet, check out the full guide: Integrating HubSpot with WordPress.
Step 1: Embed the Form in Your Template
First, ensure your form is correctly embedded. You can use the following PHP snippet in your theme’s template file (e.g. single.php, page.php):
Always add custom code to a child theme or MU-Plugin. Never edit the parent theme’s template files directly, as your changes will be lost on the next theme update.
<?php
echo '<script src="https://js.hsforms.net/forms/embed/v2.js" type="text/javascript"></script>';
echo '<script>
hbspt.forms.create({
region: "na1",
portalId: "YOUR_PORTAL_ID",
formId: "YOUR_FORM_ID"
});
</script>';
?>Replace YOUR_PORTAL_ID and YOUR_FORM_ID with the actual values from your HubSpot account.
Step 2: Add a CSS Wrapper Around the Form
Since HubSpot injects the form asynchronously, you can’t directly target its inner elements using standard markup. To scope your styles, wrap the embed code in a container with a custom class:
<div class="custom-hubspot-form">
<?php
echo '<script src="https://js.hsforms.net/forms/embed/v2.js" type="text/javascript"></script>';
echo '<script>
hbspt.forms.create({
region: "na1",
portalId: "YOUR_PORTAL_ID",
formId: "YOUR_FORM_ID",
target: ".custom-hubspot-form"
});
</script>';
?>
</div>The target parameter tells HubSpot exactly where to inject the form, ensuring it renders inside your wrapper div.
Step 3: Use the css Parameter to Disable Default HubSpot Styles (Optional)
HubSpot allows you to disable its default styles by adding the css parameter and setting it to an empty string. This gives you full control to apply your own styles from scratch:
hbspt.forms.create({
region: "na1",
portalId: "YOUR_PORTAL_ID",
formId: "YOUR_FORM_ID",
target: ".custom-hubspot-form",
version: "V2_PRERELEASE",
css: ""
});Note that using css: "" will completely remove HubSpot’s built-in styles, so make sure to define all your form field styles explicitly in your stylesheet.
Step 4: Write Custom CSS Rules
Now that you’ve scoped the form with a wrapper class, you can target it from your theme’s CSS file (e.g. style.css):
.custom-hubspot-form input[type="text"],
.custom-hubspot-form input[type="email"] {
border: 2px solid #222;
padding: 10px;
width: 100%;
font-size: 16px;
}
.custom-hubspot-form .hs-button {
background-color: #0073e6;
color: #fff;
padding: 12px 24px;
border: none;
border-radius: 4px;
font-weight: bold;
cursor: pointer;
}
.custom-hubspot-form .hs-form-required {
color: red;
font-weight: bold;
}Step 5: Dealing with Specificity
HubSpot loads its own default styles, which may override yours. If your custom styles aren’t taking effect, try increasing specificity or adding !important as a last resort:
.custom-hubspot-form input[type="text"] {
border: 2px solid #000 !important;
}A better approach is to increase selector specificity by chaining classes or targeting parent elements, so you avoid relying on !important.
Step 6: Load CSS Responsibly
To keep things maintainable, enqueue a dedicated stylesheet via functions.php rather than adding inline styles:
function custom_hubspot_form_styles() {
wp_enqueue_style(
'hubspot-custom-style',
get_stylesheet_directory_uri() . '/css/hubspot-form.css'
);
}
add_action( 'wp_enqueue_scripts', 'custom_hubspot_form_styles' );For a deeper understanding of how to properly load CSS and JavaScript files in WordPress, check out the guide on how to enqueue scripts and styles in WordPress.
Note the use of get_stylesheet_directory_uri() instead of get_template_directory_uri() – this ensures the path points to the child theme directory if you’re using one.
FAQs
Common questions about customizing HubSpot form CSS in WordPress:
!important as a last resort.css: "" in the hbspt.forms.create() call removes all of HubSpot's built-in form styles. This gives you a blank canvas to apply your own CSS from scratch, but you'll need to style every element yourself, including inputs, labels, buttons, and error messages.target parameter specifies a CSS selector where the form should be injected into the DOM. By setting it to a wrapper element with a custom class (e.g. .custom-hubspot-form), you control exactly where the form appears and can scope your CSS styles to that container.get_stylesheet_directory_uri() when working with a child theme. This function returns the path to the active child theme's directory. get_template_directory_uri() always returns the parent theme's directory, so your CSS file won't be found if it's in the child theme.onFormReady callback fires after the form is fully loaded and rendered in the DOM. You can use it to add classes, modify attributes, or apply inline styles to form elements that aren't accessible until the form finishes loading.Summary
Customizing HubSpot forms embedded via WordPress template files gives you full visual control. Wrapping the form in a container with a custom class and targeting it with scoped CSS is the most reliable and future-proof approach. For advanced control, you can also hook into HubSpot’s onFormReady callback to manipulate form fields after load.
