HubSpot forms + Postcode Anywhere problem

[cmdogan90]

Hi all,

So I have recently integrated a service called Postcode Anywhere with one of our existing Hubspot forms on our website. The Postcode Anywhere service basically allows for automatic look-up of a company address based on what they type into the ‘organisation’ name field. Screenshot below:

Pasted image997x378 30 KB

As you can see, I have typed in ‘groupc’ which has correctly identified the company in question (Groupcall Ltd), and auto populated the address and postcode fields on the form.

The problem is when I submit the form as a test, the Hubspot form notification displays the organisation name as ‘groupc’ (what I typed in) and not the full company name as selected on the Postcode Anywhere lookup. The address and postcode fields work fine however.

What seems to be happening is everytime I navigate to another field (after selecting the correct details from the Postcode Anywhere lookup), it simply removes that selection and reverts back to ‘groupc’.

Any suggestions as to what could be causing this?

I have been in touch with HubSpot technical support and Postcode Anywhere, who inform me there could be a problem with the field validation which is the reason it reverts back to what the user has actually typed in.

Thanks

[zwolfson]

Hi @cdogan90,

Without seeing a live link I can’t be 100% sure but my guess it has to do with javascript that Postcode Anywhere is using. HubSpot forms using ReactJS and therefore existing in a virtual DOM. My guess is that Postcode Anywhere is attempting to modify the standard DOM which doesn’t actually make the change to the form. To help with this any change you want to make programmatically you can use the .change() method in JQuery as described here http://developers.hubspot.com/docs/methods/forms/advanced_form_options

I’m not super familiar with Postcode Anywhere so I’m unsure of if this change is possible. If you are simply querying their APIs and modifying the form yourself then the change should be trivial. If you are using some type of embed code they provide it may be more difficult to work around.

If you have trouble getting this to work, feel free to post a link to page where you have this set up and I can take a look to see if I can help.

-Zack

[cmdogan90]

Thanks @zwolfson,

The page in question can be found here: http://www.groupcall.com/product/messenger/pricing

And yes, Postcode Anywhere require us to paste the following code into the Head HTML of the form page:

> <script>(function (a, c, b, e) {
>     a[b] = a[b] || {}; a[b].initial = { accountCode: "GROUP11147", host: "GROUP11147.pcapredict.com" };
>     a[b].on = a[b].on || function () { (a[b].onq = a[b].onq || []).push(arguments) }; var d = c.createElement("script");
>     d.async = !0; d.src = e; c = c.getElementsByTagName("script")[0]; c.parentNode.insertBefore(d, c)
> })(window, document, "pca", "//GROUP11147.pcapredict.com/js/sensor.js");</script>

Thanks.

[zwolfson]

Hey @cdogan90,

I’m getting closer but I’m still not exactly sure how Postcode works. Sometimes in my testing when I select a company name, it pulls up a second list (presumably office locations for that company) and the company name field wipes. Then if I go to reselect, the address fields wipe. It’s like the form is trying to fight itself.

I noticed in the embedded script, it is referencing fields by their ID parameter. This could be part of the problem as the ID can change from page load to page load (we do this to handle the same form being loaded twice on the same page). You should tell Postcode to look for the input element by it’s name parameter rather than by it’s ID. If it doesn’t allow that, it may not be compatible with HubSpot forms.

-Zack