Remove frame from scheduling meeting embed

[ventit1]

Context: We would like to use HubSpot meeting form on our integrations page and would like them to look similar to Amaka and Bookkeeper

.
Right now we created the meeting form, connected to calendar and set up it with an embed code, however it doesn't look the same (additional Frame added). We tried to make changes inside HubSpot setting, but there's nothing to set up it. Also I tried to change css styles with !important, but this is the first time in my life it didn't work. Can someone help resolving it please?

Test page: https://integrations-d4924c.webflow.io/xero-afterpayn
Screenshot: 1st form is from our sales team that has to be inserted without additional frame, 2nd one is mine with no frame initially (exactly how it should look like)

[ventit1 · Accepted solution]

So I sloved it with a simple code. The thing is to make styles BEFORE js hubspot script builds the iframe. Here is the embed worked: <div class="meetings-iframe-container" data-src="https://meetings.hubspot.com/synder/intro-call-with-synder-team-integrations?embed=true">
<iframe src="https://meetings.hubspot.com/synder/intro-call-with-synder-team-integrations?embed=true" width="100%" data-hs-ignore="true" style="min-width: 312px; min-height: 615px; height: 715px; border: none;"></iframe>
</div>
<script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>

[OllyB]

---

@ventit1 wrote:

Context: We would like to use HubSpot meeting form on our integrations page and would like them to look similar to Amaka and Bookkeeper

.
Right now we created the meeting form, connected to calendar and set up it with an embed code, however it doesn't look the same (additional Frame added). We tried to make changes inside HubSpot setting, but there's nothing to set up it. Also I tried to change css styles with !important, but this is the first time in my life it didn't work. Can someone help resolving it please?

Test page: https://integrations-d4924c.webflow.io/xero-afterpayn
Screenshot: 1st form is from our sales team that has to be inserted without additional frame, 2nd one is mine with no frame initially (exactly how it should look like)

---

Embedding HubSpot meeting forms often results in an iframe that can be challenging to style due to its isolation from your website's CSS. To achieve a seamless integration similar to Amaka and Bookkeeper, consider the following approaches:

1. Use Raw HTML Forms: HubSpot allows you to embed forms as raw HTML, which enables direct styling without the constraints of an iframe. To implement this:

   • In your HubSpot account, navigate to the form you wish to embed.
   • Access the embed code and look for an option to render the form as raw HTML.
   • Embed this code into your webpage.

   By embedding the form as raw HTML, you can apply your custom CSS directly to the form elements, ensuring consistent styling with your website.

   HubSpot Community

2. Adjust the Embed Code: If using raw HTML isn't feasible, you can modify the iframe's attributes to better align with your site's design:

   • Set the frameborder attribute to 0 to remove the default border.
   • Use CSS to target the iframe and set border: none; to eliminate any remaining borders.

   These adjustments can help the embedded form blend more naturally with your page's aesthetics.

3. Custom CSS Application: When embedding forms, ensure that your custom CSS is correctly applied:

   • If the form is embedded as an iframe, remember that the iframe's content is isolated from your site's CSS.
   • For raw HTML embeds, apply your CSS classes directly to the form elements.

   This direct application allows for precise control over the form's appearance.

   HubSpot Community

4. Consult HubSpot Resources: HubSpot's community forums and knowledge base are valuable resources for troubleshooting and best practices:

   • Explore discussions on form customization and common issues.
   • Review official documentation for detailed guidance on embedding and styling forms.

   Engaging with these resources can provide insights and solutions tailored to your specific needs.

By implementing these strategies, you can enhance the integration of HubSpot meeting forms into your website, achieving a cohesive and professional appearance.

[ventit1]

1 - This isn't a form, but meeting scheduler, there;s no raw html option.

2 - Didn't work

3 - Again, not raw HTML, but iframe

4 - It's what I'm doing right now :))))