How can I prevent users to submit my form if percentages is not equal to 100%?

  • Profile Image
    Asked on August 24, 2015 at 11:28 AM

    Reference page 6 of this form:

    In this form, it's required for a user to list business owners and the percentage of the business each member owns. Is there a way to build/structure this field so that the user can't proceed until the list of percentages equals exactly 100%?

    In an ideal world, this field would have two columns: One for the Business Owner/Member name, one for the percentage of ownership. Then, the second column's values would have to add up to 100%. Is any/all of this possible?

    Hope this makes sense. Thanks!


  • Profile Image
    Answered on August 24, 2015 at 01:55 PM

    Thank you for contacting us. 

    Instead of text area field on page 6 you can set 3 text box fields and 3 number fields. Than you can add Form calculator widget and calculate numbers from Number fields.

    Then you need to set conditional logic to Hide/Show page break. You would need to set conditional logic to show page break field only if calculation fields is equal to 100. 

    Here is my demo form: 

    Please see changes I made on page 6 and if that is what you want to achieve.

    Feel free to clone my form to your account if you want to take a closer look. 

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    Answered on August 24, 2015 at 11:24 PM

    Right on! Thank you.

  • Profile Image
    Answered on August 25, 2015 at 03:04 AM

    You are welcome.

    Feel free to contact us if you have any other questions. 

  • Profile Image
    Answered on August 26, 2015 at 08:14 PM

    Is there any way to disable/hide just the "Next" button until the 100% calculation is met, rather than removing the entire page break? I want to preserve the user's ability to go back if they need to. 


  • Profile Image
    Answered on August 27, 2015 at 04:30 AM

    Yes, we can achieve this by adding custom CSS, which will depend on the Conditions you have already set in place. We can add this CSS to your form:

    #cid_33.form-field-hidden { display: block !important; }
    #cid_33.form-field-hidden .form-pagebreak-next-container { display: none; }

    What the code does is, when the Page Break on that specific page is conditionally hidden, this code forces it to show, but hides the Next button.

    We can add the code by opening the Designer (Setup & Embed > Designer), and pasting the code into the textbox under the CSS tab.

    Here is a demo form where you can see this code in action:

    (If you wish to jump directly to the affected page, please open this link instead.)

    Please let us know if you hit any snags along the way, and we will be happy to help.

  • Profile Image
    Answered on August 27, 2015 at 12:11 PM

    You, my friend, are a magician.

    Thank you.