Tracking form field answers

[zgpatrick]

Hi there,

It's my first post, as I'm getting up to speed on how to customize Hubspot for my needs. Right now, we are moving to Hubspot's forms.

One thing I am trying to replicate from our current setup is tracking when a user fills in different parts of a form. In the non Hubspot setup, an event is fired to Google Analytics once a valid input has been detected for a form field. How is this achievable in Hubspot forms?

I noted the hsvalidatedsubmit that is triggerd by the Hubspot form's script (v2.js) when there is a validated form submission, and saw the work arounds in this forum to ensure GTM triggers are fired before page reload (for form submission events with validated input). Is there a similar thing for validated form field inputs?

NB: form field would match Hubspot's definition (as per the user interface Ädding form fields" in https://knowledge.hubspot.com/forms-user-guide-v2/a-quick-tour-of-forms; and by the CSS class identifier hs-form-field note in http://designers.hubspot.com/docs/cos/hubspot-form-markup).

Regards,

Patrick

[derekcavaliero]

@p_b I built a prototype to extend the functionality of default HubSpot forms for Wizards/Multi-Step experiences that you might find interesting/helpful.

Here's a blog post about the tool and a short video demo:

WebMechanix – 1 Aug 18

TOOL: HubSpot Multi Step Form Generator (dynamic/progressive forms) •...

We’re looking for feedback on a tool we’ve built to generate & build multi-step HubSpot forms. Here’s a video explaining the tool with a demo of how to use it. Read below for more details and please give us feedback. Background We have dozens of...

We're working on getting this into a working beta - but we need feedback first - would you be willing to fill out our feedback survey at the link above?

[Derek_Gervais]

Hi @p_b,

There isn't any roadmap at the moment, any product changes /betas will be announced through existing channels. I'm not aware of any plans regarding multi-part forms or wizards, but I would definitely agree that the forms API is the best route for heavy customization.

[Derek_Gervais]

Hi @p_b,

Product changes will be announced through the normal product updates channels (https://www.hubspot.com/product-updates), and developer-related changes will be announced here on the forums under the Announcement category. We can't directly support non-documented functionality, though, so to completely avoid breaking changes I wouldn't recommend customizing the forms embed code outside of what we have documented below:

developers.hubspot.com

How to customize the form embed code

This is a list of options that you can use if you just need to tweak a default hubspot form. If you need complete control over the styles and actions of your form, you will still want to use the Forms API.

[zgpatrick]

Thanks for that, so the Forms API is probably the way to go. Is there a roadmap on what Hubspot plans to do with forms, particularly the UI side of things?

For example, being able to build a wizard / multi step form (e.g. Jotform Cards has a nice feature https://www.jotform.com/cards/import/?import=https://form.jotform.com/80246105199961).

Regards,

Patrick

[zgpatrick]

Hi Derek,

Thanks for the reply and confirmation that .change is probably the way to go! It is what I have implemented.

How are changes to the Forms javascript announced? (We want to build a form wizard / multi step form. I am debating between piggy backing on the existing Hubspot javascript or building a customized form that takes the forms api and then populates the wizard accordingly).

[Derek_Gervais]

Hi @p_b,

Just to make sure that we're on the same page, you're looking to fire an event when a valid input is detected in one of the form fields? This isn't a built-in functionality of HubSpot forms, but you could try something like using jQuery .change(handler) to detect when the input value has changed.