JotForm

The JotForm Component which is a part of the Form Component Set allows Studio Users to integrate JetForm into their apps. There are two display options for JotForm: JotForm and JotForm Popup

Add JotForm 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 JotForm in the list or begin typing JotForm to search the list. 

5

Select the JotForm display style to use in the app. The JotForm Component will appear at the bottom of the Content list in the left-hand column. The JotForm Properties will appear in the right-hand column.

JotForm Properties

The JotForm component has the following properties:

• Component Id - Sets the name of the JotForm 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.
• JotForm Embed Form URL - Enter the JotForm page URL. How to find the JotFrom Embed Form URL.
  
  
• Component Height - Set the desired height for the component in pixels between 150-3,000.

JotForm Popup Text Properties

The JotForm Popup Text component has the following properties:

• Component Id - Sets the name of the JotForm 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.
• JotForm Embed From URL - Enter the JotForm page URL. How to find the JotForm Embed Form URL. 
  
  
• Button Text - Enter the text to appear on the button. 
• Button Color - Sets the color of the button. There are two ways to set the Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
• Button Text Color - Sets the color of the text. There are two ways to set the Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
• Horizontal Button Position - Select the horizontal position of the button: left, right, or center. 
• Popup Height (px) -  Enter the component height in pixels between 150-3,000.
• Popup Width (px) - Enter the component width in pixels between 150-3,000.

JotFromPlacement 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.