Interrupt Form Submission

Highlighted
Visitor

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!

Reply
0 Upvotes
1 Reply 1
Community Manager

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:

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!

Reply
0 Upvotes