User registration form

This tutorial shows you how to build a sophisticated registration form that demonstrates many of Calcapp’s key features. You can follow along with the video or use the ready-made template.

What you’ll build

In this tutorial, we build a registration form with these features:

• Required fields: Name, email address and optional employer name.
• Conditional field: Company size field appears only when employer is entered.
• Data export: Button that sends collected information as a CSV file attachment.
• Terms agreement: Switch field requiring users to accept terms of service.
• Input validation: Validation for name and email fields with real-time error feedback.

The form prevents users from submitting data or proceeding until all required fields are valid and terms are accepted.

Getting started

This registration form is available as a template in Calcapp Creator. To use it:

• Open the Manage apps window from the menu.
• Select the Sample: Registration form template.
• Create your app based on this template.

You can also run a live demo of the registration form.

Video tutorial

We have made some changes to Calcapp since this video was first published. As a result, some screens may look slightly different. We will update the video in the future.

The video includes closed captioning explaining each step (but no audio). Detailed instructions for each section follow below.

Creating the form elements (00:02)

The video begins by creating three groups:

• Registration information: Contains the name, email address, employer name and company size fields.
• Data submission: Contains a button that sends the registration information via email as a CSV attachment.
• Terms agreement: Contains a switch field for accepting terms of service.

The name, email address and company name are converted to text fields, while the company size field remains a number field.

A production registration form would link to actual terms of service.

Setting the email sender (01:37)

The video demonstrates setting the sender property of the email button through a formula. The formula is set to EmailEmail, which references the email field, so emails appear to be sent from the user pressing the button.

We now recommend using the Reply-To field instead of the Sender field for better email deliverability. See our improved email deliverability guide for current best practices.

Field validation (01:54)

The video shows how to validate text fields using formulas. While number fields can be validated using minimum and maximum values, text fields require custom validation logic.

Validating the name field

The validation logic ensures that:

• Empty name fields are considered valid (using !ISDEFINED(Name)!ISDEFINED(Name)).
• Filled name fields are valid only if they contain a space character and are longer than four characters.

The video demonstrates building this formula step by step:

Check for spaces: !ISERROR(FIND(" ", Name))!ISERROR(FIND(" "; Name)) uses the FIND function to locate a space character. The ISERROR function ensures the formula doesn’t fail when no space is found.

Check length: LEN(Name) > 4LEN(Name) > 4 ensures the name is longer than four characters.

Combine conditions: The final formula combines all requirements:

This formula uses the logical operators (|| for or and && for and) to create complex validation rules.

This validation demonstrates formula concepts but isn’t ideal for real-world name validation, as many valid names are shorter than five characters or don’t contain spaces. For more information on formula functions, see the formula documentation.

Validating the email field (02:27)

The video demonstrates email validation using a similar approach. The email field is considered valid if it’s either empty or contains an at sign (“@”):

This formula follows the same pattern as the name validation, checking for the presence of a required character (the “@” symbol) using the FIND and ISERROR functions.

To use more sophistiated email validation, use this formula instead:

Dynamic form behavior

The video demonstrates several techniques for creating interactive, responsive forms that adapt to user input.

Conditional field visibility (02:55)

The video shows how to make the company size field visible only when the employer field contains data. This is accomplished by setting the Visible property of the company size field to:

The ISDEFINED function returns TRUE only when the employer field has been filled out, creating a dynamic form that adapts based on user input.

ISDEFINED is a Calcapp-specific function not found in spreadsheets. It’s equivalent to NOT(ISBLANK(Value))NOT(ISBLANK(Value)).

Controlling button availability (03:12)

The video demonstrates how to enable the email button only when all required fields are completed. The Enabled property is set to:

This formula combines multiple conditions:

• Both name and email fields must pass their validation rules.
• Both fields must contain actual data (not just be empty and therefore “valid”).

The formula illustrates how to reference field properties by using the field name, followed by ., and the property name (e.g., Name.ValidName,Valid).

Since empty fields are considered valid in our validation logic, the additional ISDEFINED checks ensure the button remains disabled until users actually enter data.

Requiring terms acceptance (03:37)

The video shows how to prevent users from proceeding to the next screen unless they accept the terms of service. This is accomplished by setting the NextScreenAvailable property.

To access screen properties in the inspector, the video demonstrates clicking the screen toolbar (which contains the screen title and navigation arrows) rather than selecting individual fields or buttons.

The formula for the NextScreenAvailable property is straightforward:

This ensures users can only proceed when the switch field is activated.

The video shows inserting the field name by clicking it rather than typing manually. It also demonstrates renaming the switch field to “TermsSwitch” before creating the formula, since field names based on captions can be overly long. Concise names make formulas more readable and easier to work with.

Adding timestamp data (03:55)

The video demonstrates adding a hidden field to capture when the form is submitted. Since the registration data is exported as a CSV file for import into spreadsheets and databases, including a timestamp is valuable for record-keeping.

The video shows creating a hidden output field with this formula:

The NOW function returns the current date and time as a spreadsheet-compatible sequential serial number.

Hidden fields aren’t shown to users but can be included in exported data. To include them, enable Include hidden fields in the inspector.

The video doesn’t show the “Include hidden fields” option, but this step is necessary for the timestamp to appear in the exported CSV file.

Testing and using the form

Testing the form (04:18)

The video concludes by previewing the completed registration form using the button. The preview demonstrates several important behaviors:

• Validation feedback: Name and email fields turn red when invalid values are entered. If users don’t correct invalid values within a few seconds, a generic error message appears (custom error messages can be set in the inspector).

• Dynamic behavior: The email button becomes enabled only when both name and email fields contain valid data. The company size field appears when the employer field is filled out. The terms of service switch can be activated, though no visible change occurs since there’s no subsequent screen in this example.

• Navigation: In a multi-screen app, activating the terms switch would enable a Next button in the upper-right corner, allowing users to proceed to the following screen.

Using the template

This registration form is available as a ready-to-use template in Calcapp Creator. Access it through the Manage apps window (reachable from the main menu ) and select the Sample: Registration form template to create your own version.