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.

Overview

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.

Momentum

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.

Momentum

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.

Momentum

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.
  • Tooltip
  • Description

Once you have filled in the parameters, click Save to add the form component to the form.

Momentum

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.

Momentum

4. Layout Components

a) Columns

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.

Momentum

b) Content

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.

Momentum

5. Conditional fields

a) Simple

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

b) Advanced

In addition to Simple Conditional logic, you can also use Advanced Conditional logic, which uses actual JavaScript for any combination of conditions.

JavaScript conditional logic requires you to set the value of show to either true or false. You have access to the current value of any form component via the data object, and the components API key. Advanced Conditional logic will only work, if Simple Conditional logic isn’t already defined.

  • 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"
Momentum

6. Customizing the style

a) Simple

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.

Momentum

b) Advanced

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.

Momentum

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.

Momentum

To get the external_id of the field, go the Podio app and open the developer page.

Momentum

Scroll down to find the external_id of the related Podio field.

Momentum

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[1]=true
  • Multiple Category: forms.momentumtools.io/?form=form_id&external_id[1]=true&external_id[2]=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.

Momentum

The pop-up will show you the item ID of the related item.

Momentum

10. Calculated Fields

Coming soon.