I’m creating a form on an external site using the normal hbspt.forms.create() function. I’d like to send errors to a Slack channel via webhook, but I don’t see a way to actually catch the errors with this method of form submission. The current workaround would be to preventDefault() in the onFormSubmit callback and use my own ajax call to the api, but that doesn’t seem like it should be the path forward. Thoughts?
Hey @Guru,
I would like to suggest, one approach that you could take is to use the onFormReady callback function to add a custom error handler to the form submission.
Here’s an example implementation:
hbspt.forms.create({
// your form settings here
onFormReady: function($form) {
$form.on(‘submit’, function(event) {
// prevent the default form submission behavior
event.preventDefault();
// perform your own form submission using AJAX
$.ajax({
url: ‘your-form-endpoint-url’,
type: ‘POST’,
data: $form.serialize(),
success: function(response) {
// handle success case
},
error: function(xhr, status, error) {
// send the error to your Slack channel via webhook
$.post(‘your-slack-webhook-url’, {
text: 'Form submission error: ’ + error
});
}
});
});
}
});
With this approach, you’re still able to use the hbspt.forms.create() method to generate your form, but you’re intercepting the form submission event to handle errors in your own custom way. In this example, errors are sent to a Slack channel via a webhook.
And please note that this is just one approach, and depending on your specific use case and requirements, there may be other ways to handle errors with the HubSpot Forms API.
Hope this helps! Cheers.
Hi @Syeda_Fatima, thanks for the tip. That’s the option I was currently thinking of, but I was hoping there was a separate callback like onFormError or similar. I’ll move forward with an ajax call!
It sounds like you’re facing a challenge with capturing errors from form submissions made through the HubSpot Forms API and sending them to a Slack channel via webhook. While the hbspt.forms.create() function is convenient for form submission, it doesn’t provide a built-in way to catch errors directly. Your proposed workaround of using preventDefault() in the onFormSubmit callback and then making your own AJAX call to the API is a valid approach. However, if you’re looking for a more streamlined solution, you might consider implementing a custom error handling mechanism within your form submission process. This could involve listening for form submission events, capturing any errors that occur during submission, and then sending those errors to your Slack channel via webhook. By building this custom error handling logic into your form submission process, you can ensure that errors are reliably captured and communicated, providing a smoother experience for both users and administrators.