How to build with MegaForm

01 / Start · 5 min

How to create and publish a contact form

You will build: A contact form with required name, email and message fields, placed on a DNN page and visible in View entries.

Before you start: Sign in as a DNN administrator. Use MegaForm storage for this first example; no database connection or email provider is needed.

Try this example →

Steps

1. Open MegaForm in the Persona Bar and select Create form. In Setup enter Contact the team, choose MegaForm storage and start blank, or import 01-contact.json from the example pack.
2. In Fields add Name, Email and Long Text. Use the field properties to keep the keys full_name, email and message. Require all three. Set a helpful message placeholder such as What can we help you with?.
3. Leave approval off in Workflow. Choose a simple design, then in Publish allow anonymous responses if this is a public contact page. Create the form and inspect the saved result in the builder.
4. Use Add form to page to choose the target page and pane. Open the page as a visitor and send a fictional message using alex@example.com.

   

5. Return to the form's action menu and open View entries. Open the new entry and check the saved name, email and message. Add notifications only after this basic round trip works.

If it does not work

If the form is missing from the page, check the selected module binding, page permissions and pane. If saving fails, use the actual API error instead of assuming the form was created.

Download examples — use 01-contact.json from the ZIP.

More detail: Wizard reference · Place a saved form on a page

↑ All how-to tutorials

02 / Design · 8 min

How to adapt a gallery template without breaking its design

You will build: A shorter application form that keeps the original template styling and has no empty section headings.

Before you start: Choose a gallery design you like. Keep the original template available so you can compare it with the edited version.

Steps

1. In the Wizard's Setup step open Template Gallery, choose a template and continue with it. This loads a starting design; it does not make its fields read-only.
2. In Fields use Blocks & Fields for a custom HTML design. Select an unneeded section, such as Programme, and remove the whole block rather than deleting only its input controls.
3. Move a complete block above or below another block. Change individual labels, options and required settings through Properties. Keep the field key if existing tokens or workflow mappings use it.
4. In Design edit Template wording for supplied titles and descriptions. Preserve the template design when you want to retain its artwork, responsive layout and custom CSS.
5. Create the form, then inspect desktop and narrow layouts. Check that removed blocks leave no title, divider or blank card, and that the remaining fields appear in their intended sections.

If it does not work

A free-standing heading can remain when it was authored outside a field block. Inspect the generic HTML bindings and section structure; do not add a template-name exception to the Wizard.

More detail: Custom HTML/CSS template contract · Template Gallery

↑ All how-to tutorials

03 / Start · 7 min

How to create a form with AI and refine it in the builder

You will build: An AI-generated support request that you review, validate and refine before publishing.

Before you start: A site administrator must configure and test a provider in Settings → AI Settings. Keep provider credentials in those server settings.

Steps

1. From MegaForm choose Create with AI. Enter the English prompt below, including field keys and the outcome you need.

   

2. Read the proposed form before applying it. Check field types, required settings and options. Apply the result as a draft, then open the builder.
3. Ask the assistant for a small change: Add an optional screenshot upload named attachment. Keep the existing keys, layout and workflow unchanged. Inspect the proposed changes before applying them.
4. Use normal field properties to limit the upload type and size. Add an Address composite only if the request needs a physical address; an AI suggestion is not a requirement.
5. Save and test the result with blank required fields, a normal request and an allowed upload. Configure real email recipients or integrations separately before publishing.

Create a support request form with name (full_name), email (email),
category (category: Billing, Technical, General), and message (message).
Require name, email and message. Add a clear confirmation.
Use MegaForm storage. Do not configure payment or external requests.

If it does not work

If generation stops before a proposal appears, run the provider connection test and read the error. A configured provider is required; the preparation video alone is not proof of successful generation.

More detail: Configure an AI provider · AI creation and editing

↑ All how-to tutorials

04 / Design · 10 min

How to build a multi-step application with Address and Signature

You will build: A two-page application with structured name/address parts, an optional attachment and a signature.

Before you start: Import 02-application.json or start with a blank form. The starter uses normal MegaForm controls and has no custom HTML wrapper.

Try this example →

Steps

