Interrupt Form Submission

[baker]

Hello,

I am looking to create a very specific user flow:

1. The user fills out a few input fields on a web page and clicks a submit button.
2. If the input is valid, a modal pops up with an additional Terms of Use checkbox field.
3. When the user accepts the Terms of Use by checking the checkbox and hitting a second submit button within the modal, the users information is sent to Hubspot.
4. A Thank You message displays within the modal.

How do I interrupt the submission to validate that the user has accepted the Terms of Use? I have tried to use a jQuery Validation Plugin to no avail.

hbspt.forms.create({
  portalId: "###",
  formId: "###",
  onFormReady: function(){
    $('form').validate({
      errorPlacement: function(error, element) {},
      submitHandler: function(form, e) {
        e.preventDefault();
        console.log('test');
        // form.submit();
      }
    });
  }
});

 Any help would be greatly appreciate!

[WendyGoh]

Hi @baker,

I hope all is well with you 😄

While there isn't an easy way to do this, I'd like to suggest for you to explore how a multi form is being build, examples:

• https://www.larmahil.com/hubspot-multi-step-form
• https://community.hubspot.com/t5/CMS-Development/Can-I-create-a-multi-step-form/m-p/30685
• https://www.webmechanix.com/tool-hubspot-multi-step-form-generator-dynamic-progressive-forms/

And tapping onto the next step button, you can modify it to be opening a modal with the terms & conditions field.

I hope this helps!