HubSpot forms + Postcode Anywhere problem


#1

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:

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


#2

Also, just to clarify, when selecting Groupcall Ltd from the suggested pop-up, it does ‘lock in’, albeit temporarily, until I click on another field to fill out.


#3

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


#4

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.


#5

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


#6

Hi @cdogan90 & @zwolfson,

My name is Andy, I work as a technical consultant for PCA Predict. Following your most recent suggestion Zack I wanted to advise that our service prioritising field ID’s over field Names but will mach field names is a matching set of ID’s are not found.

As a result is would be possible to map to the field names instead which might resolve the issue? It is interesting to know how Hubspot manage the forms real time although I’m still unsure of the exact problem there.

If this field name option is the solution I will ensure our team are aware for potential future implementations.

-Andy (PCA Predict formerly Postcode Anywhere)


#7

Hey @AndyBrannelly,

Thanks for chiming in. Any insight into why I’m seeing certain fields blank out when selecting a specific company from your drop down?

It would be helpful to know exactly what method you are using to set field values. My guess is that it’s not interacting with React particularly well.

-Zack


#8

Sure, I might need to double check with an example but in some cases there are addresses which don’t contain full address fields as you might expect, particularly with county data.

It also depends on the field mappings in use, for example if I map:

Company
Building number
Street
City
County
Postcode
Country

And search for our company address: PCA Predict, WR5 3DA I would get:

PCA Predict
BLANK
Basin Road
Worcester
Worcestershire
WR5 3DA
United Kingdom

As county data is no longer maintained by Royal Mail (as of the early 90’s) there will often be BLANK responses in the county field as well. For this reason we recommend avoiding required* settings for the county field and we provide options for Line1, Line2 etc as well as specific address fields to cover all bases. For more information on this see our addressing setup guide: http://www.pcapredict.com/support/articles/article/getting-started-with-captureplus

-Andy


#9

Thanks for getting involved @AndyBrannelly, and @zwolfson for trying to help solve this problem.

As of now the problem still remains - If there is anything I can do to assist please let me know.


#10

Hi @cdogan90,

I will contact you direcly on this to implement the field name update removing the ID’s for this hubspot implementation which should do the trick for you.

-Andy


#11

Hi @zwolfson,

I have updated @cdogan90’s implementation of our service to map to the field names and not the id’s but this doesn’t seem to have affected the underlying problem.

It appears to me that the issue is with the form validation, it looks like it is wiping auto complete data from the fields as soon as you navigate away to another field.

Can you take a look at this for me please?

-Andy


#12

Thanks @AndyBrannelly.

@zwolfson I have made a quick video of the exact problem just so it’s clear what is happening exactly.

This can be found here: https://www.youtube.com/watch?v=1sygPovqNi0&feature=youtu.be

Thanks.


#13

Thanks for the video, that’s what I was seeing as well. I am unable to continue testing because I am now getting a Service Error: Account out of credit message. However, I’m pretty sure the problem is around how PCA Predict is setting the field values. When I set up a listener on either the click of the address dropdown or a change on the value of the company field, a .value call always gets me what was typed in. After I leave the field (before the wipe happens) I can call .value again and get the intended value (the one that gets displayed).

@AndyBrannelly Do you know what method the code is using to set the value of the input once someone selects the correct address?

-Zack


#14

Hi @zwolfson,

As far as I can see the form has some logic to manage it’s own state, there is a function in v2.js (de-minified) that appears to be setting the state of the fields and therefore clearing them out.

To answer your question we are replacing the element.value with the array index for each field but the method itself won’t change this issue with the state change.

Is this something than could be potentially reviewed?

Keeping @cdogan90 in the loop.

-Andy


#15

Also @zwolfson you should be able to continue testing now (if needed) as our trial period has been extended.

Thanks.


#16

Hi @zwolfson / @AndyBrannelly,

Do you have any updates for me?

If this is something that is not going to work I am going to need to know ASAP so I can look into other alternatives.

@AndyBrannelly, I have just tried testing the form again but it says we are out of credit still.

Thanks both for your help.


#17

Hi @zwolfson/@cdogan90,

Demo extended until the end of the month for you. If you need more time give me a shout.

-Andy


#18

Ok so this is definitely not the prettiest piece of javascript that I’ve ever written but if you add this to your page this should work. It’s been working in my testing but let me know if you have troubles with it.

var company = document.getElementsByName('company')[0]
var address = document.getElementsByName('address_line_1')[0]
var tel = document.getElementsByName('phone')[0]
var postcode = document.getElementsByName('postcode')[0]
var event = new Event('input',{bubbles:true})





company.addEventListener('change',makeChange,false)


function makeChange(){
	setTimeout(function(){
		var correctCompanyValue = $(company).val()
		var correctAddressValue = $(address).val()
		var correctTelValue = $(tel).val()
		var correctPostcodeValue = $(postcode).val()
		company.value = correctCompanyValue
		address.value = correctAddressValue
		tel.value = correctTelValue
		postcode.value = correctPostcodeValue
		company.dispatchEvent(event)
		address.dispatchEvent(event)
		tel.dispatchEvent(event)
		postcode.dispatchEvent(event)
	},1000)
}

Thanks to @Metcoff for providing the breakthrough.


#19

Thanks @zwolfson and @Metcoff,

Can I just confirm where exactly I should add the above code to the page? In the head / footer HTML?

Thanks for your help with this.


#20

Hey @cdogan90,

The footer HTML should do the trick. Let us know if that doesn’t work for whatever reason.

-Zack