1. Add a Name composite, Email and Address in the first section. In Properties choose the address parts your audience needs, such as street, city, region, postal code and country.
2. Add a Section / Page Break before the second group. Enable its page-break option and review the form's multi-page setting. Place an application statement, File Upload and Signature on the second page.
3. Give the file field a size limit and allowed extensions. Use the Signature widget for drawn signatures; a plain text box called Signature does not capture a drawing.

   

4. Review validation on each page. Require only the parts and widgets needed for your process. For this tutorial leave approval off until the form itself works.
5. Save, open the rendered form, advance and go back. Check that entered values remain. Submit fictional details and inspect the entry; the Razor reader recipe shows how to display each composite part and upload.

If it does not work

A heading and a page break are different controls. If every field appears on one page, inspect the Section properties and multi-page option. A missing signature can also mean the canvas was never drawn on.

Download examples — use 02-application.json from the ZIP.

More detail: Fields and widgets · Read composites, signatures and uploaded files

↑ All how-to tutorials

05 / Data · 10 min

How to choose MegaForm storage, a new SQL table or an existing table

You will build: A form whose storage choice and allowed operations match your data source.

Before you start: For SQL, create a named connection in Settings → Database Settings and test it. The pack's demo-tables.sql creates two small tutorial tables in a database you choose.

Steps

1. Open Wizard → Setup → Data source. Choose MegaForm storage when the form should manage its own submissions without a custom table.
2. Choose New SQL table when you want a separate table. Select the named connection, enter a valid table name and review the proposed fields and columns before creating it.
3. For existing data choose Existing SQL table. Select the connection and table, inspect the columns and identify the primary key. Exclude identity, computed and server-managed columns from editable fields.
4. Keep the intended default of read and insert. Enable update and delete separately only when the form owner deliberately wants those operations. For a read-only view leave all writes disabled.
5. Map field keys to columns and review required database columns without defaults. Save, read an existing demo row and add a fictional row if insert is enabled. Inspect the actual target table as well as the UI.

If it does not work

A table describes columns, not the old form's rules, labels or workflow. Rebuild those deliberately. For composite values, define the scalar columns/parts you want; never assume Address, images or signatures are ordinary text.

Download examples — use demo-tables.sql from the ZIP.

More detail: Storage configuration · Existing tables and records grid

↑ All how-to tutorials

06 / Data · 7 min

How to populate a dropdown from SQL

You will build: A Country dropdown displays readable names and stores stable country codes.

Before you start: Create dbo.MegaFormHowToCountries with demo-tables.sql in your tutorial database, then register that database as a named connection.

Steps

1. Add a Dropdown with key country. Open its properties and select the SQL option source instead of a manually typed option list.
2. Choose the named connection. Use the SELECT below and map CountryCode to the option value and CountryName to its label.
3. Save and open the rendered form. The visitor should see country names, while workflow and reporting can use the stable code.
4. To filter a dependent list, bind the selected parent field through the source's parameters. Keep user input out of raw SQL text.
5. Add another row to the tutorial lookup table, then reload the source/form and check the new option. Recheck required validation when no option is selected.

SELECT CountryCode, CountryName
FROM dbo.MegaFormHowToCountries
ORDER BY CountryName;

If it does not work

An empty dropdown can mean a wrong connection, no returned rows, missing value/label mappings or a failed query. Inspect the option-source response before changing the field type.

Download examples — use demo-tables.sql from the ZIP.

More detail: SQL forms and mappings · Named database connections

↑ All how-to tutorials

07 / Automation · 10 min

How to send a saved submission to an SQL table

You will build: A contact form keeps its normal submission and inserts a second, mapped row in a tutorial Leads table.

Before you start: Use 01-contact.json and create dbo.MegaFormHowToLeads with demo-tables.sql. This is an extra database action, different from choosing the form's primary storage.

Steps

1. Open the saved form in the builder. Open its database-insert settings, choose the named connection and select the tutorial Leads table.
2. Review the generated INSERT and column mappings. Bind FullName, Email and Message to the corresponding field keys. Keep values as parameters rather than quoted token substitutions.
3. Exclude the identity key and database timestamp from the insert. Map FullName to the combined text value of full_name. If your table has separate first/last-name columns, map the parts explicitly rather than sending the whole composite object.
4. Enable and save the database insert only after the mapping is complete. Send one fictional submission and query the target table by its email address.
5. Inspect any recorded action error. If a database action fails after a submission was saved, verify the saved entry before trying again; a retry must not create duplicate business rows.

