topic Re: Post submission callback on an embedded form in APIs & Integrations

Post submission callback on an embedded form

dbaggs — Tue, 09 Oct 2018 07:40:58 GMT

Hi, I am embedded forms into our CMS hosted pages via the JS snippet provided and I'd like to perform some actions upon a successful or unsuccessful submission.

Based on what I see here: https://developers.hubspot.com/docs/methods/forms/advanced_form_options, there is no such callback. Is there anything I can hook into for this?

For fuller context, I'd like to promote the success/error message into a notification banner that we utilise for UX consistency.

Regards,

Dan

Re: Post submission callback on an embedded form

cbarley — Tue, 09 Oct 2018 15:31:34 GMT

Hi @dbaggs, you should be able to use the onFormSubmit callback for post submission actions. You can also use errorMessageClass to style your error messages accordingly, and you should be able to add markup to the inlineMessage section, thereby allowing yourself the ability to add a class to a success message and subsequently styling that with CSS. What you're looking to do should certainly be possible as long as you are on a paid Basic, Professional, or Enterprise Marketing subscription.

Re: Post submission callback on an embedded form

dbaggs — Tue, 09 Oct 2018 15:47:59 GMT

Hi Conor,

Thanks for the reply. The documentation says the following for the onFormSubmit callback:

"Callback that executes after form is validated, just before the data is actually sent."

Emphasis on the before.

I'm after a callback or hook for after the data has been submitted.

Regards,

Dan

Re: Post submission callback on an embedded form

cbarley — Tue, 09 Oct 2018 15:53:58 GMT

Hi @dbaggs, have you explored the other options I mentioned? You can also use cssRequired , which would be a string specific to validation error messages. If you're just looking to style the error and success messages, you should be able to do that with all of the properties defined in the advanced forms options page (https://developers.hubspot.com/docs/methods/forms/advanced_form_options). You can always style the inline messages with pure css from your stylesheet so there shouldn't be anything blocking you here unless you're not on Marketing Basic, Pro or Enterprise.

Re: Post submission callback on an embedded form

dbaggs — Tue, 09 Oct 2018 16:19:48 GMT

Thanks again Conor but that doesn't meet my needs.

There are actually a couple of things I'd ideally like to do, which are JavaScript based. To be more concrete, you can imagine the notification banner I mentioned to be a JavaScript module we use that styles the notification in a way that means it is fixed to the top of the window and also attaches behaviour in that the user can close the notification in an nice animated way.

Yes, you could replicate those styles to style the inner messages of the form but the attachment of behaviour to close the message would still need to be done.

I'd rather not have to replicate and shoe-horn the styles to look the same but rather just hide the messages and be informed through a callback as to when I can read that message and delegate showing it via our existing module.

Additionally, upon success of the form submission, I'd like to send a custom event to Google Analytics to track that asynchronous goal - again, to keep consistency with our existing UX (i.e. we don't want to redirect visitors to another page)

Any pointers gratefully received.

Regards,

Dan

Re: Post submission callback on an embedded form

dbaggs — Wed, 10 Oct 2018 05:46:36 GMT

Do you think that I should be reading the documentation differently in that as the onFormSubmit fires after the validation but before the actual sending, that I can assume that the data sending would be successful and therefore this is as good as a success case?

Re: Post submission callback on an embedded form

cbarley — Thu, 11 Oct 2018 16:00:04 GMT

Hey @dbaggs, you're thinking about this in the right manner. The onFormSubmit callback fires before the data is actually sent.

Thank you for explaining your use case for this. In the end, you may use absolute positioning and some custom CSS/JS to move the inline message and error messages above the fold to a banner. A better option may be to create a custom HTML form so that you have full control over the form itself along with the banner messaging, then use our Ajax submit data to a form endpoint.

For the Google Analytics event, you may want to check out this previous post: