• Learn
  • Blog
  • Pricing
  • About
  • Sign in

User registration form

In this tutorial, we build a registration form asking users for their name, e-mail address and employer name. If the employer name is filled out, the form also asks for the company size. Below these fields is a button that sends the collected information as an attached CSV file (containing comma-separated values, which can be opened in Excel).

Below the button is a switch field asking the user to accept the terms of service for the app. The user is only allowed to proceed to the next screen if he or she agrees to the terms. The form also uses validation to point out errors in the name and e-mail fields and only allows the user to press the button and to move on to the next screen if both are valid.

This registration form is available as a template in Calcapp Creator. Simply select the Registration form template in the Manage apps window (reachable from the menu) to create an app with the registration form described here. You can also run an app with the registration form.

The video above includes closed captioning explaining the various steps. A more detailed discussion appears below.

Creating the elements of the form (00:02)

Three groups are created, with the first one containing the registration information, the second one containing a button that sends the registration information through e-mail and a third group asking the user to accept the terms of service. (A real registration form would link to the terms of service.) The name, e-mail address and company name need to be turned into text fields, while the last field (the company size) can remain a number field.

Setting the sender of the e-mails (01:37)

The sender property of the e-mail button can be set through a formula, which is evaluated when the app is run. Here, we want the e-mails to appear to be sent from the user pressing the button. As such, we simply set the formula to Email, which is the name of the e-mail field.

Validating the name field (01:54)

The Valid property can also be set through a formula, which determines if it’s valid. While number fields can be validated by setting minimum and maximum values, text fields (and all other fields) can only be validated by associating a formula with the Valid property.

The name field should not be considered invalid if it hasn’t been filled out. The ISDEFINED formula function returns TRUE if a value has been entered, so we start the formula with !ISDEFINED(Name) to ensure that empty name fields are considered valid. (!Value is equivalent to NOT(Value) in Calcapp.)

Name fields should also be considered valid if they contain a space (separating the first and last names) and the length of the name is greater than four. Checking the length of the name is easy using the LEN formula function: LEN(Name) > 4.

Determining if the name contains a space character can be done with the FIND formula function. This function returns the index of the found substring, meaning that FIND("b", "abc") returns 2 (“a” would return 1). If the string cannot be found, the FIND function returns an error. A valid name should contain a space and we need to ensure that the FIND function does not return an error. This can be accomplished with the ISERROR function, which returns TRUE if the given parameter is an error and FALSE otherwise. Putting these two functions together, we get this formula: !ISERROR(FIND(" ", Name)).

A name field should be considered valid if no name has been provided or it contains a space character and the length of the name is greater than four. To accomplish this with one formula, we combine the three fragments:

!ISDEFINED(Name) || (!ISERROR(FIND(" ", Name)) && LEN(Name) > 4)

(In Calcapp formulas, Value1 || Value2 is equivalent to OR(Value1, Value2) and Value1 && Value2 is equivalent to AND(Value1, Value2).)

For more information on any of the functions mentioned here, consult the reference sidebar.

Note: This formula illustrates several important concepts related to formulas and validation. It isn’t a great way to validate names, though. There are names which are shorter than five characters and do not include a space character.

Validating the e-mail field (02:27)

The e-mail field is considered valid if it hasn’t been filled out or if it contains an at sign (“@”). The formula associated with the Valid property is similar to the formula of the name field:

!ISDEFINED(Email) || !ISERROR(FIND("@", Email))

You can also use the REGEXMATCH function to more thoroughly validate an e-mail address. If you go that route, use this formula instead:

!ISDEFINED(Email) || REGEXMATCH(Email, "^[^@]+@.+\.[^\.$]{2,}$")

Showing the company size field only if there is an employer (02:55)

The fourth field should only be visible if the user has filled out the employer field. We accomplish this by associating a formula with the Visible property of the company size field:

ISDEFINED(Employer)

The ISDEFINED formula function returns TRUE if, and only if, the employer field has been filled out, which is perfect for determining when the company size field should be visible.

(The ISDEFINED function is an addition we have made to Calcapp and is not found in spreadsheets. ISDEFINED(Value) is equivalent to NOT(ISBLANK(Value)).)

Enabling the e-mail button (03:12)

The e-mail button which sends the user information through e-mail should only be enabled when all required fields have been properly filled out, meaning that it’s grayed-out and cannot be clicked otherwise. To accomplish this, we associate a formula with the Enabled property of the e-mail button:

Name.Valid && Email.Valid && ISDEFINED(Name) && ISDEFINED(Email)

This formula ensures that the e-mail button is only enabled if both the name and the e-mail fields are valid. (Properties which can be set through formulas can be accessed from other formulas by typing the field name, followed by a period and the name of the property.) Remember that the name and e-mail fields are considered valid even if they haven’t been filled out. The e-mail button should remain grayed-out if they haven’t been filled out, though, meaning that we need to explicitly check if these fields have been assigned values in the formula above (again, using the ISDEFINED formula function).

Ensuring that users agree to the terms of service (03:37)

To ensure that users agree to the terms of service, we need to prevent them from moving on to the next panel if the switch field has not been switched on. Calculation panels (and text panels) feature the property NextPanelAvailable which can be used for this purpose. To reveal the properties of the current panel in the inspector (as opposed to the properties of its fields, buttons and other items), click the panel toolbar housing the panel title and the back and forward buttons.

The user should only be allowed to move forward to the next panel if the switch field has been switched on, making the formula of the NextPanelAvailable property simple:

TermsSwitch

(In the video, this field name is inserted into the formula by clicking it instead of typing the name manually. Do whatever is most efficient for you.)

Note: The switch field was renamed in the video prior to typing in the formula. The names fields are assigned based on their captions can sometimes be overly long. By manually assigning more concise names, we make formulas referencing these fields terser and easier to read.

Adding a hidden field with the current date and time (03:55)

The registration information is sent as a CSV file, which can be imported into popular spreadsheets and databases. Having the current date and time available directly in the CSV file can be convenient, but there is no point in showing this information to the user. Calcapp supports hidden fields, which are not shown to the user but are made part of reports, which are perfect for this task.

We add a hidden output field and assign it the following formula:

NOW()

The NOW formula function returns the current date and time (as a spreadsheet-friendly sequential serial number).

Previewing the registration form (04:18)

The play button brings up the preview. Notice in the video that the name and e-mail fields turn red when values are entered that are considered invalid. Had the user not corrected the values and paused for a second or two, a generic error message would have been displayed. (The inspector can be used to assign a custom error message.)

When both the name and e-mail fields have been filled out with correct values, the button is enabled and can be clicked. When the employer field is filled out, the company size field is revealed.

Nothing happens when the user in the video switches on the switch field, though, indicating that he or she has accepted the terms of service. This is because there is no panel following the registration form. Had there been such a panel, there would have been a button labeled Next in the upper-right corner which would have been enabled when the user switched on the switch field.

Again, this registration form is available for use in your apps as the Registration form template in Calcapp Creator. Create a new app based on this template using the Manage apps window, reachable from the main menu .