Using Form Conditions and Calculations

Using Form Conditions and Calculations

 

The Form Conditions feature in 90 Second Website Builder makes it possible to show/hide/enable/disable other objects based on the value or selection of a form input field.  For example, you can disable the form’s submit button until the user checks a box (such as “I agree…“).  And multiple conditions can be added to an object.

It is also possible to perform calculations in form fields. These can be used to calculate a value based on other values or selections of other input fields. For example, you could calculate the total price of an item in a checkout or Ecommerce store based on the selected options.

Conditions/calculations options are available for these form objects:  Editbox, TextArea, Combobox, Checkbox and Radio Button.

In this article, I show you a few examples.

Example A:
How to enable the submit button with a Checkbox (submit Button won’t work until the box is checked)

Step 1
Create a form with a checkbox and a submit button.
Add a label to the checkbox to say something like this: I Agree to the Privacy Policy.
Make sure the Disabled property of the submit button is checked, so it cannot be clicked initially.

Step 2
Open the Conditions properties of the checkbox and add these TWO conditions…
Condition: checked
Action: enable
Target:  submit (the ID of the submit button).

and…

Condition: not checked
Action: disable
Target: submit (the ID of the submit button).

 

Step 3
Publish or Preview to test the form in a browser.

 

Example B:
How to Calculate the sum of two input fields

Step 1
Create a form with 3 editboxes: value1, value2 and total

Step 2
Open the Conditions properties of the first editbox (value1) and add a condition with the following values:
Condition: change
Action: calculate
Target: total (the ID of the result field)
Expression: Number([value1]) + Number([value2])

Notes:

  • To add the value of an input field in an expression you will need to put its ID between square brackets. 90 Second Website Builder will automatically replace this with the necessary code to get the value in the published page.
  • Number is a standard JavaScript function. It gets the numeric value of the input field. If we did not use Number then a string value would be used instead.
  • 90 Second Website Builder will automatically monitor all other input fields we use in an expression so there is no need to add the same condition to the other editbox (value2).

 

Step 3
Publish or Preview to test the form in the browser.

 

Example C:
Products with quantity

Step 1
Create a form with 3 radio buttons, and 2 editboxes: quantity and total.
Make sure all radio buttons have the same group name: product
Set the values of the radio buttons to: 10, 50 and 25

Step 2
Open the Conditions properties of the quantity editbox and add a condition with the following values:
Condition: change
Action: calculate
Target: total (the ID of the result field)
Expression: [RadioButton1] * [quantity]

Notes:

  • Although we have only added the ID of the first radio button, 90 Second Website Builder will automatically use the values of all radio buttons with the same group name.
  • 90 Second Website Builder will automatically monitor all other input fields we use in an expression so there is no need to add the same condition to the other input fields.

Step 3
Publish or Preview to test the form in the browser.

 

Example D:
Tax and shipping costs

Step 1
Create a form with 2 comboboxes: size, quantity and 3 editboxes: shipping, tax and total.

Step 2
Open the Conditions properties of the quantity editbox and add TWO conditions:
Condition: change
Action: calculate
Target: shipping (the ID of the result field)
Expression: ‘$’ + (Number([quantity]) * 5)

and…

Condition: change
Action: calculate
Target: tax (the ID of the result field)
Expression: ‘$’ + (0.1 * (Number([size]) * Number([quantity])))

Notes:

  • The first condition updates the shipping field.In this case the shipping costs per item will be $5.
  • The second condition updates the tax field. In this case the tax is 10% of the item price.

Step 3
Open the Conditions properties of the total editbox and add this condition:
Condition: change
Action: calculate
Target: total (the ID of the result field)
Expression: ‘$’ + ((Number([size]) + 5) * Number([quantity]) + 0.1 * (Number([size]) * Number([quantity])))

Note:

This condition updates the total field

Step 4
Publish or Preview to test the form in the browser.

Leave a Comment