Problems with Collected Forms on Wix using a 123 Contact Form

[AndreasViklund]

We have a Wix site that contains a simple form, and are now trying to get Collected Forms to work. But nothing is showing up in hubspot...

We have added the tracking code using the following guide:

https://knowledge.hubspot.com/articles/kcs_article/reports/how-do-i-install-the-hubspot-tracking-cod...

And the form is built using the 123 Contact Form plugin. Unfortunately nothing is collected in the Collected Forms page in Hubspot.

Does anyone have a suggestion on how to get this to work? Is Collected Forms supported on Wix?

[22Eighteen · Accepted solution]

I found a work around that is working.  

I was able to embed a HubSpot form (using the free version) by using the ULR link HubSpot gives you for each form (as opposed to embedding code).

While on Wix I used the website editor, went to the page I wanted to add the form.  Choose Add (+)>More> Embed a Site.

The insert HTML iframe (and pasting the code did NOT work).  However, the Embed a Site function and copying in the form link (from HubSpot) DID work.

Just adjust the size of the box to remove grey areas.  You can try to get it an exact size so that the scrollbars don't show.  But they will reappear on mobile and even on 100% zoom on a Chrome browser.  They only disappeared when I zoomed out to 80% on Chrome. 

I tested it and it worked.  I created a thank-you message within the HubSpot form (as opposed to forwarding to another page).  I'm going to guess that redirecting to a thank-you page will likely not work (or if it does it will show the new page within the iframe not actually take the visitor to a new page).

Using Chrome and zoomed out so the whole form is visible on my browser. Any closer zoom (90% or more) the scroll bars reappear. And the scroll bar was visible on my mobile phone as well. But they don't look horrible.What it looks like in the Wix webpage editor.

[22Eighteen · Accepted solution]

I found a work around that is working.  

I was able to embed a HubSpot form (using the free version) by using the ULR link HubSpot gives you for each form (as opposed to embedding code).

While on Wix I used the website editor, went to the page I wanted to add the form.  Choose Add (+)>More> Embed a Site.

The insert HTML iframe (and pasting the code did NOT work).  However, the Embed a Site function and copying in the form link (from HubSpot) DID work.

Just adjust the size of the box to remove grey areas.  You can try to get it an exact size so that the scrollbars don't show.  But they will reappear on mobile and even on 100% zoom on a Chrome browser.  They only disappeared when I zoomed out to 80% on Chrome. 

I tested it and it worked.  I created a thank-you message within the HubSpot form (as opposed to forwarding to another page).  I'm going to guess that redirecting to a thank-you page will likely not work (or if it does it will show the new page within the iframe not actually take the visitor to a new page).

Using Chrome and zoomed out so the whole form is visible on my browser. Any closer zoom (90% or more) the scroll bars reappear. And the scroll bar was visible on my mobile phone as well. But they don't look horrible.What it looks like in the Wix webpage editor.

[bencornett]

So I did this and got the form to pupulate and work. The issue is that when a user hits submit the form is static and is not completing the URL redirect. I get the form submission in hubspot but I have users clicking multiple times because of no redirect to schedule the acutal appointment. Please advise.

[NE]

To anyone else having problems with the difference in color the gray outside area of the hubspot form has color code #f5f8fa so if you add that as your background color it will blend in 🙂

[LomasNZ · Accepted solution]

First, in another post, this link was provided: https://www.crannog.scot/crannog-chronicles/using-hubspot-on-wix. The information looks relevant, but I can not yet follow the instructions as it requires a paid for edition of Wix.

Second. I did get the HubSpot Embed Code to work.

On your wix Page

1. Copy your Embed Code from Hubspot

It will look like this 

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
	portalId: "nnnnn",
	formId: "nnnnnnnnnnnnnnnnn"
});
</script>

Where 'nnnnn' are your codes.

Then on your Wix Page

2. Add > More > HTML iFrame

3.  Edit the Code 

4. Paste the HubSpot Embed Code you copied in step 1.

5. Then Paste this code into the same box, above what you just pasted. 

<html>
<body>
<main style="heigt:100%">
[ .... moved you embed code here .... ]
</main>
</body>
</html>

 6. And then Cut and Paste the Embed Code (below) into where it says 

[ .... moved you embed code here .... ]

So you end up with code that looks like this.

<html>
<body>
<main style="heigt:100%">
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
  hbspt.forms.create({
	portalId: "nnnnnn",
	formId: "nnnnnnnnnnnnnnnnnnnnnnnnnnn"
});
</script>
</main>
</body>
</html>

Note, you can not (or I could not) get the HubSpot form to redirect to another page. You can only use the option to 'Display a thank you message'. 

POSTSCRIPT

I have not tested this in anger. If you do please reply.

[DTPixMob]

Thank you! We've been struggling with using Hubspot for forms on wix and this was the solution that worked the best. Tracking was preserved and the integration is flawless so far. 

[vosey]

I'm afraid this didn't work for me. The only way I can see to embed a form on Wix is through using the iFrame to redirect to the URL. But this reeks havoc with our cookie policy and doesn't look great on mobile. I'm finding the lack of integration between the two very frustrating.

[jrobbluelake]

You're a genius. Worked great. Thanks!

[joecarr]

This worked for me...thanks!

[OscarMartinez]

You Rock! Thanks!

[Hooper10]

The embed using the URL works great to see the form on the website, but it doesn't then fire the tracking code on other pages of your website for a returning user. 

[Phil_Vallender]

Hi @AndreasViklund

As you've seen from the article you followed, the compatability between Wix and HubSpot isn't great. 

The article doesn't mention if collected forms work or not but we've seen a few people with similar issues here so I'm wondering if they do or not. 

Perhaps @edjusten can help us find an answer?

Good luck.

[edjusten]

Thanks @Phil_Vallender for the reference. @AndreasViklund  I'm afraid however, the answer here is not to helpful. As it turns out, Wix html modules are actually iFrames (which is why we have issues with the tracking codes). I would need to see the page to make sure, but my guess is that the form is embedded in an html module which in turn, shows in an iFrame, which means the Collected Forms tool would not see the submissions( click here for a good explanation of iframes). Sadly, we don't have a good workaround for this at the moment. 

Ed 

INBOUND 2017 is just around the corner. Find out more at inbound.com or check out the post on the main Community page.

[stefsample]

Hi,

Can you recommend what to use on a wix site for forms so that they can integrate with Hubspot or what level of the marketing package do I need to use Hubspots forms?

[Phil_Vallender]

Thanks @edjusten

It's as I supposed then. In that case I think it would be helpful to update the knowledgebase article on Wix to clarify that collected forms also do not work - or to state that Wix is not compatible at all. Is that something you can flag internally?

[edjusten]

I'll reach out to the knowledge team. 

Ed 

[AndreasViklund]

Thank you both for quick replies @edjusten and @Phil_Vallender!