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: