Calculation Widget

Estimated reading: 3 minutes 31 views

The Calculation widget shows a live result based on what visitors fill in, such as a total price from a product and quantity. The result updates automatically as visitors change their answers.

Step 1: Create a New Form

  • Go to RTMKit → Theme Builder → Form, click Add New Template, give your form a name, then click Edit with Elementor.

Step 2: Add the Fields to Calculate

  • Add the fields your formula will use first.
  • In this example, the form has a Select field for the product and a Number field for the quantity.
  • Product Field : Fill in the Name field, for example with product.
  • You can use any name, as long as you write the same one in the formula later. 
  • Then, in Option List, add each product.
  • Write the product name in Input Field Text, for example Template Kit ($29), and its price in Input Field Value, for example 29.
  • Quantity Field: In Content, set the Name.
  • You can use any name, as long as you write the same one in the formula later. 

Step 3: Add the Calculation Widget

  • In the Elementor panel, find Calculation in the RTM Form Pro category. Drag it below the fields you want to calculate.

Step 4: Set Up the Content

Content section
  • Click the Calculation widget, then open the Content tab.
  • Show Label: Show or hide the label above the result.
  • Position: Place the label on Top or Left of the result.
  • Label: The text shown as the label, for example Total Price.
  • Name: A unique name for this field. Don’t use spaces. Use only letters, numbers, underscores, or hyphens.
  • Initial Display: The text shown before there’s a result, for example 0.
  • Show Prefix / Prefix: Add text before the result, such as a currency symbol ($).
  • Show Suffix: Add text after the result, such as /month.
  • Help Text: A short note below the field to guide visitors.
Setting section
  • Formula: Write the calculation here. Call another field by putting its Name in curly brackets, like {quantity}. You can use +, -, *, /, and parentheses. In this example, the formula is {select} * {quantity}.
  • Decimal Places: How many numbers appear after the decimal point. Use 0 for whole numbers or 2 for prices like 12.50.
  • Empty Field Handling: What happens if a field in the formula is still empty. Treat as Zero counts it as 0.
  • Warning Message: The message shown if the result can’t be calculated.

Important: The Names in the formula must match the field Names exactly. If one is wrong, the result won’t work and the warning message appears.

Step 5: Style the Calculation Widget

  • Open the Style tab.
  • Label: Color, typography, padding, margin.
  • Prefix: Typography, color, padding, margin.
  • Calculation Result: Typography, padding, margin, border radius, text color, background type, box shadow, border type.
  • Warning: Alignment, color, typography.

Step 6: Publish the Form

  • Once everything is set, click Publish to save your form. Your form is now ready to be added to any page on your website.
Share this Doc

Calculation Widget

Or copy link

CONTENTS