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:

<script>

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

            var errorMessage = "Your Error Message";

            $form.find("input[type='submit']").click(function(){
                var sbmt = $(this);

                window.setTimeout(function(){
                    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>")
                    }else{
                        $form.find(".form-error-message").remove();
                    }

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


<style>
    .form-error-message {
        color: #ff0000;
        font-weight: bold;
        padding: 15px 0px;
    }
</style>

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: http://integrationagent.com/smartforms