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.
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?
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:
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)
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.
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.
.png "HubSpot Alumni"){kind=icon}
