Build complex forms using Bricksforge Pro Forms: A guide to calculations and conditional logic

Bricksforge offers a powerful nested Pro Forms element that allows you to create dynamic forms capable of handling complex calculations and conditional logic. With Bricksforge Pro Forms, you can build sophisticated forms that adjust pricing, apply discounts, and provide real-time feedback to users. Let’s explore how to create two practical examples: an event pricing calculator and a car wash service form.

Getting started

Before beginning, ensure you have:

1. The latest versions of Bricks and Bricksforge are installed.
2. Pro Forms is activated by navigating to Bricks > Bricksforge > Elements > Pro Forms.

Once Pro Forms is activated, navigate to your desired page and edit with Bricks.

Example 1: Event Pricing Calculator

Our first example demonstrates a straightforward pricing calculator with the following requirements:

• Base price of $100 per participant
• A surcharge of $1,000 for events with fewer than 50 participants
• No surcharge for 50 or more participants

Setting up the form

Add a new Pro Form to your section. It will come with default fields such as Text field, Email field, Text Area field and Submit button.

One major advantage of Bricksforge is that all these fields are standalone elements. Next, you have an option to either create separate fields for each conditional value used in the calculation (such as base price and minimum number of participants) or add them directly to the calculation field.

Whilst we added them as separate fields in the video tutorial, for the documentation, we’ll combine them into the calculation field.

Add these two essential fields:

• A number field for participant count
• A calculation field for the total

Add a Custom ID of “participants” to the number field, and “total” to the calculation field.

Implementing the Calculation Logic

The calculation uses a simple ternary operator to determine whether to apply the surcharge:

unit_price = 100;
users = {participants};
min_users = 50;
surcharge = 1000;

users < min_users ? (users * unit_price) + surcharge : users * unit_price

Example 2: Car Wash Service Calculator

Our second example showcases a more complex form with multiple conditions and dynamic pricing:

• Vehicle type selection (Sedan: $25, SUV: $30, Truck: $35)
• Main services selection (various prices)
• Premium add-ons
• 10% discount when selecting three or more premium services

Key Features

1. Dynamic Data Integration
   • Pull service options from a repeater field on the backend.
   • Add price calculation values to select options.
   • Real-time calculation of the discount rate.
2. Conditional and Calculation Logic
   • Show/hide discount information based on selections.
   • Calculate and display savings.
   • Update totals in real time

Setting up the form

Add a new Pro Form to your section and nest the following elements:

• Select field for vehicle type
• Checkbox field for main services
• Checkbox field for premium addons
• Div to wrap the discount percentage and calculation
  • Hidden field for the discount percentage
  • Calculation field for the discount calculation
  • Conditional Wrapper and nested basic text element for the displayed discount text
• Div to wrap the total calculation
  • Calculation field for the total calculation
  • Div and two nested basic text element for the displayed total output text

From our video example, use the following Custom IDs for the fields

• Vehicle type select field: “car_type”
• Main services checkbox field: “main”
• Premium addons checkbox field: “premium”
• Discount percentage hidden field: “discount_percentage”
• Discount calculation field: “discount”
• Total calculation field: “total”

Discount calculation formula

premium = {premium};
discount = {discount_percentage};

premium * discount / 100

For this to work properly, we need to add Javascript that changes the discount percentage from 0 to the original value when three or more premium add-on checkboxes are ticked.

<script>
// Your existing configuration
const CONFIG = {
    CHECKBOX_THRESHOLD: 3,
    DISCOUNT_AMOUNT: 15,
    NO_DISCOUNT_AMOUNT: 0,
    PREMIUM_SELECTOR: '[data-custom-id="premium"]',
    DISCOUNT_SELECTOR: '[data-custom-id="discount_percentage"]',
};

document.addEventListener('DOMContentLoaded', function() {
    // Handle the discount functionality
    const premiumContainer = document.querySelector(CONFIG.PREMIUM_SELECTOR);
    const discountField = document.querySelector(`${CONFIG.DISCOUNT_SELECTOR} input`);
    
    function updateDiscountField() {
        const checkedBoxes = checkboxHandler.getCheckedCheckboxes(CONFIG.PREMIUM_SELECTOR);
        if (checkedBoxes.length >= CONFIG.CHECKBOX_THRESHOLD) {
            discountField.value = CONFIG.DISCOUNT_AMOUNT.toString();
        } else {
            discountField.value = CONFIG.NO_DISCOUNT_AMOUNT.toString();
        }
    }

    // Listen for changes within the premium container
    premiumContainer.addEventListener('change', function(e) {
        if (e.target.matches('[type="checkbox"]')) {
            updateDiscountField();
        }
    });

    // Run initial update for discount field
    updateDiscountField();
});
</script>

Total calculation formula

base = {car_type};
main = {main};
premium = {premium};
discount = {discount};

base + main + premium - discount

Conclusion

The Bricksforge Pro Forms is a powerful tool for dynamic data, calculations and conditional logic. It currently has some accessibility concerns that need to be addressed but I expect Daniele to be on top of it.

Let me know your thoughts in the comments.