How to display custom error message in HubSpot form

HubSpot form has native validation and error message display, but sometimes you need to display a validation message not just for each field, but for entire form.

Unfortunately, HubSpot form API doesn’t provide a callback for failed validation.

But here is the workaround: we know that HS form inserts an element with an error message, so we can monitor that element after form being submitted:


        formId: 'c3794ad3-f6a7-4c98-841d-98062636baab',
        portalId: '1670983',
        onFormReady: function($form, ctx) {

            var errorMessage = "Your Error Message";

                var sbmt = $(this);

                    if($(".hs-error-msgs").length > 0){
                        //Put message on the top
                        $form.prepend("<div class='form-error-message'>" + errorMessage + "</div>")

                        //Put message on the bottom
                        sbmt.parent().prepend("<div class='form-error-message'>" + errorMessage + "</div>")

                //delay to make sure native hbspt form error already appeared
                }, 300);

    .form-error-message {
        color: #ff0000;
        font-weight: bold;
        padding: 15px 0px;

You can display your message on top or on the bottom.

Here is a working example of this kind of form:

This functionality will be included to the SmartForm plugin we are developing:

comments powered by Disqus