INSERT INTO dbo.MegaFormHowToLeads (FullName, Email, Message)
VALUES (@full_name, @email, @message);

-- Map each parameter to its field in the database action settings.

If it does not work

Check missing required columns, database permissions and parameter names. A connection test alone does not prove the account can INSERT into the selected table.

Download examples — use demo-tables.sql from the ZIP.

More detail: Database insert reference · Failure and retry behavior

↑ All how-to tutorials

08 / Automation · 8 min

How to send form data to an API or CRM

You will build: A workflow sends a small, explicitly mapped payload to a test endpoint and records the outcome.

Before you start: Have an endpoint you control and its expected request format. Start with a test endpoint and fictional values.

Steps

1. Open Workflow Summary → Configure workflow below the form canvas. Add the available API/webhook action. For the full graph use Advanced BPMN → and the Service Task with the API badge.
2. Set the destination URL and HTTP method. Supply authentication through the server-supported connection/header settings. Select only the fields the receiver needs.
3. Map the contact name, email and message into the request payload. Confirm the actual field token syntax in the editor's token picker instead of inventing an expression.
4. Set a finite timeout and the supported retry options, validate the graph if using BPMN, apply it and save the form.
5. Submit once to the test endpoint. Inspect its received body and the workflow execution details. Then test a controlled error response and confirm it is recorded as a failure.

{
  "event": "contact.received",
  "name": "<map full_name>",
  "email": "<map email>",
  "message": "<map message>"
}

If it does not work

An HTTP 200 response from MegaForm's own save API is not proof that the remote CRM accepted the payload. Check the step result and the receiver; use an idempotency key where the receiver supports one.

More detail: Webhook configuration · BPMN API service task

↑ All how-to tutorials

09 / Automation · 10 min

How to request approval and notify the right team

You will build: A request goes to a named DNN role, appears in My Inbox and runs its next action only after approval.

Before you start: Use an existing reviewer role and a separate test account in that role. Configure email only if you want to test delivery as well as task creation.

Steps

1. In the Wizard's Workflow step enable approval, select the reviewer role or user and enter a useful step name such as Manager review. Review the due-date and notification choices.
2. After creation open Workflow Summary → Configure workflow. Keep the Approval step under On Submit and put actions that require approval under On Approve.
3. For routing by category, use a condition/gateway in Advanced BPMN and connect each branch to the intended task. Use stable option values such as technical and billing.
4. Submit a fictional request, sign in as the reviewer and open My Inbox. Read Form Responses and History before selecting Approve or Reject.
5. Return to the entry's workflow details. Check which branch ran, who acted and when. If sending email, distinguish a local mail-server acceptance from delivery to the final inbox.

If it does not work

Check DNN role membership and the saved workflow assignment when My Inbox is empty. A notification failure and an uncreated approval task are different failures.

More detail: Approvals and inbox · Simple and advanced workflow editors

↑ All how-to tutorials

10 / Automation · 5 min

How to diagnose and retry a failed workflow step

You will build: You can tell whether a retry genuinely fixed a failed action and read every attempt in its history.

Before you start: Use a disposable test workflow. For an email example, use a local test mail setup or a recipient you control.

Steps

1. Open Analytics → Workflow errors and select a failed run. Read the failed step name and full error before retrying.
2. With the cause still present, select Retry failed step. Refresh the execution details and confirm the new attempt is also failed. A retry request being accepted does not itself mean the action succeeded.
3. Correct the cause, such as a rejected sender or unavailable endpoint, in the relevant server/action settings. Keep the original submission so the retry uses the same business context.
4. Retry again. Check the persisted step/run status and the new timestamp, error and attempt count. Confirm the external effect separately, such as a message accepted by the test mail server.
5. Keep the earlier failed attempts in the history. Before repeating a database or remote operation, check whether the first attempt already changed the other system.

If it does not work

If the UI says success immediately, inspect the saved execution details. Do not use only the HTTP status of the Retry button as the business result.

