Building Forms

Building Your First Calculator

Build, test, publish, and embed a three-step Video Editing Quote Calculator with live pricing and lead capture.

getting-started forms widgets formulas leads multi-step publish embed

Show and Hide Fields with Conditional Logic

Build a Project Cost Calculator with Basic and Advanced View Modes, Result-widget formulas, and a discount hint when the project value exceeds $2,000.

visibility conditional logic view mode project cost calculator formulas discount

Calculate

Re-run all formulas and refresh Result widgets, visibility rules, and charts after inputs change.

formulas calculate building forms form command

Number

Collect amounts, quantities, rates, and percentages that visitors type as numbers.

widgets inputs number forms

Show Form Step

Switch to another subform tab in a multi-step calculator — quote, contact, thank-you.

multi-step wizard show form building forms form command

Switch View Mode

Activate a View Mode to show or hide fields — Basic/Advanced sections, tabs, conditional blocks.

view mode visibility conditional logic building forms form command

Text

Collect names, email addresses, phone numbers, URLs, and other single-line text.

widgets inputs text forms

Datetime

Let visitors pick a date, time, week, or month using the browser's native picker.

widgets inputs date time forms

Open Link

Open a URL in a new browser tab — terms, payment pages, or external tools.

link url open link building forms form command

Custom JS

Run your own JavaScript on button click or field change — DOM tweaks, API calls, custom validation.

javascript custom js building forms form command

Radio

Let visitors choose exactly one option from a short list shown on the form.

widgets inputs radio choice forms

Checkbox

Let visitors select multiple options such as add-ons, extras, or features.

widgets inputs checkbox forms

Select

Let visitors pick one option from a dropdown when the list is too long for radio buttons.

widgets inputs select dropdown forms

Range

Offer a simple slider for choosing a number within a minimum and maximum range.

widgets inputs range slider forms

Range Slider

Let visitors adjust a numeric value on a styled slider with ticks and a visible current value.

widgets inputs range slider forms

Textarea

Collect longer notes, messages, or descriptions in a multi-line text field.

widgets inputs textarea forms

Button

Run actions when clicked — calculate results, save a lead, send email, or switch forms.

widgets button actions forms

Label

Show standalone helper or hint text on the form without tying it to an input field.

widgets label forms

Columns

Place widgets side by side in a layout with one, two, three, or four columns.

widgets layout columns containers

Custom Text

Add paragraphs of static or dynamic copy with variables, formulas, and formatting pipes.

widgets content text

Image

Display a logo, photo, or illustration on the calculator.

widgets content image

Line

Separate sections of the form with a horizontal divider line.

widgets content divider

Spacer

Add adjustable vertical space between widgets on the form.

widgets content spacer layout

Custom HTML

Insert custom HTML blocks when you need layouts or markup beyond standard widgets.

widgets content html

Section Title

Divide a form into sections with a labeled heading and underline.

widgets content section

Header

Show the main title of your calculator at the top of the form.

widgets content header

Icons

Display a row of decorative icons using short icon codes.

widgets content icons

Result

Show a calculated value from a formula — the primary output of most calculators.

widgets results formulas

Table

Present schedules and comparisons in rows and columns, with formulas in each cell.

widgets results table

PieChart

Show how a total splits into parts as a pie or donut chart.

widgets results chart pie

BarChart

Compare values across categories with bar or column charts.

widgets results chart bar

LineChart

Show trends over time or across categories with line or area charts.

widgets results chart line