Basics: Creating forms from API data

[#1]

Hi there.

This may be poorly understood on my end, so please bear with me. I am not a HubSpot developer, but I have a client who has asked us to integrate their HubSpot forms onto their website that we develop for them. They’ve given my a GUID for each of their forms, as well as an authorization API key, but frankly, they haven’t been very responsive beyond that. With that and the documentation I have available, this is my current process.

• GET to the API to retrieve the form’s JSON data
• Parse the data to manually build a form, all of it’s field elements, and a submit button.
• On submit, parse the fields into request data, and POST to the API.

The first and last bit, I’m not having any trouble with. But it’s the middle step that I’m increasingly uncertain about. The result I’m currently putting together is a rather dull collection of labels and html inputs, with no styling whatsoever. And I keep running into alternate cases I have to handle from the JSON data I’m getting back, which is not going to work well if the client wants to be in control of their forms.

Is there either some commonly available way of building an html form from JSON data that I’m not familiar with, or is there documentation somewhere for using the JSON data to properly build a form manually?

Thank you!

[Dadams]

Hi @thalandor46

Are you doing any type of special processing on the form data, or simply passing it to HubSpot? If you’re just passing the data along, you may just be able to use the form GUID and Hub ID to embed the form into a page. The embedded code would automatically generate the HTML form based on the current settings of the form, along with some other options that can be set in the embed code itself:

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.

[#3]

Hi @dadams

That was eventually a resource I needed, but as it turns out, what I was really looking for was the address of the v2.js script. Once I figured out that needed to be loaded, everything else fell into place. I may have just skimmed over it, but I don’t believe that script is mentioned anywhere in the forms API documentation.

If I may hijack my own thread for another issue, my integration now looks like this.

hbspt.forms.create({
    portalId: '[Proper portalId]',
    formId: '[Proper formId]',
    onFormReady($form, ctx){
        script.parentNode.appendChild($form[0]);
    }
});

The onFormReady portion is just for placing the form in the correct place on the page. Otherwise, the form will appear on the bottom of my page, which is not desirable.

This displays the form perfectly. However, when I try to submit the form, I get the following error.

Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
at r (http://js.hubspot.com/forms/v2.js?_=1486060461543:4:21125)
at Object.findComponentRoot (http://js.hubspot.com/forms/v2.js?_=1486060461543:3:15072)
at Object.findReactNodeByID (http://js.hubspot.com/forms/v2.js?_=1486060461543:3:14535)
at Object.l [as getNode] (http://js.hubspot.com/forms/v2.js?_=1486060461543:3:12017)
at Object.s [as executeDispatch] (http://js.hubspot.com/forms/v2.js?_=1486060461543:1:21975)
at executeDispatch (http://js.hubspot.com/forms/v2.js?_=1486060461543:4:5886)
at a (http://js.hubspot.com/forms/v2.js?_=1486060461543:1:21924)
at Object.l [as executeDispatchesInOrder] (http://js.hubspot.com/forms/v2.js?_=1486060461543:1:22045)
at c (http://js.hubspot.com/forms/v2.js?_=1486060461543:1:18915)
at Array.forEach (native)

This, unfortunately, is not telling me very much. Any idea what might be causing this error, or at least what could help me debug it further?

Interestingly, if I remove the onFormReady part and submit the form at the default position, the form submits without error, as expected.