Prevent The Submit Of Any HubSpot Forms After A Successful Validation

In my previous article An Easy Way To Embed HubSpot Forms In WordPress, I explained how easy it is to embed HubSpot forms in WordPress. Now I will show you a workaround that you need to prevent the submitting of any HubSpot forms.

Why do we need a workaround?

The embedded forms initiate a redirect directly after successful validation. In many cases, this isn’t desirable and should be prevented because you want to do something else before the redirect is fired. Maybe you want to remove the form and display a message or do something else that is a plus for the usability.

How does the workaround work?

Because HubSpot, unfortunately, doesn’t provide a suitable callback function, we make this possible by taking advantage of an external validation plugin. I chose the Query Validation Plugin because it’s ideally suited for the workaround. The Idea behind is to validate the HubSpot form and prevent the form submit through the validator plugin.

Fortunately, HubSpot offers a callback function that executes after form is built, placed in the DOM, and validation has been initialized:

hbspt.forms.create({
    onFormReady: function(){
        ...
    }
});

In that callback function, we place and initiate the jquery validation plugin to the HubSpot form:

hbspt.forms.create({
    onFormReady: function(){
        $('form').validate();
    }
});

If we submit the form, we will see the regular HubSpot and the jquery validator error messages which aren’t desired. Since the jquery validator should work in the background, We suppress all the error messages that come from there:

hbspt.forms.create({
    onFormReady: function(){
        $('form').validate({
            errorPlacement: function(error, element) {}
        });
    }
});

Now we get to go to the most important part of the workaround, prevent the submitting. For this we use the function submitHandler() of the jquery validator:

hbspt.forms.create({
    onFormReady: function(){
        $('form').validate({
            errorPlacement: function(error, element) {},
            submitHandler: function(form, e) {
                e.preventDefault();

                   // do whatever you want...

                   // ...and submit the form whenever you want
                   form.submit();
            }
        });
    }
});

Now you can run your code before the form is submitted.

One more thing: If you’re using select fields, radio buttons or checkboxes in your HubSpot form, you should extend the workaround. Otherwise, the validator will miss the fields in the validation process.

To fix this, you need custom validation rules, and you should remove the __PLACEHOLDER__ value of each option tag after the HubSpot form was built:

// removes from each option tag the __PLACEHOLDER__ value
$('form option[value="__PLACEHOLDER__"]').attr('value', '');

hbspt.forms.create({
    onFormReady: function(){
        $('form').validate({
            errorPlacement: function(error, element) {},
            // your custom rules uses the name of the form field and not the id!
            rules: {
                my_select_field: { required: true },
                my_checkbox: { required: true },
                // ... and more rules here ...
                // and adjust the required state although the field at HubSpot isn't mandatory!
            },
            submitHandler: function(form, e) {
                e.preventDefault();
                   // do whatever you want...
                   // ...and submit the form whenever you want
                   form.submit();
            }
        });
    }
});
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Tags:
forms