JS Callbacks not... callingback

forms

#1

Per the docs there should be callbacks on form submit

I have made a button that pops the form up in a bootstrap window, but the “onFormSubmit” doesn’t ever get called?

Sample:
https://cadence-inc.com/playground/hubspot
Open hubspotpopup.js

Any idea?
Thanks,
Steve


#2

@sitefinitysteve Is this still an issue?
We had a momentary issue with our forms.

https://status.hubspot.com/incidents/j1b2htxlvtlz


#3

Yeah, give it a try, the “onFormSubmit” event just never trips :sweat:

Does something need to happen on the server to allow a post return from your domain or something? …I can see it all working in the console, and I can see the form DATA in hubspot… but the js event never returns.


#4

The on form submit should fire after the button is clicked to submit and not after a response from our server. If you simply put a console.log(“in the callback”) in the function does it fire? Do you get any errors?

ex.

onFormSubmit: function($form) {
        console.log("call back fired")
        }

#5

This is my issue, you can inspect the script on the page to see it not happen. No debug or console gets triggered there. There is actually a debugger; statement in there right now :confused:

No errors that I can see :confused:


#6

@sitefinitysteve Is this the form you are referring too?


#7

Yeah, open your dev tools and inspect “hubspotpopup.js” you can see the callback specified, one of the events triggers, I think it’s formReady(?) but submit does not


#8

@sitefinitysteve When I ran the create block in the code I can see your first callback firing.


#9

Right I know, thats what I keep saying :slight_smile: The one fires, but submit does not… submit is the only one I care about the other was just trying to test if I was going insane or not.


#10

@sitefinitysteve I’m stumped at the moment on this as well. I fully understand your problem as I can reproduce it now on your site. Let me run this by a couple of my co-workers tomorrow and hopefully we can figure this out.


#11

Been a few days, any clue yet?


#12

@sitefinitysteve No I don’t I pulled my manager in @zwolfson to lend a hand and we are having trouble pinpointing why this callback doesn’t run on your site. Something seems to be closing the form down after the network request but before the callback can fire. Are you preventing certain events firing some where on your page as a global thing?


#13

Absolutely nothing, pretty bare site, just loading jQuery and Bootstrap really. Like I mentioned above though, it’s a cross domain postback, could that be why? Browser restricting callback for security or anything maybe, server somehow need to whitelist (grabbing at straws)


#14

I am having a similar issue across multiple wordpress sites that have a hubspot embedded form. The form settings are using “inline message” in the form builder but when you submit the form, the page refreshes back to itself. The fact that the console clears after submit, should help debug this issue since it’s supposed to be an inline message, not a redirect.

I have tested on 2 different websites using embedded HS forms


#15

Hey guys, my client is a customer of hubspot and is kinda of relying on us to deliver this functionality… can we work to a resolution please? I realize this is the only avenue for api support, but I really would like to get this resolved asap :confused:


#16

@sitefinitysteve

You are using the old version of the form code, which I don’t think supported onFormSubmit. If you look at the source or the network tab, you are loading js.hsforms.net/forms/current.js, and that current.js is actually the older embed code. The actual current code you should use js.hsforms.net/forms/v2.js. The original current.js embed code didn’t have the onFormSubmit functionality (it did have onFormReady).

You’ll need to update to use the v2.js file.

You might also need to update the target you are using as well, seems like the old function can deal with using the actual jQuery object:
target: $("#" + id + " .popup .modal-body"),

but the new one may only accept the selector as a string:
target: “#” + id + " .popup .modal-body",

I was able to reproduce the issue on my end using the old current.js file.


#17

That is fantastic sir! …current != current :smile:

I will mark as complete for now, thx!


#18

Glad it is working. the current != current through me as well at first.


#19

I’m using the new version of the forms but my callback isn’t firing. My submissions are going through.

I’m using this in the head.

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script char-set="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>

I have multiple forms instantiated in the page in the form of this:

window.hbspt.forms.create({
      target: `.${dynamicClassName}`,
      css: '',
      portalId: 'my-portal-id',
      formInstanceId: `form-${dynamicInstanceId}`,
      formId,
      cssClass: dynamicClassName,
      submitButtonClass: 'button button-fill button-form',
      inlineMessage: 'Thanks! We will get in touch with you.',
      onFormSubmit() {
        // This is not triggering!
        console.log("HELLO??");
      },
   });

#20

I found out my problem:

The onFormSubmit function in hbspt.forms.create requires jQuery. It was not run.

But seriously, why do you need jQuery??