Calculated fields (Pro only)

Introduced in Conditional Fields Pro version 2.7.

Conditional Fields PRO allows you to perform calculations in your Contact Form 7 forms based on other form fields and display the result in real time. Combine it with calc_select, calc_radio, and calc_checkbox to build order forms, price calculators, and more.

Simple example

<h2>Simple Order Form</h2>

<label>Choose a product</label>
[calc_select* product include_blank "T-shirt ($12.00)=>12" "Pants ($31.00)=>31" "Hoody ($22.00)=>22" "Shoes ($55.00)=>55"]

<label>Quantity</label>
[number* quantity min:1 "1"]

<label>Subtotal</label>
<p>$[calculated subtotal formula:"[product] * [quantity]" display:span decimals:2]</p>

<label>Shipping</label>
[calc_radio shipping use_label_element default:1 "Standard ($5.00)=>5" "Express ($15.00)=>15" "Overnight ($30.00)=>30"]

<label>Add-ons</label>
[calc_checkbox addons use_label_element "Gift wrapping ($3.00)=>3" "Extended warranty ($10.00)=>10" "Priority support ($7.50)=>7.5"]

<hr />

<p><strong>Order Total: $[calculated order-total formula:"([product] * [quantity]) + [shipping] + [addons]" display:span decimals:2]</strong></p>

[submit "Place Order"]

<h2>Order Confirmation</h2>
<table>
  <tr><td>Product</td><td>[product]</td></tr>
  <tr><td>Quantity</td><td>[quantity]</td></tr>
  <tr><td>Subtotal</td><td>$[subtotal]</td></tr>
  <tr><td>Shipping</td><td>[shipping]</td></tr>
  <tr><td>Add-ons</td><td>[addons]</td></tr>
  <tr><td><strong>Total</strong></td><td><strong>$[order-total]</strong></td></tr>
</table>

Edit this form in the form tester

How it works

The [calculated] tag

Use the [calculated] tag to display a computed value. The formula option references other fields by name:

[number quantity min:1 "1"]
[number price min:0 "10"]
Total: [calculated total formula:"[quantity] * [price]" display:span decimals:2]

Supported operators: +, -, *, /, and parentheses ().

Options for [calculated]

• formula:"[field-a] * [field-b] + 10" — the mathematical formula
• display:span (default) — shows the result as inline text
• display:input — shows the result in a read-only input field
• display:hidden — no visible output, but the value is submitted with the form
• decimals:2 — number of decimal places (omit for auto)

Calc select, radio, and checkbox

Use calc_select, calc_radio, and calc_checkbox to create dropdowns, radio buttons, and checkboxes where each option has a numeric value. Use => to separate the label from the value:

[calc_select product include_blank "T-shirt ($12)=>12" "Pants ($31)=>31"]

[calc_radio shipping "Standard ($5)=>5" "Express ($15)=>15"]

[calc_checkbox addons "Gift wrap ($3)=>3" "Warranty ($10)=>10"]

These tags work exactly like the standard CF7 [select], [radio], and [checkbox] tags, but they also expose a numeric value for use in [calculated] formulas. The label is what gets submitted and shown in emails.

Using the mail tag

In your email template, use the mail tag [field-name] to include the calculated value:

Product: [product]
Quantity: [quantity]
Total: $[total]

Advanced: custom JavaScript function

For calculations that can’t be expressed as a simple formula — conditional logic, date math, lookup tables, etc. — use the func option to call a custom JavaScript function instead of formula.

Example 1: tiered (volume) pricing

Charge less per unit when the customer orders more. Impossible to express as a single formula:

<h2>Volume Pricing</h2>
<p>Bulk discount: $10 each, $9 each for 10+, $8 each for 100+.</p>

<label>Quantity</label>
[number* quantity min:1 "1"]

<hr />

<p><strong>Total: $[calculated total func:tieredPrice display:span decimals:2]</strong></p>

[submit "Place Order"]

<script>
function tieredPrice(fields) {
  var qty = fields.get('quantity');
  if (qty >= 100) return qty * 8;   // $8 each for 100+
  if (qty >= 10)  return qty * 9;   // $9 each for 10-99
  return qty * 10;                  // $10 each otherwise
}
</script>

Edit this form in the form tester

Example 2: number of nights × rate

For a booking form, calculate the total price from a check-in date, check-out date, and nightly rate. Uses fields.raw() to read the date strings:

<h2>Booking Form</h2>

<label>Check-in</label>
[date* checkin]

<label>Check-out</label>
[date* checkout]

<label>Nightly rate ($)</label>
[number* rate min:0 "120"]

<hr />

<p>Nights: <strong>[calculated nights func:nightsBetween display:span]</strong></p>
<p>Total: <strong>$[calculated total formula:"[nights] * [rate]" display:span decimals:2]</strong></p>

[submit "Book Now"]

<script>
function nightsBetween(fields) {
  var checkin  = new Date(fields.raw('checkin'));
  var checkout = new Date(fields.raw('checkout'));
  if (isNaN(checkin) || isNaN(checkout)) return 0;
  return Math.max(0, (checkout - checkin) / 86400000);
}
</script>

Edit this form in the form tester

Note how nights (a func-based calculated field) is referenced from the total field’s formula — calculated fields can chain into each other.

The function receives a fields helper with the following methods:

• fields.get('name') — get the numeric value of a field
• fields.raw('name') — get the raw string value of a field
• fields.all() — get all field values as { name: numericValue }
• fields.sum('name') — sum a field across all repeater instances

Dynamic Stripe payments

If your form uses the [stripe] tag, you can set the payment amount dynamically by creating a calculated field named stripe_amount. The value should be in decimal format (e.g. 19.99 for $19.99) — it will be automatically converted to the smallest currency unit (cents).

[calculated stripe_amount formula:"([product] * [quantity]) + [shipping]" display:span decimals:2]

[stripe currency:usd amount:700 "Proceed to checkout" "Pay now"]

The amount in the [stripe] tag serves as a fallback. When a stripe_amount calculated field is present, its value overrides the hardcoded amount at submission time.

Full demo: Pizza Order Form

For a more complete example that combines calculated fields with repeaters, multistep, conditional fields, and Stripe payments, check out the Pizza Order Form demo.

Notes

• Calculated fields update in real time as the user fills out the form.
• The calculated value is submitted with the form and can be used in email templates.
• Non-numeric field values are treated as 0 in formulas.
• Calculated fields work inside repeaters — field references automatically resolve to the same repeater instance.
• Use [sum:field-name] in a formula to sum a field across all repeater instances.
• Calculations use a safe math evaluator — no eval() is used.