Form: Dynamic

The Dynamic Form allows Studio Users to dynamically load forms within a single page based on a query string parameter.  Page Builder v5.01 or later is required for this Component.

Add a Dynamic Form to a Page

1
Create or open an existing app.
2
Click the Edit Pencil on a Page.
3
Click the Green + Icon, located in the bottom right corner.
4
Either scroll to Form: Dynamic in the list or begin typing Form: Dynamic to search the list. 
5
Select the Dynamic Form. The Dynamic Form Component will appear at the bottom of the Content list in the left-hand column. The Properties will appear in the right-hand column.

Dynamic Form Properties

The Dynamic Form component has the following properties:

  • Component Id - Sets the name of the Solid Button component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.

    Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.
  • Form Query String Parameter- Enter the query string parameter. Default is set to fid. 

Field Input Styling

  • Fill Color - Sets the color of the Component. There are two ways to set the Fill Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. 
  • Text Color - Sets the color of the Text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Focused Color - Sets the focused color. There are two ways to set the Focused Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Highlight Color - Sets the highlight color. There are two ways to set the Highlight Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Border Color -Sets the color of the border. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Border Width - Sets the width of the border. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). The border does not appear if it is set to 0 px.
  • Border Radius - Sets how rounded the corners appear by entering a number from 0 to 24. A setting of 0 will result in sharp corners and a setting of 24 will result in rounded corners.
  • Error Message Color - Sets the color of the error message There are two ways to set the Error Message Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.

Switch Input Styling

  • Active Color - Sets the active color. There are two ways to set the Active Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field. 
  • Inactive Color - Sets the inactive color. There are two ways to set the Inactive Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Check Color - Sets the check color. There are two ways to set the Check Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.

Submit

  • Button Style - Select the style of the button from the drop-down. Choose between Solid or Outline. 
  • Button Color - Sets the color of the button. There are two ways to set the Button Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Button Text - Enter the text as it should appear in the button. 
  • Button Text Color - Sets the color of the Text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Button Bold Font - Toggles on or off to display the text as bold. 
  • Button Border Color - Sets the color of the border. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Button Border Width (px) - Sets the width of the border. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). The border does not appear if it is set to 0 px.
  • Button Shadow - Toggles on or off the shadow for the button.
  • Border Radius (px) - Sets how rounded the corners appear by entering a number from 0 to 24. A setting of 0 will result in sharp corners and a setting of 24 will result in rounded corners.
  • Submission Confirmation Message - Click Edit to open the Rich Text content modal. Enter the text in this modal. The text will wrap and there is no limit on the number of characters allowed. The toolbar is used to format the text as needed.
  • Submission Overlay Color - Sets the overlay color. There are two ways to set the Inactive Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Redirect on Submit - Toggles on or off to redirect users upon submission.  
  • Redirect Link - Sets the link to another Page in the app or an external URL.
  • Redirect Toast Background Color - Sets the color of the redirect toast. There are two ways to set the Redirect Toast Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Redirect Toast Border Color - Sets the border color of the redirect toast. There are two ways to set the Redirect Toast Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Redirect Toast Border Width (px) - Sets the width of the border. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). The border does not appear if it is set to 0 px.
  • Redirect Toast Border Radius (px) - Sets how rounded the corners appear by entering a number from 0 to 24. A setting of 0 will result in sharp corners and a setting of 24 will result in rounded corners.

Cancel

  • Button Style - Select the style of the button from the drop-down. Choose between Solid or Outline. 
  • Button Color - Sets the color of the button. There are two ways to set the Button Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Button Text - Enter the text as it should appear in the button. 
  • Button Text Color - Sets the color of the Text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Button Bold Font - Toggles on or off to display the text as bold. 
  • Button Border Color - Sets the color of the border. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Button Border Width (px) - Sets the width of the border. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). The border does not appear if it is set to 0 px.
  • Button Shadow - Toggles on or off the shadow for the button.
  • Border Radius (px) - Sets how rounded the corners appear by entering a number from 0 to 24. A setting of 0 will result in sharp corners and a setting of 24 will result in rounded corners.
  • Link - Sets the link to another Page in the app or an external URL.

Dynamic Form Placement Settings

The Placement Settings for the Component sets which column(s) the Component will appear. Each Page of the app can have a different number of columns that are set in the Layout section of the Page Settings. The following Placement settings are available for this Component:

  • Column Start - Sets the column where the Component will start. 
  • Column Span - Sets how many columns the Component will span. 
  • Padding - Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.
  • Display Mode - Sets how the Component is displayed. If Both is selected, the Component will always show. Both are the default option. If Optimal is selected, the Component will only show if the browser supports the app. The main supported browsers are Chrome and Safari. If Degraded is selected, the Component will only show if the browser does not support the app. The main unsupported browser is Internet Explorer.

Still need help? Contact Us Contact Us