Try It Yourself: Adding, Editing, and Moving Fields
In this video, you'll get familiar with the Form Designer Interface, and learn how to add, edit, and rearrange fields.
Try It Yourself
In this lesson we'll add some fields to the form, edit some field properties and rearrange the fields to learn the Form Designer basics.
- Click the
'unpin' (Float Panel) icon in the upper right corner of the Properties panel to allow the panel to 'float.' This helps optimize the workspace.
- Click the Forms Root Property Node in the Form Outline panel.
- The Properties panel updates to show the global Form Properties.
- The Properties panel updates to show the global Form Properties.
- In the Properties panel, under Form General Setting, change the value of the Heading property to 'Register for our Event.'
- Right-click in the Live Edit Preview panel and choose Insert New Form Element > Text Field to add a new text field.
- Change the value for the Field Name to 'Name.'
- When adding a new field, the value for the Caption is initially set to the same value as the Field Name.
- When adding a new field, the value for the Caption is initially set to the same value as the Field Name.
- We can use the Form Outline panel to insert a field below the field we just added. Right-click the newly added 'Name' field in the Form Outline panel, then choose Insert New Form Element > Common Fields > Email Address.
- Choosing a field from the Common Fields library inserts a pre-formatted field in the form, complete with appropriate validation where applicable.
- Choosing a field from the Common Fields library inserts a pre-formatted field in the form, complete with appropriate validation where applicable.
- We can also use the Insert Element menu to add a field to the form. To add another field below the 'Email Address,' left-click the newly added 'Email Address' field in the Form Outline panel, then choose Insert Element > Drop Down Menu.
- Change the value for the Field Name to 'Number of Guests.'
- In the Properties panel, find the Field Values property, then click the
'edit values' icon.
- The Field Options dialog opens to let you add options to the drop down.
- The Field Options dialog opens to let you add options to the drop down.
- Add the values 1, 2 and 3 as the options for the number of guests.
- Press the <Tab> key to move between cells, and to add the next row automatically.
- Enter the same value for the Data Value and the Display Value so the value recorded in the database is the same as the displayed value.
- Click the Save button to save your changes and close the Field Options dialog.
- Now, we'll add a final field to the form. Right-click the 'Number of Guests' field in the Live Edit Preview panel, then choose Insert Form Element > Special Fields > Pop Up Calendar.
- This option adds a pop-up calendar to the form.
- This option adds a pop-up calendar to the form.
- In the Properties panel, change the value for the Field Name property to 'Date Attending.'
- Double-click the caption for the pop-up calendar in the Live Edit Preview panel and name it 'Date Attending' as well.
- Finally, let's move the calendar to the top of the form. In the Form Outline panel, click and drag the 'Date Attending' calendar to the top position.
- Click the Save button in the top toolbar to save your changes to the form.
In the next step, we'll look at how we can apply validation to our form.
Have more questions? Submit a request
Please sign in to leave a comment.
0 Comments