More detail: Illustrated retry reference · Email configuration

↑ All how-to tutorials

11 / Design · 10 min

How to calculate nights, a subtotal and a rental quote

You will build: Arrival and departure dates calculate the number of nights, rental subtotal and grand total.

Before you start: Import 03-rental-quote.json. This sample is an estimate form; it contains no payment widget, gateway credentials or live charge.

Try this example →

Steps

1. Keep Arrival and Departure required and use Date only mode for both. Open Departure properties → Validation. Set Date must be after → Arrival and Validation message to Departure must be after arrival (at least one night). This is a validator, not a Show/Hide condition.
2. In Calculator properties enable Wait for valid source fields before calculating. Create date variables arrival and departure sourced from those fields, and number variable rate sourced from nightly_rate. Keep the rate minimum 1 and maximum 10000.
3. Add the formulas below in order. date_diff(departure, arrival) counts nights; the Date validator rejects a reversed or same-day stay instead of relying on a zero result.
4. Choose Summary box (Callout) and save. Try a departure before arrival and then the same day: the departure error appears immediately, totals show a dash and the form cannot submit. Change Arrival after filling Departure to check the dependency in both directions.

   

5. Use arrival 2026-11-03 and departure 2026-11-06 with rate 80: the error clears, nights = 3 and total = 255. Missing dates or an invalid rate keep the estimate unavailable. Submit valid fictional dates and inspect the saved entry.

   

6. This is an estimate, with no live payment. For paid bookings add trusted server-side pricing and gateway verification. The date rule is enforced on the server too. Importing JSON into an older installation does not install the updated validator runtime.

nights     = date_diff(departure, arrival)
subtotal   = nights * rate
grandTotal = subtotal + 15

2026-11-03 → 2026-11-06, rate 80
Expected: 3 nights, subtotal 240, grand total 255.

If it does not work

Use Date only mode and the actual Arrival field in Date must be after. Turn on the Calculator option to wait for valid source fields. Both the renderer and server runtime must include this validator; the downloadable JSON configures it but does not upgrade an older installation.

Download examples — use 03-rental-quote.json from the ZIP.

More detail: Widget properties · Read the saved result

↑ All how-to tutorials

12 / Data · 5 min

How to print an existing entry as PDF

You will build: A readable copy of one submitted application, including its structured answers.

Before you start: Use an entry you are authorized to read. This recipe prints an entry; the separate PDF Form recipe below adds editable fields to an uploaded PDF.

Steps

1. Open the form's View entries action and select a fictional test submission. Check the details before printing.
2. Open the entry's print view or Print action. Review the actual submitted answers and the form's layout, rather than printing the administration grid.
3. Choose the browser's Print → Save as PDF, review paper size and page breaks, then save a copy locally.
4. For a custom read layout use the downloadable native Razor reader and print that page. Select only the fields needed for the document.
5. When your requirement is to fill an existing PDF document, use the PdfForm widget and its own PDF/field mapping. That is a different task from printing a normal submission.

If it does not work

Print-to-PDF is not the same as an automatically designed invoice/certificate. The planned ctx.Documents scripting API is not used by this recipe.

More detail: PDF Form tutorial in this guide · Submission grid and print actions · Custom printable Razor cards

↑ All how-to tutorials

13 / Data · 7 min

How to add a language and translate missing UI strings

You will build: A new language pack with a saved translation and a clear understanding of the English fallback.

Before you start: The current installation has 37 available packs. A pack is an installed locale, not a guarantee that every string has been translated.

Steps

1. Open MegaForm → Languages. Display language changes your browser's product UI; the editor's Language dropdown chooses the pack you are editing.
2. Choose an existing pack, or enter an unused valid locale such as en-AU under Create language and select Create. Do not overwrite another locale merely to test a translation.
3. Search for a visible string/key. Edit its translated value, preserve placeholders and tokens, and select Save.
4. Select the locale in Display language and reopen the relevant screen to verify the saved wording. A missing translation should use the English source rather than a blank label.
5. Use Download JSON for offline editing and Upload JSON to round-trip that pack. Translate (AI) can fill missing entries when an AI provider is configured; review its wording before saving.

If it does not work

