How to Display Custom Error Message in HubSpot Form? [Ready to Use Code]

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