Building a Simple Form (37 min)
Completion requirements
01 Getting Started
This tutorial will cover how to create a simple form in Titan Web. This includes form structure, adding input fields, and basic conditional logic. We will also cover field validation, showing and hiding fields, and mandatory fields.
02 A Form Element
1. Click the + icon and select the Form tab. Drag and drop the form element onto the canvas. The Insert Form window pops up.
2. Use the fields to configure the number of columns, rows, and spacing between rows. You also have the option to use these settings as the default configuration for your form element.
You can also edit the form directly from the canvas to change the columns and rows.
3. To add a column to your inserted form, click on the + icon at the top. To add a row, click the + icon at the bottom of the form.
03 Adding Elements to a Form
1. To add input elements to your form, click on the + icon and select the input tab. Drag and drop the desired elements into your form.
04 A Text Field
1. Click on the element you want to edit and select the gear icon. The element settings menu displays.
2. Use the Label field to tell users what data to provide. e.g.: First Name. To provide more context, use the placeholder field or leave it blank.
3. In cases where multiple fields in your form need to have the same name use the Metadata tab to differentiate these fields. Insert a unique tag and a comment.
These steps can be repeated for all field types.
2. Use the Label field to tell users what data to provide. e.g.: First Name. To provide more context, use the placeholder field or leave it blank.
3. In cases where multiple fields in your form need to have the same name use the Metadata tab to differentiate these fields. Insert a unique tag and a comment.
These steps can be repeated for all field types.
05 An Email Field
1. To add an email input element to your form, click on the + icon and select the input tab. Drag and drop the email element into your form.
An email field has built-in validation to ensure that the input provided for this field will be an email.
Use the email element settings menu to make changes to the element.
An email field has built-in validation to ensure that the input provided for this field will be an email.
Use the email element settings menu to make changes to the element.
06 A Phone Field
1. To add a phone input element to your form, click on the + icon and select the input tab. Drag and drop the phone element into your form.
2. To set a default country, click the number element gear icon to open the element settings menu. Navigate to the interactivity tab, and use the default country drop-down to select the default country.
This is useful if you know all your users will work within the same country—for example, the United States.
2. To set a default country, click the number element gear icon to open the element settings menu. Navigate to the interactivity tab, and use the default country drop-down to select the default country.
This is useful if you know all your users will work within the same country—for example, the United States.
07 A Radio Button Element
1. To add a radio element to your form, click on the + icon and select the input tab. Drag and drop the radio element into your form.
2. To map static values for your form, click on the radio element gear icon and select the content tab.
3. Click on the static values option and select Edit Mapping. The Configure Items screen opens.
4.
Type in the Labels and Values. You can use the - sign located next to the items to remove an item or use the other options to add items.
2. To map static values for your form, click on the radio element gear icon and select the content tab.
3. Click on the static values option and select Edit Mapping. The Configure Items screen opens.
4.
Type in the Labels and Values. You can use the - sign located next to the items to remove an item or use the other options to add items.08 A Date Field
1. To add a date input element to your form, click on the + icon and select the input tab. Drag and drop the date element into your form.
2. Click on the element gear icon and use the content tab to make changes to the format. For example, the date format.
2. Click on the element gear icon and use the content tab to make changes to the format. For example, the date format.
09 Adding a Button
1. To add a button input element to your form, click on the + icon and select the button tab. Drag and drop the button element into your form.
2. Use the button element settings menu to make changes to the button text.
3. To center the button in the middle of the form, use the kebab menu to merge the rows. You can do a custom merge to merge multiple cells.
4. Click on the button and select the alignment icon. You can choose from a variety of alignment options.
The alignment applies to the button’s parent container. In this case, the parent container is the form element.
2. Use the button element settings menu to make changes to the button text.
3. To center the button in the middle of the form, use the kebab menu to merge the rows. You can do a custom merge to merge multiple cells.
4. Click on the button and select the alignment icon. You can choose from a variety of alignment options.
The alignment applies to the button’s parent container. In this case, the parent container is the form element.
10 Creating a Condition
For our form, we will create a condition where the form will only ask for the user's birthdate if they are over 18. This means that if the user is under 18, the birthdate element will not display.
When creating conditions it is important to understand that the conditions should be assigned to the field that triggers the condition and not the field that is affected.
1. Click on the Radio element and select the gear icon. The element settings menu opens.
2. Select the Conditions Tab and click the Configure Conditions button. The Set Conditions screen opens.
The element is automatically added to the window.
3. Hover your cursor next to the If condition, click the kebab menu, and select edit. The Edit Node Screen Opens.
4. Use the fields to configure the condition that the value must equal yes.
We will create two separate nodes; one if the value provided does equal yes and another if the value equals no.
When creating conditions it is important to understand that the conditions should be assigned to the field that triggers the condition and not the field that is affected.
1. Click on the Radio element and select the gear icon. The element settings menu opens.
2. Select the Conditions Tab and click the Configure Conditions button. The Set Conditions screen opens.
The element is automatically added to the window.
3. Hover your cursor next to the If condition, click the kebab menu, and select edit. The Edit Node Screen Opens.
4. Use the fields to configure the condition that the value must equal yes.
We will create two separate nodes; one if the value provided does equal yes and another if the value equals no.
11 Configuring a Then Condition
1. Click on the + Icon next to the Then condition. The Add Node screen opens.
2. Select the Affected Element option and click Next.
3. Search for the birthdate element’s metatag. Enable the checkbox and click the Apply button below.
4. Select Next once the configuration is complete.
5. Add a Tag that describes the purpose of the node and select Insert.
The configured condition is displayed in the flow window.
12 Configuring an Else Condition
1. Click on the + icon next to the Else condition. The add Node screen opens.
2. Select the Affected Element option and click Next.
3. Search for the birthdate element’s metatag. Enable the checkbox.
4. Using the drop-down below change the action to Hide and click the Apply button.
5. Select Next once the configuration is complete.
6. Add a Tag that describes the purpose of the node and select Insert.
The configured condition is displayed in the flow window.
13 Updating Condition Rule Name
Naming your condition rules allows easy tracking and helps you remember what the condition is for.
1. Select the Edit icon in the Set Conditions Window.
2. Type in the new condition rule name in the tag name field and click the tick icon.
1. Select the Edit icon in the Set Conditions Window.
2. Type in the new condition rule name in the tag name field and click the tick icon.
14 Making Fields Mandatory
1. Click on the element gear icon and navigate to the element settings window.
2. Select the Interactivity tab and enable the mandatory function.
The same steps can be followed for any of the input fields.
2. Select the Interactivity tab and enable the mandatory function.
The same steps can be followed for any of the input fields.
15 Creating a Value Rule
1. Click on the element gear icon and navigate to the element settings window.
2. Select the Value Rule tab and click the Set Value Rules button. The Set Condition screen opens.
3. Using the drop downs, create a rule that the text is only valid if it contains alphabetic letters.
4. Type in an error message to display to users if they input the incorrect data and click Apply.
2. Select the Value Rule tab and click the Set Value Rules button. The Set Condition screen opens.
3. Using the drop downs, create a rule that the text is only valid if it contains alphabetic letters.
4. Type in an error message to display to users if they input the incorrect data and click Apply.
16 Save and Preview the Project
1. Save and Preview your project.
The Birthdate field does not display to the user as the condition rule has not been met. The Submit button has also moved higher on the form, forms elements offer the greater advantage of automatically resizing on the screen.
If a numerical input is added to the Last Name field, the configured error message displays.
If all text is removed from a mandatory field, a warning message displays.
By answering yes to the radio button question. The birthdate field displays.
The Birthdate field does not display to the user as the condition rule has not been met. The Submit button has also moved higher on the form, forms elements offer the greater advantage of automatically resizing on the screen.
If a numerical input is added to the Last Name field, the configured error message displays.
If all text is removed from a mandatory field, a warning message displays.
By answering yes to the radio button question. The birthdate field displays.
17 Adding On Click Configuration to a Button
1. Navigate to your web project. Click on the button gear icon and the element settings window opens.
2. Select the Interactivity tab and click the Configure On Click Action button. The OnClick Action screen opens.
3. Click on the + icon next to the Start. The Add Node screen opens.
4. Search for the Validate option and select Validate Fields.
5. Use the dropdowns to choose which fields need to be validated. For example, we want the form example on a web page to be validated. Click Next.
6. Type in a tag name that describes the condition and click Insert.
The condition is displayed in the actions flow screen.
For this example, we will show messages to the user whether their content is valid or invalid.
7. Click the + icon next to the On Invalid option. The Add Node screen opens.
8. Select the Show Message option and click Next.
9. Create a custom message to display to the user if they provide invalid data. You can also customize how the font is displayed.
The same steps can be followed when inserting a validation message, except a confirmation message should be selected in the add node screen.
3. Click on the + icon next to the Start. The Add Node screen opens.
4. Search for the Validate option and select Validate Fields.
5. Use the dropdowns to choose which fields need to be validated. For example, we want the form example on a web page to be validated. Click Next.
6. Type in a tag name that describes the condition and click Insert.
The condition is displayed in the actions flow screen.
For this example, we will show messages to the user whether their content is valid or invalid.
7. Click the + icon next to the On Invalid option. The Add Node screen opens.
8. Select the Show Message option and click Next.
9. Create a custom message to display to the user if they provide invalid data. You can also customize how the font is displayed.
The same steps can be followed when inserting a validation message, except a confirmation message should be selected in the add node screen.
18 Save and Preview the Project
1. Save and preview the project.
Due to the built-in validation for the email field, if the user inputs an invalid email, this will be flagged.
If the user tries to submit the form without completing the fields directly the following error message displays.
If the user provides valid data and clicks the submit button, the confirmation message displays.
Due to the built-in validation for the email field, if the user inputs an invalid email, this will be flagged.
If the user tries to submit the form without completing the fields directly the following error message displays.
If the user provides valid data and clicks the submit button, the confirmation message displays.