Problems with Collected Forms on Wix using a 123 Contact Form

SOLVE
Highlighted
New Contributor

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?

Reply
0 Upvotes
2 Accepted solutions

Accepted Solutions
Regular Contributor | Silver Partner

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).

 

Form-Chrome.JPGUsing 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.Wix-Embed a Site Form.JPGWhat it looks like in the Wix webpage editor.

 

Occasional Contributor

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.

11 Replies 11
Community Thought Leader | Diamond Partner

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.

Phil Vallender | Inbound marketing for B2B technology companies
HubSpot Moderator

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.


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes
Community Thought Leader | Diamond Partner

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?

Phil Vallender | Inbound marketing for B2B technology companies
Reply
0 Upvotes
HubSpot Moderator

I'll reach out to the knowledge team. Man Happy

 

Ed 


Did my post help answer your query? Help the Community by marking it as a solution
New Contributor

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

Reply
0 Upvotes
New Member

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?

 

 

Regular Contributor | Silver Partner

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).

 

Form-Chrome.JPGUsing 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.Wix-Embed a Site Form.JPGWhat it looks like in the Wix webpage editor.

 

Visitor

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. 

Occasional Contributor

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.

Visitor

You Rock! Thanks!

Reply
0 Upvotes
NE
New Member

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 Smiley Happy