How to embed a form without iFrame in WordPress?

[lfxmedia]

We use WordPress for our website and use Hubspot forms to capture our leads.

We started using CallRail to qualify the leads we get through Google Ads and are running into an issue with Hubspot's forms being wrapped in <iframe> 

I have tried using both the <script> that Hubspot provides for the form and using shortcode in WordPress, and both methods have resulted in <iframe> being wrapped around the form. 

I contacted Callrail, and we need to figure out a solution to embed our Hubspot forms without <iframe>

Has anyone encountered this? It is very important that we are able to qualify our leads for Google Ads. We want to continue using Hubspot for all of the obvious reasons. We just need to be able to qualify our leads in Google Ads so we have additional conversion information.

[lfxmedia · Accepted solution]

I am going over the documentation here provided on Hubspot and it looks like I can set the form as raw HTML. I am going to give it a shot, but I believe this should resolve me issue.

https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#:~:t...

[trevordjones · Accepted solution]

Hi @lfxmedia and thanks for the tag @kennedyp !

From my tests on other CMS platforms, embedding the full forms javascript on a web pages does not add an iframe to the page, so this particular function seems to be unique to WordPress you are using. Perhaps the solution @Aakar suggests would solve for this?  I would definitely give it a shot.

[MukeshSaini · Accepted solution]

Hii Ifxmedia, 

To embed a HubSpot form in WordPress without using an iframe, you can consider a few alternative approaches. Unfortunately, HubSpot forms are generally loaded via iframe for better security and consistency. However, you can try a few methods to work around this limitation:

1. Custom HTML/CSS Approach:
Instead of using HubSpot’s embedded code, create a form directly in WordPress using HTML and CSS that matches your HubSpot form fields.
Use HubSpot’s API to connect this custom form with your HubSpot CRM, ensuring all submissions are captured in your HubSpot account. This method requires some coding knowledge but allows for a more flexible setup.
2. JavaScript Fetch API:
You can build a custom form using the WordPress block editor and leverage JavaScript to send form data directly to HubSpot via their API.
This way, the form isn’t wrapped in an iframe, and you maintain full control over the HTML structure, making it easier to integrate with CallRail.
3. Use a Plugin:

Consider using a WordPress plugin that allows for custom form building and integrates with HubSpot, like WPForms or Gravity Forms. These plugins may offer direct integration options that avoid the iframe issue.

While working on improving your lead qualification, you might also want to look into adding a Google Review widget. Displaying Google reviews on WordPress can enhance your landing pages by showcasing authentic reviews, which could positively influence conversions and provide additional insights when qualifying leads.

If these solutions don’t work or require further technical help, reaching out to a developer with WordPress and API integration experience might be the best option.

[lfxmedia · Accepted solution]

I am going over the documentation here provided on Hubspot and it looks like I can set the form as raw HTML. I am going to give it a shot, but I believe this should resolve me issue.

https://knowledge.hubspot.com/forms/how-can-i-share-a-hubspot-form-if-im-using-an-external-site#:~:t...

[lfxmedia]

The only issue with this solution is that it requires a Marketing Professional account, for which we do not have the current funding. So, I am still open to suggestions from others who have encountered this issue.

[Aakar]

Hi @lfxmedia - I have not used WordPress, so I'm not sure how it works. But you might need to use Gutenberg Editor plugin to embed forms into WordPress. Please check this HubSpot article. 

Thanks.

[kennedyp]

Thanks for the post @lfxmedia & for the suggestion @Aakar! 

From what I understand, you have some Callrail code that will verify contacts through their HubSpot form submission, is that correct? 

Maybe some of our experts have come across this as well. @Ben_M or @trevordjones have either of you encountered similar issues due to the HubSpot form iframe? Any suggestions? Thanks! 

[trevordjones · Accepted solution]

Hi @lfxmedia and thanks for the tag @kennedyp !

From my tests on other CMS platforms, embedding the full forms javascript on a web pages does not add an iframe to the page, so this particular function seems to be unique to WordPress you are using. Perhaps the solution @Aakar suggests would solve for this?  I would definitely give it a shot.