What You'll Build

Forms with custom completion screens and local calculators that work without sending data to a server.

What You'll Learn

How to customize the completion screen with configureCompletionScreen()
Using dynamic/reactive values in completion messages
Creating local-only forms (calculators) with configureSubmitBehavior()
Customizing the submit button with configureSubmitButton()
Building a complete BMI calculator example

✅

Completion & Local Forms

By default, forms show a generic "Thank You!" message after submission and send data to the server. But you can customize this!

For calculators and configurators, you can disable server submission entirely and show custom results on the completion screen.

Tutorial Steps

Step 1: Custom Completion Screen

Use configureCompletionScreen() to set a custom title and message shown after form submission.

💡 Tip:

The completion screen replaces the default "Thank You! Your form has been successfully submitted." message.

Step 2: Dynamic Completion Text

Both title and message can be functions that return strings. This lets you include form values in the completion screen!

💡 Tip:

Use reactive functions to personalize the completion message with the user's name, email, or calculated results.

Step 3: Local Calculator Mode

Set sendToServer: false in configureSubmitBehavior() to create forms that don't send data to the server. Perfect for calculators!

💡 Tip:

When sendToServer is false, clicking "Submit" only shows the completion screen without any network request. Combine with a custom button label like "Calculate" for better UX.

Step 4: Submit Button Configuration

Use configureSubmitButton() to customize the submit button's label and visibility.

💡 Tip:

You can conditionally hide the submit button until the form is ready. Use isVisible with a function to control when it appears.

Step 5: Complete BMI Calculator

A complete example: a BMI calculator that shows the result and category on the completion screen, with live preview as you type.

💡 Tip:

This example combines all the concepts: local mode, custom button label, dynamic completion screen with calculated results, and live preview using computed values.

API Reference

configureCompletionScreen(config)

type: Currently only 'text' is supported
title: Title text or function returning string (default: "Thank You!")
message: Message text or function returning string (default: "Your form has been successfully submitted.")

configureSubmitBehavior(config)

sendToServer: Boolean or function returning boolean (default: true). Set to false for local calculators/configurators.

configureSubmitButton(config)

label: Button text or function returning string (default: "Submit")
isVisible: Boolean or function returning boolean (default: true)

Try It Yourself

Challenge 1: Create a tip calculator that shows the tip amount and total on the completion screen
Challenge 2: Build a quiz form where the completion screen shows the score
Challenge 3: Create a unit converter (e.g., Celsius to Fahrenheit) with local mode
Challenge 4: Add a confirmation step before showing the completion screen
Challenge 5: Build a loan calculator showing monthly payments on completion

Next Steps

You've learned how to customize the submit experience! Ready to explore more advanced features?

Continue to Multi-Page Forms

Other learning paths:

Learn about subforms for organizing complex forms
Explore computed values for automatic calculations
Master conditional visibility for dynamic forms