CSS After Form Submit

Here’s how to do it:

### ✅ Updated JavaScript Code:

<script>
  hbspt.forms.create({
    portalId: "<?php echo $whitepaper['hubspot_portalId']; ?>",
    formId: "<?php echo $whitepaper['hubspot_formId']; ?>",
    cssClass: "my-hubspot-form",
    onFormSubmitted: function($form) {
      // Example: Change color and font size of <p> tags
      $form.find('p').css({
        'color': 'green',
        'font-size': '16px',
        'font-weight': 'bold'
      });
    }
  });
</script>

### 💡 Notes:
– This uses jQuery-style syntax because HubSpot loads jQuery by default.
– You can modify the `css` properties as needed (like `margin`, `padding`, etc.).
– If you want this styling to apply permanently after the form is submitted, this is the correct hook.

Let me know if you want a **vanilla JavaScript** version or want to **target specific “ tags** only (like thank-you messages).

### 🔒 Why it doesn't work:
HubSpot's iframe content is served from a different origin (like `https://forms.hubspot.com`), and browsers block access to its internal DOM for security reasons.

—

### ✅ Possible Solutions:

#### **Option 1: Use HubSpot's built-in customization**
Use the `cssClass` option (which you already added) to scope styles before submission. Unfortunately, post-submission messages are also inside the iframe and **cannot be styled directly** from outside.

#### **Option 2: Customize the thank-you message in HubSpot**
Go to your **HubSpot form settings**:
1. Edit your form in HubSpot.
2. Choose **"Thank you message"** as the submission type.
3. Use the built-in editor to style the message:
– You can add “ tags, font sizes, etc.

#### **Option 3: Use a redirect instead**
Instead of a thank-you message, configure the form to redirect to a custom thank-you page **on your domain**, which you control. Then you can style everything freely.

—

### ❌ Not Possible:
– You **cannot** apply styles via JavaScript or CSS from your page to that thank-you message inside the iframe.

—

If you'd like, I can help you:
– Style the redirect thank-you page.
– Write inline styles for the thank-you message HTML you can paste in HubSpot.
– Or guide you to load the PDF via AJAX on your own page after HubSpot form submission.

Let me know which route works best for you.

### ✅ Workaround Options:

#### 🔹 1. **Customize via HubSpot Form Options** (If you control the form in HubSpot portal):
If you have access to the **HubSpot form editor**, you can:

– Go to the form settings.
– Customize the **Thank You message** using their rich text editor.
– Add inline styles to the “ tags, like this:

<p style="color:#c01734; font-size:18px;">Thank you for your interest.</p>
  <p style="color:#000; font-size:16px;">Please <strong><a href="#">click here</a></strong> to access the whitepaper.</p>

#### 🔹 2. **Custom Thank You Page** (Recommended)
Instead of a default thank you message inside the iframe, **redirect the user to a custom thank you page**:

– In HubSpot form settings, under **"Options" > "What should happen after a visitor submits this form?"**, select:
> ✅ Redirect to another page

– Then use your own page like:

/thank-you?download=whitepaper

There, you can fully control and style everything.

#### 🔹 3. **CSS Inside HubSpot Portal (Limited)**
If you have access to the HubSpot portal's **form embed** or **theme settings**, you may add CSS to apply to the submitted message class (`.submitted-message p`) *within the theme or global stylesheet*, but this will only apply if the form is hosted on a HubSpot page, not inside an iframe on an external site.

—

### ⚠️ Why can't we style iframe contents from outside?
Browsers block access to iframe contents if the iframe source is from a different origin (like `*.hubspot.com`) for **security** reasons (Same-Origin Policy). So `document.querySelector('iframe').contentDocument` will not work on the HubSpot form.

—

Let me know if you want help designing a custom thank-you page or if you'd like to request a styled version to paste into your HubSpot portal.

### ✅ What you can still do:

Here’s the **corrected and improved** version of your script to **add styling to the container wrapping the iframe**, but note — it **won’t affect the iframe content** directly.

<script>
  hbspt.forms.create({
    portalId: "<?php echo $whitepaper['hubspot_portalId']; ?>",
    formId: "<?php echo $whitepaper['hubspot_formId']; ?>",
    cssClass: "my-hubspot-form",
    onFormSubmitted: function($form) {
      // You cannot access the iframe content here due to cross-origin restrictions
      console.log("Form submitted");

      // Optional: Add a class to the form wrapper to trigger other custom behavior or styling
      $form.closest('.my-hubspot-form').addClass('form-submitted');
    }
  });
</script>

<style>
/* This only affects your page, not the iframe content */
.my-hubspot-form.form-submitted {
  border: 2px solid #28a745;
  padding: 20px;
}
</style>

—

### 🔄 What to do instead:

#### ✅ **Option 1: Use Redirect to Thank You Page (Best Option)**
– In HubSpot form settings → **Options** → "What should happen after form submission?"
– Choose → ✅ "Redirect to another page"
– Create your own page like `/thank-you-whitepaper` where you **fully control and style** the “ tags.

#### ✅ **Option 2: Style inside HubSpot**
If you're allowed to **edit the thank-you message** from HubSpot form editor:
– Add inline styles to the “ elements right there.

Example:

<p style="color: green; font-size: 16px;">Thank you for your interest.</p>
<p>Please <strong><a href="#" style="color: red;">click here</a></strong> to access the whitepaper.</p>

Let me know if you want help with the thank-you page layout or styling inside HubSpot.