Customize HubSpot Form CSS in WordPress Templates

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 our 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):

<?php
// Replace YOUR_PORTAL_ID and YOUR_FORM_ID with actual values from HubSpot
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>';
?>

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>

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;
}

Step 6: Load CSS Responsibly

To keep things maintainable, load your styles via style.css or enqueue a dedicated stylesheet via functions.php:

// functions.php
function custom_hubspot_form_styles() {
  wp_enqueue_style('hubspot-custom-style', get_template_directory_uri() . '/css/hubspot-form.css');
}
add_action('wp_enqueue_scripts', 'custom_hubspot_form_styles');

Final Thoughts

Customizing HubSpot forms embedded via template files gives you full visual control – just be mindful of how HubSpot injects its markup. Wrapping the form in a container and targeting that with your CSS is the most reliable and future-proof approach.

Want to go even further? You can also use JavaScript to manipulate HubSpot fields after load, or hook into its onFormReady callback for advanced control.