Product UI translation does not automatically rewrite a form's authored labels, options or email text. Translate those separately through the form/template content facilities.

More detail: Language list and full instructions · AI provider setup

↑ All how-to tutorials

14 / Start · 6 min

How to reuse a form and copy its workflow

You will build: A separate form draft and a reviewed workflow copy, without modifying the source form.

Before you start: Know whether you want to duplicate a whole form or copy only selected workflow steps. These actions have different scopes.

Steps

1. For the same site open a form's action menu and select Duplicate. Rename the new form and verify that it has a different form ID.
2. For a portable starting point use the builder's form export and the destination Wizard/Gallery's Import JSON. The import dialog accepts a file, drag-and-drop or pasted JSON.
3. Review the imported fields, blocks, styling and keys before creating the destination. Use the pack's JSON files to try this path without depending on an online gallery download.
4. For only a workflow, open the source form's action menu → Copy workflow…. Select the destination and desired steps. Copied steps are added to the destination, so inspect existing steps for duplicates.
5. Open the destination's Workflow Summary and review field mappings, role/user assignments, database connections and endpoint settings. Test the destination; a copied form is not a copy of its submission history or server credentials.

If it does not work

A form JSON is not a full site backup. Database rows, users, uploads, payment/provider secrets and historic workflow runs are not reproduced by importing a design.

More detail: Copy workflow and reusable library · Portable form JSON reference

↑ All how-to tutorials

15 / Data · 10 min

How to display composites, photos, signatures and files in Razor

You will build: A readable entry card built from Typed Values or SQL columns, with authorized file links.

Before you start: Use DNN's native Razor Host and the editable Razor sample ZIP. These scripts are for Razor Host, not the restricted Razor widget inside a form.

Steps

1. Download the Razor examples and read README first. Place the chosen .cshtml file in the Razor Host Scripts folder and select it in the module's settings.
2. In MegaFormSubmissionCards.cshtml set the real FormId and the exact field keys. Keep the initial administrator/portal checks while testing.
3. Use ReadValues(), Text(key) and Part(key, part) for normal and composite answers. Use Images(key) and Signature(key) for their intended display values.
4. For direct SQL use the SQL card example and explicit MapField/MapPart mappings. For linked uploads use MegaFormSqlLinkedUploads.cshtml and a verified SubmissionId relationship; a business row ID is not automatically a MegaForm submission ID.
5. Test a fictional record containing an address, image, signature and file. Verify a permitted download and a denied anonymous request before adapting the reader for a customer-facing audience.

If it does not work

A blank composite part usually means a wrong part key or mapping. File URLs need the associated submission, portal/form and authorization checks; a scope label is not an access grant.

More detail: Full illustrated reader and Razor download · File authorization reference

↑ All how-to tutorials

16 / Automation · 12 min

How to create a registration form with native DNN accounts

You will build: A workshop registration creates a native DNN account that awaits portal approval. A saved entry and a completed account action are verified separately.

Before you start: Use a local/test DNN site and a new fictional username. Import 04-registration.json. Its account action is disabled until you review and enable it.

Try this example →

Steps

1. Import 04-registration.json, or create Username, Email, First name and Last name with keys username, email, first_name and last_name. Require all four. The tutorial accepts usernames starting with howto_.
2. In the builder open Configure workflow → Open Advanced BPMN. Connect Form submitted → Create User → End. Select Create pending DNN user. In Account system choose Native DNN User / DNN Role. Uncheck Disabled only after reviewing this example.

   

   

3. Map User name to {{field.username}}, Email to {{field.email}}, First name and Last name to their corresponding fields. Use {{field.first_name}} {{field.last_name}} for Display name. The values are field tokens, not the literal sample name.

   

4. Leave Approve user, Update if exists and Auto-login off. Leave Password blank and enable Generate password if empty. Leave Password variable blank too. This example does not expose the generated password or automatically grant a role. Validate BPMN, Apply BPMN and save the form.
5. Open the published form and submit a fresh fictional identity such as howto_workshop_01 and howto_workshop_01@example.com. The confirmation proves the entry was saved; inspect the workflow execution as well.

   

