Prefilling fields in webforms

Fields in a Podio webform are empty by default when the page is visited. In this article you'll learn how you can pre-fill fields in your webform by adapting the URL of your webform.

At the end of this tutorial, you'll be able to create a prefilled form like this:

https://podio.com/webforms/14645648/981612?fields[title]=Wouter%20Walmink&fields[email-address][][value]=wouter@podio.com&fields[product]=339185024

Note: prefilling webforms only works if you link directly to the webform page, not when you embed the webform into your own webpage.

1. Go to the developer page of the app

Go to the app which webform you’d like to prefill. Open the app menu and select the option “Developer” (at the end of the option list).

2. Find the external ID’s of the fields you want to prefill

On the developer page, you will see a list of all fields in the app. For any field you want to prefill, note its corresponding value in the “External ID” column.

3. Get the URL of your webform

Go to the app which webform you’d like to prefill. Open the app menu and select the option “Webform”.

In the webform editor, copy the link under “Shareable link”.

4. Creating a URL that prefills a text field

To make the prefilling work, we follow a standard way of adding parameters to a URL. The format looks like this:

Format: webform url ? fields[field external ID] = value

Example: https://podio.com/webforms/14645648/981612?fields[title]=Wouter%20Walmink (see live)

As you can see in this simple example, we’ve added a question mark after the standard URL, followed by the word “fields”, the external ID of the field in between square brackets, an equal sign and then the actual value.

Any such URLs that you build yourself are not stored anywhere by Podio. They do also not affect the original URL as it appears in the webform editor, which will always be an empty form. The parameters that you add to the URL will simply be used to prefill the webform when it's loaded. You can create as many of these URLs as you want and share them to provide webforms prefilled in different ways for different people or purposes.

Note: There are a lot of characters that are not accepted in URLs, like spaces and commas. If the value for your field contains anything more than letters or numbers, it’s probably best to use this simple URL encoding tool. Type or copy the text you want to use, click “encode” and it will convert the text to a string that you can safely use in your URL. For example, it will replace any space with "%20".

5. Creating a URL for prefilling multiple text fields

To prefill more than one field, you can add additional parameters by separating the field and value pairs with an ampersand (&), like this:

Format: webform url ? fields[field external ID] = value & fields[field external ID] = value

Example: https://podio.com/webforms/14645648/981612?fields[title]=Wouter%20Walmink&fields[review]=I%20think%20this%20product%20is%E2%80%A6 (see live)

6. Handling other types of fields

Podio has a many different types of fields. The text field we’ve used so far is simple as it’s a single value, but other fields like the email or date field are more complex. To complete this tutorial, here is a complete overview of the supported field types and what format you need to use to prefill them.

Note that there are three fields that are not supported for prefilling: image upload, file upload and the relationship field when set to "create new item".

Field type Format
Text fields[ID]=test
Number fields[ID]=5
Category (dropdown) fields[ID]=1 (=index of option)
Category (list, single option) fields[ID][][value]=1
Category (list, multiple options)  fields[ID][][value]=1&fields[list-multi][][value]=2&...
Email fields[ID][][type]=home
fields[ID][][value]=test@domain.com
Phone  fields[ID][][type]=mobile
fields[ID][][value]=5553064
Link  fields[ID][][value]=http://google.com (repeat to add multiple links. Note that links must be URL encoded)
Progress fields[ID]=45 (Between 0 and 100)
Relationship select (single) fields[ID]=ITEM_ID (See below how to find the item's ID. Not supported in IE8)
Relationship select (multiple)  fields[ID][][value]=ITEM_ID&fields[relationship][][value]=ITEM_ID (See below how to find the item's ID. Not supported in IE8)
Duration fields[ID][days]=1
fields[ID][hours]=2
fields[ID][minutes]=3
fields[ID][seconds]=44
Location (flat) fields[ID]=Taastrup%20Ludvig (Remember to encode your text for URL)
Location (structured) fields[ID][street_address]=Skelbækgade%202
fields[ID][postal_code]=1717
fields[ID][city]=Copenhagen
fields[ID][state]=Sjælland
fields[ID][country]=Denmark
Contact fields[ID][name]=Jeremy%20Jones
fields[ID][title]=Sales%20agent
fields[ID][organization]=IT%20Tech%20Inc.
fields[ID][phone]=%2B45%2012345678
fields[ID][mail]=jjones%40ittech.dk
fields[ID][skype]=jjones
fields[ID][url]=www.ittech.dk
fields[ID][address]=Skelbækgade%20246
fields[ID][zip]=1717
fields[ID][city]=Copenhagen
fields[ID][state]=Sjælland
fields[ID][country]=Denmark
Money fields[ID][value]=10 (currency cannot be set)
Organisation (single) fields[ID]=Google
Organisation (multiple) fields[ID][][value]=Google&fields[ID][][value]=IBM
Date fields[ID][start]=2014-02-24 09:30
fields[ID][end]=2014-02-25 22:30

 

Finding an item's ID (for prefilling the relationship field)

If you want to prefill a relationship field, you need the unique item ID of the relevant item(s). You can find this ID by going to the item in Podio, click the "Actions" button and choose "Developer". In this modal, you will find the item ID.

Was this article helpful?
14 out of 14 found this helpful
Powered by Zendesk