Dynamic dropdowns

Introduction

Options for a dropdown field are generally static and are defined in the form builder. However, there are cases where you might want to fetch the options for a dropdown from a remote source dynamically.

When editing the dropdown field go to the Options tab. Here click on Source to see the list of possible sources for the options (the default being List):

Dynamic dropdowns are a powerful feature, not offered by most form builders like Typeform ↗.

Remote URL

This allows you to fetch the options from a public URL. The URL must return the options in this format:

{
  "total": 100,
  "data": [
    { "value": "1", "label": "Option 1" },
    { "value": "2", "label": "Option 2" },
    { "value": "3", "label": "Option 3" }
  ]
}

If the data is not in the above format you can use the Custom JSON path option to specify the path to the options and other fields.

You can use our demo endpoint https://api.formcrafts.com/public/options to test this feature.

Click on the Preview button on the top-right corner to see the options fetched from the remote URL.

There are some configuration options when using the remote URL source:

Enable pagination: When enabled, the dropdown will request the options in chunks. Example, when the user first opens the dropdown it will request the first 25 options. When the user scrolls down it will request the next 25 options and so on. We will append limit and page as query parameters to the remote URL.

Remote search: When enabled, the dropdown will send the search query to the remote URL, allowing the remote server to filter the options based on the search query. We will append an s query parameter to the URL to achieve this.

Together, these two options allow you to connect your dropdown to a source with any number of options.

Authorization header: You can also add an authorization header to the request. This is useful when the remote URL requires authentication. If you are using sensitive tokens here please create a separate token with limited access.

Custom JSON path: Sometimes, the data from the remote URL might not be in the exact format we need. JSON paths help us find and use the right information from the data we receive. Here’s how it works:

• Option list path: This tells us where to find the list of options in the data.
• Total count path: This shows us where to find the total number of options.
• Option label path: This points to where each option’s display text is located.
• Option value path: This indicates where each option’s behind-the-scenes value is found.

Option list path, and option value path are required.

For example, if your data looks like this:

{
  "result": {
    "count": 100,
    "items": [
      { "name": "Apple", "details": { "id": 1, "color": "red" } },
      { "name": "Banana", "details": { "id": 2, "color": "yellow" } },
    ],
  },
};

Your JSON paths might look like this:

1. Option list path: $.result.items[*]
2. Total count path: $.result.count
3. Option value path: $.details.id
4. Option label path: $.name

This tells the dropdown where to find each piece of information it needs. By using these settings, you can make the dropdown work with many different types of data from remote URLs.

JSON paths are written in JSONPath ↗ syntax. You can test your JSON paths using this tool ↗.

You can also reference other fields in the remote URL. This allows you to fetch options based on the value of another field. For example, if you have a dropdown for countries and a dropdown for states, you can fetch the states based on the selected country:

Google Sheets

You can fetch dropdown options from a Google Sheet.

For example, we have a Google Sheet with the following data:

We want the option labels to be fetched from the Name column (range A2:A11), and the option description from the Email column (range B2:B11).

We will configure the Google Sheets source as follows:

Click on the Preview button on the top-right corner to see the options fetched from the Google Sheet.

Salesforce

Please read the Salesforce documentation for more information on how to fetch options from Salesforce.