6. Open DNN Users, find that exact username and check its portal authorization state. A new account in this example is not authorized for the portal. Finish approval and password setup through normal DNN account administration. If needed, add a reviewed Add User to Role step for a specific non-privileged role.
7. Submit the same username/email again with Update if exists off. The native adapter reuses an existing identity without overwriting it; it does not create another account. Do not describe that idempotent result as a duplicate-validation error. Test a distinct identity for each creation check.

If it does not work

A success confirmation does not prove account provisioning. Inspect the execution error and DNN Users. A previously existing account retains its own authorization state. Never put a generated password in a public screenshot, message, export or workflow variable.

Download examples — use 04-registration.json from the ZIP.

More detail: Native user provisioning · Workflow setup

↑ All how-to tutorials

17 / Payments · 12 min

How to build a fixed-price payment form

You will build: A USD 35 workshop checkout whose final submission requires a verified payment.

Before you start: Use matching Stripe TEST publishable and secret keys in a test site. Import 05-payment.json. The portable file contains no keys and does not change your gateway into test mode.

Try this example →

Steps

1. Add Full name and Email, then a Payment widget named workshop_fee. Choose Stripe. Set Amount mode to Fixed, Amount to 35, Currency to USD and Require paid to on.
2. In Settings → Payment Settings configure the matching Stripe test secret key. In the widget set the matching test publishable key. A publishable key starts with pk_test_; the server secret starts with sk_test_. Keep the secret out of form HTML, JSON exports and screenshots.
3. Publish the form and first try to finish registration without paying. A missing/unverified payment must stop the final submission. If the gateway cannot initialize, resolve its actual connection/configuration error before continuing.

   

4. Once the secure card control loads in test mode, use Stripe test data: 4242 4242 4242 4242, a future expiry, any three-digit CVC and fictional billing details. Complete the test payment and wait for its confirmed result before the final form submit.
5. Open the saved entry and inspect the Payment value: provider, transaction/intent ID, amount, currency and verified status. Check the same test transaction in Stripe. Repeat with a declined test scenario and confirm it cannot create a paid registration.

If it does not work

This clone deliberately blocks outbound traffic at a local proxy. Use an authorized test environment with gateway access, then check HTTPS, the gateway response and matching test keys. Do not bypass payment verification to make the tutorial appear successful. A browser total, green button or accepted retry request is not proof of payment.

Download examples — use 05-payment.json from the ZIP.

More detail: Calculated payment recipe in this guide · Payment widget reference

↑ All how-to tutorials

18 / PDF · 12 min

How to make a fillable PDF Form and save the completed PDF

You will build: A workshop PDF with five editable overlays, saved answers and a completed PDF attached to its MegaForm entry.

Before you start: Download workshop-registration-blank.pdf and 06-pdf-form.json. The blank PDF is a static background; MegaForm adds the editable fields. This differs from printing an existing entry.

Try this example →

Steps

1. Import 06-pdf-form.json to load the embedded PDF and field layout. For your own design, add the PDF Form widget and select Open PDF Form Builder → Upload PDF. Use a PDF you are allowed to distribute.
2. Place Text for Full name and Email address, Dropdown for Workshop, Number for Number of attendees and Textarea for Notes. Select each overlay to set its name, label, size and required setting. The example requires name, email and workshop.

   

3. Use Preview/Fill to inspect field positions. Save & Close, then save/publish the MegaForm. Keep automatic upload enabled so the completed PDF can attach to the entry. The original background PDF stays unchanged.
4. Open the published form. Submit once with the required fields empty and check the highlighted validation. Then fill Alex Morgan, alex@example.com, Workflow automation, 2 attendees and a fictional note. Zoom out and in; the five inputs must remain single and retain their answers.

   

   

5. Use PDF to download a completed copy and open it. Compare all five answers with the form. Then use Submit, wait for upload and the final entry confirmation, and open the saved entry.

   

   

6. Inspect the saved PDF Form value and its attached file. Download the authorized attachment and compare it with the filled copy. Use the Typed Values/Razor reader when you need the nested answers or a protected file link; do not parse a legacy DataJson field.

If it does not work

A blank preview needs a valid PDF source and working PDF.js loading. A PDF downloaded in the browser is not automatically a saved submission: check the final entry and its attachment. Keep required-field errors visible and check upload errors instead of assuming an attachment exists.

