Cost Calculator Builder
Item PageVideo TutorialsChangelogResources Get Started
  • Cost Calculator Builder Documentation
  • Getting Started
    • Free Version and Pro Version
    • System Requirements
    • Plugin Installation
    • License Activation
      • Upgrading the License
    • Update Billing Details and Access Invoices
    • License Utilization
    • Update The Plugin
    • Templates
    • Feature Request
  • Plugin Features
    • How to Create a Calculator
    • How to Manage Calculators
    • How to Add a Calculator to the Page
    • Calculator Appearance
    • Additional Classes
  • Cost Calculator Settings
    • Calculator Settings
      • Summary Block
      • Currency
      • Warning Texts
      • Confirmation Page
      • Order Form
      • Form Manager
      • Sticky Calculator
      • Woo Products
      • Woo Checkout
      • Payments
      • Webhooks
    • Global Settings
      • Currency (Global)
      • PDF Entries
      • Share Quote Form
      • Order Form (Global)
      • Email Template
      • Backup Settings
      • AI Formula
      • Captcha
      • Payments (Global)
      • Geolocation
  • Calculator Elements
    • General Overview
    • Text
    • Quantity
    • Validated form
    • Dropdown list
    • Image Dropdown (Pro feature)
    • Radio Select
    • Image Radio (Pro feature)
    • Switch Toggle
    • Checkbox
    • Image Checkbox (Pro feature)
    • Date Picker (Pro feature)
    • Time Picker (Pro feature)
    • Basic Slider
    • Multi Range (Pro feature)
    • File Upload (Pro feature)
      • How to Allow Additional File Types in WordPress
      • How to Increase Maximum File Upload Size in WordPress
    • HTML
    • Geolocation (Pro feature)
    • Line
    • Formula
      • AI Assistant (Pro feature)
    • Repeater (Pro feature)
    • Group Field (Pro feature)
    • Page Breaker (Pro feature)
  • Conditional System
    • Introduction
    • How to Create a Condition
    • Condition Options
    • Condition Actions
    • AND/OR Conditions
    • Condition Creating Example
  • Special Plugin Features
    • Orders
    • Discounts
    • Required Fields
    • Contact Form 7 Plugin
  • Payments
    • Settings
    • PayPal
    • Stripe
    • Razorpay
    • Cash Payment
  • Translating Cost Calculator Into a Different Language
    • Translation Basics
    • Translating Static Strings
    • Translating Calculator with WPML
    • FAQ
  • Develeoper's guide
    • Cost Calculator Hooks
      • Order Management
      • Contact Form
      • Confirmation Page
      • Email
  • Troubleshooting
    • Introduction
    • Plugin Conflicts
    • Theme Compatibility
    • Calculator is not loading
    • Cache Settings
    • Email not sending
    • Debug Logs
    • Submit a Support Ticket
  • Changelog
    • Release Notes
    • Changelog (Free Version)
    • Changelog (Pro Version)
  • Pre-built Calculators & Cases
    • Service Booking
    • Graphic Design
    • Loan Interest
    • Delivery Service
    • Renovation Company
    • Dental Services
    • Car Wash Company
    • Medical Services
    • Tuition Fees
    • Printing Services
    • Car Rental
    • Venue Rental Service
  • Advanced Topics
    • License Management
  • Stylemixthemes
    • Cost Calculator Builder WordPress Plugin
    • Themes
    • Plugins
Powered by GitBook
On this page
  • Settings in Group
  • How to use a Group element
  • An example of using Group element

Was this helpful?

  1. Calculator Elements

Group Field (Pro feature)

PreviousRepeater (Pro feature)NextPage Breaker (Pro feature)

Last updated 9 months ago

Was this helpful?

Group Field is an element that allows you to group a set of fields together, which can then be conditionally showed based on the user's input. It's perfect for creating more interactive and responsive forms where certain fields will show up upon the user's choices or inputs.

Settings in Group

Group name - Put the name for the field with the Group element.

Show Name - Tick the checkbox if you want to show the name of the Group element in the calculator.

Make this group collapsible - By enabling this you allow your users to reveal or hide the group of fields.

Show this group based on condition - It will make the group hidden by default. Create a condition with it to show this group.

How to use a Group element

  1. To add a Group, drag and drop it from the Elements section:

  1. Then you can add new fields in Group by dropping elements from the Elements section or other fields from the calculator.

You can not add Group and Repeater elements inside the Group element.

  1. You can enable making the group collapsible.

This is how it will look on the user's page:

And you can use the condition for the group.

Create a condition in the Conditions tab which will show the group.

This is how it will look on the user's page:

An example of using Group element

Let’s take an example of a clinic with different services. You can use a Group element if you want to know more about the patients before the consultation. You can add a Group with elements asking for extra info about the client such as the type of consultation, short details about the reason for the visit, uploading medical checkup docs, etc.

Then you can set up the conditions to show the Group if your customer chooses the certain types of clinic directions.

That is how Conditions will look with and without using Group in the same case.

That is how your customers will see it: