Create and Configure a Form in Titan Web

Business Background

When you need users to submit information through a project, you can create a form to capture details in a structured layout. Forms help you collect information such as contact details, requests, applications, feedback, or any data needed for your business process.

You can configure the form layout, add fields, include text, apply conditional logic, and adjust rows or cells to match the way users should complete it.

Titan Solution

Add a Form element to your project and configure it according to your process. You can add input fields, text, conditional logic, and layout adjustments to capture the information you need and support your Salesforce-connected workflow.

How to Guide

You can also do the following:

• Insert a form and set the form size
• Add and edit columns
• Add and edit rows

Insert a form

1. Click the + button to open the list of elements.
2. Click the Form option in the list.
3. Click-and-drag the Form element to the canvas.

4. Change the following if you do not want to use the default values:
   • Number of columns: the default is 2.
   • Number of rows: the default is 3.
   • Row spacing: the default is 10 pixels.
5. If you made any changes, use the checkbox to set these settings as default for new forms if necessary.
6. Click the Apply button. The form is added to the canvas.

Note:

You will see the warning message: “Device Notification: View a web project on mobile by setting the device manually or clicking auto-layout”.

Learn more about device layouts.

Note:

This message is shown if the form has two or more columns. On a  mobile device (where the width of the device is smaller), the contents of each cell in the second column (per row) is moved under the contents of the cell in the first column and only one column is shown.

Rows are numbered from 1 onwards, and columns are labeled from A onwards.

You can drag the table bigger if necessary by using the table handle on the right.

Add and edit columns

1. Click the + icon next to the columns to add more columns.

2. Hover with the mouse pointer on a column to show the Kebab icon.
3. Click the Kebab icon to open the context menu. The column is greyed out.

4. Use the pop-up menu to do the following:
   • Add a column before the selected column.
   • Add a column after the selected column.
   • Move the selected column to the left (if applicable. This option is not shown if the first column was selected.)
   • Move the selected column to the right (if applicable. This option is not shown if the last column was selected.)
   • Rename the column.
     • Click this option to open the Rename Column Name pop-up and change the name of the column.
     • Alternatively, rename the column on the Layer List.
   • Delete the column by clicking on this option.

In this example, a column was added to the left of column B (called column E) and to the right of column B (called column F).

Add and edit rows

1. Click the + icon next to the rows to add more rows.

2. Hover with the mouse pointer on a row to show the Kebab icon.
3. Click the Kebab icon to open the context menu.

4. Use the pop-up menu to do the following:
   • Add a row before the selected row.
   • Add a row after the selected row.
   • Move the selected row up (if applicable. This option is not shown if the first row was selected.)
   • Move the selected row down (if applicable. This option is not shown if the last row was selected.)
   • Merge rows.
   • Rename the row.
     • Click this option to open the Rename Row Name pop-up and change the name of the row.
     • Alternatively, rename the row on the Layer List.
   • Where used.
   • Delete the row by clicking on this option.

In this example, a row was added above row 3 (called row 6) and below row 3 (called row 7).