Apply CSS to HubSpot iframe

<script>
hbspt.forms.create({
                                                        portalId: "<?php echo $whitepaper['hubspot_portalId']; ?>",
                                                        formId:  "<?php echo $whitepaper['hubspot_formId']; ?>"
                                                });
</script>

apply css on p tag returing by above js in iframe

### ✅ Workarounds

#### **1. Use HubSpot's built-in styling options**

If you're using HubSpot's form builder, you can:
– Go to the form editor in your HubSpot portal.
– Edit the form styles (fonts, colors, padding, etc.) directly.
– This is the *recommended* method since the iframe content is served from HubSpot’s domain.

#### **2. Use HubSpot Form’s `cssClass` option**

You can apply a class to the **container div** that holds the form like so:

<script>
  hbspt.forms.create({
    portalId: "<?php echo $whitepaper['hubspot_portalId']; ?>",
    formId:  "<?php echo $whitepaper['hubspot_formId']; ?>",
    cssClass: "my-hubspot-form"
  });
</script>

Then you can target **only the container**, but not the inner “ directly if it's inside the iframe.

#### **3. If using the “raw” form (non-iframe option)**

If you’re embedding the HubSpot form *not via iframe* (using raw HTML option, which is only available in some advanced use cases), then you **can** use regular CSS:

.my-hubspot-form p {
  font-size: 16px;
  color: #333;
}

#### ❌ **Why you can't style inside iframe**

Due to [Same-Origin Policy](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy), CSS in your parent page **cannot reach** inside an iframe that loads content from another domain (like `forms.hsforms.com`).

—

### ✅ Conclusion

If HubSpot's form is in an iframe (default behavior), you must **style the form using HubSpot's own form builder**.

Let me know if you're using a non-iframe form or want to try replacing it with an embedded version you can fully style.

### 🔒 Limitation Recap
You **cannot** do:

// ❌ This will NOT work
document.querySelector('iframe').contentWindow.document.querySelector('p').style.color = 'red';

—

### ✅ What *You Can Do* Instead

#### 1. **Use `cssClass` and style the container (outside iframe)**

<script>
  hbspt.forms.create({
    portalId: "<?php echo $whitepaper['hubspot_portalId']; ?>",
    formId:  "<?php echo $whitepaper['hubspot_formId']; ?>",
    cssClass: "custom-hubspot-form"
  });
</script>

<style>
  .custom-hubspot-form {
    margin-top: 20px;
    text-align: center;
  }
</style>

#### 2. **Style form in HubSpot backend**

Go to your HubSpot form → **Style & Preview** tab → Use the **custom form style options** (font, padding, colors, etc.).

—

### 🚨 If You Really Need Full Control

– HubSpot allows exporting the **raw HTML form** (in some advanced tiers).
– You can copy that and include it in your site directly (not via JS/iframe).
– Then inline CSS like this **will work**:

<p style="font-size: 18px; color: red;">Your paragraph</p>

—

### 🔚 TL;DR
You **cannot apply inline CSS to “ tags inside a HubSpot iframe form**, but:
– You can style the form container using `cssClass`
– You can use HubSpot’s form builder to apply internal styles
– You can use raw HTML embed (not iframe) for full inline control

Let me know if you want to switch to the raw HTML version — I can guide you step-by-step.