Dynamic Forms: Tutorial Guide
Dynamic Forms for Podio allows you to easily build complex forms with lots of complex logic. This tutorial page will guide you through the more advanced features.
- Creating a Form
- Edit, Share or Delete a Form
- Form Components
- Layout Components
- Conditional fields
- Customizing the style
- Pre-filled values
- Update existing items
- Calculated fields
1. Creating a Form
Forms can be created from the Dynamic Form home page. Get to this page by clicking on Dynamic Forms in the navigation bar. Select your organization, workspace and app from the drop-down fields. You can choose whether you want to create a form (1 page form) or a wizard (form with multiple pages). Then click the Create new Form button to begin creating a form.
Important: It is possible to create multiple forms for the same Podio app.
2. Edit, Share or Delete a Form
When you click Save after building your form, you will be re-directed to the Dynamic Form home page. In the section Your Dynamic Forms you will see your existing forms. There you have the option to edit, share or delete your form.
Important: Deleting a form cannot be undone. Use caution.
3. Form Components
A Form component collects user data and serves as the display or user interface within the system. Form components define the type of widget that users will enter their data and need to be linked to a Podio field of the related Podio app. To add a form component to a form, drag and drop the component from the left column into the desired location within the form.
When you drop the form component, the settings form for the component will open. The settings for a form component are different for each component type, but the following parameters are usually present:
- Label: The name or title for this component.
- Podio Field: Link it to a field of the related Podio app. In the Podio field drop-down you can only select the Podio fields that are relevant for the component type. Eg: The single text component cannot be linked to a number field in Podio.
- Placeholder: The placeholder text that will appear when this field is empty.
Once you have filled in the parameters, click Save to add the form component to the form.
To edit a form component on a form, hover over the component and click the gear icon. You will then be presented with the settings form for the component.
4. Layout Components
The Column layout component can be used to split any area into two columns. Simply drag and drop the Column button onto the form and the area you drop it on will be split in two.
Content may be added to a form to provide non-field information.
- Example 1: Add instructions at the top of a form that are for display only.
- Example 2: Add section titles to structure your form.
There are no settings for a Content component and the value isnotsubmitted back to the server. A WYSIWYG editor has been provided to help with formatting the content. If you use the HTML view of the editor, note that all unsafe HTML is stripped before rendering to prevent cross-site scripting exploits.
5. Conditional fields
Any form component can use conditional logic to determine when to hide or display itself. The settings for a conditional field, are configured on the component itself, and can be found by viewing the Conditional tab within the components settings.
The conditional logic is based on the following rules:
- Each field can hide or display.
- The visibility is dependent on another component defined within the form.
- The logic is activated when the configured field contains the plaintext value defined in the settings.
- Single condition: show = data["lead-status"] === "Hot lead"
- AND condition: show = data["lead-status"] === "Hot lead" && data["Call next week?"]==="Yes"
- OR condition: show = data["lead-status"] === "Hot lead" || data["Call next week?"]==="Yes"
6. Customizing the style
Via the Customize tab of the form builder, you can change a few standard parameters to change the lay-out of your form. Via the Preview button you can see how your changes impact the lay-out.
To add your own custom CSS code to your form, go to the Dynamic Form home page, and click on the share icon of the form. A pop-up will be shown with the shareable link and the embed code. In this embed code you can add the custom CSS file.
7. Pre-filled values
a) Text and number fields
To pre-fill the values for text and number fields, use the following syntax:
- One value: forms.momentumtools.io/?form=form_id&external_id=value
- Multiple values: forms.momentumtools.io/?form=form_id&external_id1=value1&external_id2=value2
To get the form_id go to the Dynamic Form home page, and click on the share icon of the form. The form_id is the 12-digit string at the end of the shareable link.
To get the external_id of the field, go the Podio app and open the developer page.
Scroll down to find the external_id of the related Podio field.
b) Category fields
To pre-fill the values for category fields, you need to specify which label id (1, 2, ...) you would like to check. Use the following syntax:
- Single Category: forms.momentumtools.io/?form=form_id&external_id=true
- Multiple Category: forms.momentumtools.io/?form=form_id&external_id=true&external_id=true
8. Update existing items
To update an existing Podio item via a Form, use the following syntax:
- Syntax: forms.momentumtools.io/?form=form_id&item_id=item_id
Click here to learn how you can find the form_id.
To find the item_id, go the Podio app and open the Podio item. Click on Actions, then developer info.
The pop-up will show you the item ID of the related item.
10. Calculated Fields