Add a Form block

Prerequisites

• Create a model with the data you need, see our knowledge base article, Create a new model.
• Open an existing page or create a new one, see our knowledge base article, Add a new page and header.

Procedures

Add a Form block to your page

1. On your page, select ADD CONTENT, and in the Content dialog box, select the Form block.
2. Scroll down and in the Title box, type in a meaningful title for your form.
3. From the Model list, select the model you set up for this form.
4. Select SAVE.

Choose data

1. On the Settings page, on the Choose data section, in the Properties list, select X on any properties you don't want to include.
2. If you want to include properties from another model, select the Allow related models to be updated in the same form option:
   The additional model you want to include here must have a foreign key property to the form's primary model so that it appears in the Relationship list.

   This model has a foreign key to the primary model used when adding the form. On the Choose Data section, you select the Allow related models to be updated in the same form option, and from the Relationship list, you choose this model.

   1. From the Relationship list, select the model you want to include. For the model to appear here, it needs a foreign key property to the primary model used to create the form.
   2. The Properties list populates with all the properties in the model. Remove any properties you don't want to include. You can configure each field in the Design form section.
      
3. Select CONTINUE.

When you're in the Design form and Additional configuration settings, you can quickly navigate to the Choose data section by selecting Choose data at the top of the page.

Design form

Applaud orders your form fields in the order of the model's properties in the previous step.

You can remove any hidden fields from view by clearing the Show hidden fields option.

1. Select the individual fields for additional configuration options.

   

   For multirow fields, added when you selected the Allow related models to be updated in the same form option and added a related model's fields, you can move the field order by selecting the arrows.

   
   • Drag and drop - select and drag the gray bar above the form field to your desired spot and release when you are happy.
   • Delete - Select the trash icon in the gray bar to delete the field from your form.
   • Edit - Select the pencil icon to open the Edit field dialog box. Applaud opens the relevant edit dialog box with appropriate options depending on the field type or submit button:
     • Edit field - text
     • Edit field - number
     • Edit field - email
     • Edit field - date
     • Edit field - date range
     • Edit field - select-single
2. Optionally, add additional content to your form, select ADD CONTENT:
   • TEXT - Adds a rich text field to your form. You need to edit the field once added so you can enter the text you want to appear, see our knowledge base article, Edit field - html.
   • LINK - Adds a link to your form. Once added, you need to edit the field to enter the link text and either select the applaud page or enter the URL, see our knowledge base article, Edit field - html (LINK).
   • DIVIDER - Adds a line to your form, which you can move to the position you want. You can edit this to change the label and use this in form interactions.
   • FIELD GROUP - Adds a container where you can drag and drop fields into it. You can then apply a form interaction to the fieldset to show or hide the group depending on certain conditions, see our knowledge base article, Edit field - fieldset.
     
   • SUBMIT BUTTON - Adds another submit button, which you can design the look and where the form redirects to after submission, see our knowledge base article, Edit submit button.
3. Optionally, add an interaction to your block. Scroll down the page to see the Form Interaction section. See our knowledge base article, Add a new form interaction.
4. Select CONTINUE.

When you're in the Additional configuration settings, you can quickly navigate to the Choose data or Design form sections by selecting Choose data or Design form at the top of the page.

Additional configuration

Action buttons

1. Under General content settings, next to Action buttons* select the plus "+" icon.
2. In the Title box, type in the text you want to appear on your button.
3. Under the Type of action section, from the Opens in: list, select what and how you want the button to open.
   • Open page - Loads the Target list with pages from your Applaud tenant.
   • URL - You need to type in the full website address in the Target box.
   • Regular / Same tab - Takes the user away from the current page to the new page.
   • Modal - Keeps the user on the page but opens a dialog box with the new page contained in it.
   • New tab - Opens a new tab in the user's browser with the new external website.
4. From the Target list, select a page from the available pages in your Applaud tenant or type the complete URL address, for example, https://www.google.com.
5. From the Icon list, select an icon for your button and from the Color picker, select a color for your button.
6. From the Weight list, select how you want your button to appear:
   • Normal - The button appears with a colored rectangle background with black text.
   • Light - The button doesn't have a background, and the text is your selected color.
7. From the Hide/show based on a model property list, select a property, and then from the Condition list, select either the Hide if true option or the Show if true option.

Show the title and header bar

If you don't want a title on your block, clear the Show the title and header bar option.

Preferred width

To configure how wide you want your block, from the Preferred width list, select an option:

• Automatic - Spans the width of the column on the page depending on what page layout option you have selected.
• Full-width - Spans the width of all columns but doesn't go beyond the margins on either side of the page unless you select the Edge-to-edge option.
• Two-third - If you have a three-column page layout, this spans across two of the columns. If you have a two-column page layout set, this spans just beyond the first column, but further blocks won't appear above the advert in the second column, only below it.
• Half-width - If you have the three-column page layout, this spans across a column and a half. If you have a two-column page layout, this spans one column.

Background color

To set the Background color of your block, select the color of your choice. The color picker shows a list of preconfigured colors with 100% opacity or fully opaque.

1. Color palette
   A chart of preconfigured colors. Scroll down to see more colors. Not available in the call-to-action content block.
2. Color gradient panel
   A mixture of two linear color gradients. Once you select a color from the palette, you can use this panel to pick the color you want.
3. Sample color
   Shows the color you've chosen, and that will be applied.
4. Hue slider
   A linear gradient of colors. You can choose the main hue you want.
5. Opacity slider
   Controls the transparency of the color. Use it to brighten or darken your chosen color.
6. Color mode
   If you know the HEX (Hexadecimal) code you want to use, you can enter it here. You also have the option to toggle to two other formats.
   RGBA - (red, green, blue, alpha) decimal values.
   
   HSLA - (hue, saturation, lightness, alpha) values.
   

Hide block on certain screen sizes

If you want to prevent this block from being displayed on specific devices from the Hide on list, select those conditions where you want to hide this block.

Hide or show this block using filters

Show or hide this content block when certain conditions are met. For example, show to a manager but hide from a non-manager. You can base these filters on anything, such as job role, department, or location.

1. Select the Hide or show this block using filters option.
2. Under the Conditions section:
   • Hide when ALL of the following conditions are met (and) - If you want to hide this block when the selected data meets every condition you add, add a condition under this section.
   • Hide when ANY of the following conditions are met (or) - If you want to hide the block when the selected data meets just one of several conditions, add your conditions under this section.
3. From the Property list, select the model's property.
4. From the Criteria list, select the condition you want the property value to meet for the block to be hidden.
5. In the Value box, enter the property's value you want the condition to meet for the block to be hidden.

Submission settings

You can change the button to submit the form and redirect the user to another page after the user submits the form.

1. Select SUBMISSION SETTINGS and in the Button label box, type the text you want to appear on your submit button.
2. If you want to prevent the form from being submitted, clear the Visible option, and if you want to disable the submit button, clear the Enabled option.
3. From the Weight list, select if you want the button to be "Normal" or "Light" weight.
4. From the Color palette, select the feeling color you want the button.
5. From the Icon list, search for and select the icon you want to appear in the button.
6. If you want to redirect the user after they submit their form to another page in your tenant, under the Redirection section, select Redirect to a different page, and from the Page list, select the page you want to open and how you want it to open from the Open as list.

Finish

When you are finished, select UPDATE.

See more:

• About form blocks
• About form interactions

Reference:

• Content dialog box
• Settings: (Form)