Download examples — use 06-pdf-form.json + workshop-registration-blank.pdf from the ZIP.

More detail: PDF Form widget · Read nested answers and authorized files

↑ All how-to tutorials

19 / Payments · 12 min

How to connect calculated fields to a payment form

You will build: Ticket quantity recalculates a subtotal and booking fee; the Calculator grandTotal becomes the Payment amount.

Before you start: Import 07-calculated-payment.json. Use Stripe test configuration for checkout. The arithmetic works without a completed gateway payment.

Try this example →

Steps

1. Add Number quantity, labelled Tickets, with minimum 1, maximum 10 and default 2. Add a Calculator named order_total. Map its numeric variable quantity to the Tickets field.

   

2. In Calculator formulas add subtotal = quantity * 35, then grandTotal = subtotal + 5. Show both with two decimal places and a dollar prefix. The price and booking fee are constants in the formula, not visitor-editable price inputs.

   

3. Add Payment and select Amount from field. Choose order_total as the source field and grandTotal as the result key. Set USD, require payment, and bounds of USD 40–355 for this 1–10 ticket example.

   

4. Publish and change Tickets from 2 to 3: subtotal changes from 70 to 105, and grandTotal from 75 to 110. Check that the Payment amount follows the same result. Try zero and more than ten tickets; validation must reject them.

   

5. With a working Stripe test gateway, pay the current total, then submit. Inspect both the saved Calculator output and verified Payment amount. If quantity changes after payment, require verification against the new price; an old smaller payment must not satisfy the new total.

quantity  → Tickets field
subtotal  = quantity * 35
grandTotal = subtotal + 5

Payment.amountMode = field
Payment.amountFieldKey = order_total
Payment.amountFieldResultKey = grandTotal

If it does not work

Use the exact source field/result keys. The Calculator runs in the browser; mapping its result to Payment does not independently validate the ticket price. For production pricing, enforce the quantity/rate calculation on the server and verify the gateway amount against it. A formatted $75.00 label is not a transaction. This tutorial uses test checkout, and its completed-payment check remains pending.

Download examples — use 07-calculated-payment.json from the ZIP.

More detail: Fixed-price payment recipe in this guide · Calculator and Payment widgets

↑ All how-to tutorials

20 / Design · 10 min

How to show or hide a field and a whole group by condition

You will build: Business reveals the billing group; Other reveals a separate required explanation. Personal/General keeps the form short.

Before you start: Import 08-conditional-groups.json or start blank. This example uses answer-based Show when and Required when rules in field properties.

Try this example →

Steps

1. Add Radio customer_type with labels Personal/Business and stored values personal/business. Add a Row group billing_group containing Company name and optional Tax reference.
2. Select the billing Row and use Edit group properties. Open Conditional Logic, enable Conditional visibility and choose Show this field when. Set Request type → Equals → Business. Although the control says “field”, this rule belongs to the parent Row, so all children appear or disappear together. Keep Company name required while the group is visible.

   

3. Add Topic dropdown topic with General question (general) and Other (other). Add textarea other_details. In its Conditional Logic, enable Conditional visibility and set Show this field when: Topic → Equals → Other. Separately enable Conditionally required, choose Require when and use the same condition. Leave the normal Required setting off so the field is optional for other answers.

   

   

4. Save and open the rendered form. Start with Personal/General. Switch to Business and check both billing inputs appear. Switch Topic to Other and check the explanation appears; submit with it empty to check the conditional required error.

   

   

5. Return to Personal/General and submit the short form. Hidden company/explanation fields must not block it. Test switching back and forth and inspect saved answers; visibility alone does not promise old answers are cleared or treated as private.

   

6. For several conditions choose ALL (And) or ANY (Or) deliberately. For example a group can require Business AND a minimum quantity. Keep role-based data access in the permissions settings; hiding a field is a presentation rule, not authorization.

If it does not work

Compare stored option values, not just display labels. A rule on one child does not hide its siblings. Put a group rule on a real Row/container rather than an unrelated decorative heading. Use access permissions for sensitive fields.

Download examples — use 08-conditional-groups.json from the ZIP.

More detail: Field properties and conditions · Permissions and field access

↑ All how-to tutorials