User registration form

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.

In this tutorial, we build a registration form asking users for their name, email 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 email 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 email 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, email 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 emails (01:37)

The sender property of the email button can be set through a formula, which is evaluated when the app is run. Here, we want the emails to appear to be sent from the user pressing the button. As such, we simply set the formula to EmailEmail, which is the name of the email 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 only if a value has been entered, so we start the formula with !ISDEFINED(Name)!ISDEFINED(Name) to ensure that empty name fields are considered valid. (!Value!Value is equivalent to NOT(Value)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) > 4LEN(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")FIND("b"; "abc") returns 2 (“a” would return 1). If the text 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))!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)!ISDEFINED(Name) || (!ISERROR(FIND(" "; Name)) && LEN(Name) > 4)

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

For more information on any of the functions mentioned here, consult the formula documentation.

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 email field (02:27)

The email 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))!ISDEFINED(Email) || !ISERROR(FIND("@"; Email))

You can also use the ISEMAIL function to more thoroughly validate an email address. If you go that route, use this formula instead:

!ISDEFINED(Email) || ISEMAIL(Email)!ISDEFINED(Email) || ISEMAIL(Email)

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)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)ISDEFINED(Value) is equivalent to NOT(ISBLANK(Value))NOT(ISBLANK(Value)).)

Enabling the email button (03:12)

The email button which sends the user information through email 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 email button:

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

This formula ensures that the email button is only enabled if both the name and the email fields are valid. (Properties which can be set through formulas can be accessed from other formulas by typing the field name, followed by ., and the name of the property.)

Remember that the name and email fields are considered valid even if they haven’t been filled out. The email 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 screen if the switch field has not been switched on. Form screens (and text screens) feature the property NextScreenAvailable which can be used for this purpose. To reveal the properties of the current screen in the inspector (as opposed to the properties of its fields, buttons and other items), click the screen toolbar housing the screen title and the back and forward buttons.

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

TermsSwitchTermsSwitch

(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 can optionally be made part of reports.

(You need to toggle the option Include hidden fields in the inspector to make this happen, which is a step the video leaves out. You could also use the IncludedFields property to determine what fields should be included in the report.)

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

NOW()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 email 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 email 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 screen following the registration form. Had there been such a screen, 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 .