Select Page
Field Type: Sub-Select Field - JotForm

Field Type: Sub-Select Field - JotForm

🔴 On2Air Forms - JotForm has been shutdown to focus on our On2Air Backups Airtable app Learn more about automated Airtable backups - on2air.com

⭐
We now have a brand new On2Air FormsOn2Air Forms app for Airtable that doesn’t require JotForm! It connects directly to Airtable. You can sign up for free access at On2Air Forms Signup Learn more here - On2Air Forms

Form Builder: JotForm

The Sub-Select Field is used to populate a dropdown field based on a specific Airtable parent field. With On2Air: Forms, your forms in JotForm connected with Airtable have many advanced features.

You can specify search filters based on parent fields, sort the display order, input text placeholders, specify default values, customize the dropdown display count, and much more.

Learn more about On2Air: Forms

image

In this article

How to Add the On2Air Sub-Select Field to Your Form

💡
We are waiting for JotForm to add the On2Air Forms widget to the Integrations area in JotForm. For now, you will add the On2Air Form fields from the On2Air dashboard instead of in JotForm.

In your individual Form dashboard in On2Air:

  • Click + New Field
  • Choose the field type you need
  • Click Update Details to begin configuring your field
image
‣
Other

Using the Sub-Select Field Configurations

There are two ways you can edit the Sub-Select Field Configurations. You can edit from your JotForm form or you can edit from the On2Air: Forms dashboard. They both display the same configuration options.

From the JotForm form field (This is the easiest)

  • The configuration options will display when choosing the Sub-Select Field from the On2Air Widget in the instructions above

To edit after the setup process

  • Click the field you want to edit
  • Select Widget Settings (the magic wand icon)
  • The Widget Settings will pop out on the right-hand side
  • Click General
  • Click the Edit Settings button
image

From the On2Air dashboard

  • Click the Details button to the right of your form
  • You will be in the On2Air Fields tab
  • Click Details next to the field you want to edit
  • Click Update Details
image
  • Once the configurations are chosen, click Update Field Details
  • If needed, you can also Discard Changes
image

Select Field Configurations

Airtable Connection

  • Select your Airtable Connection - This is the Airtable account where your Base resides

Airtable Source

  • Select Your Base - Choose your desired base
  • Select Your Table - Choose your table
  • Select Your View - Choose your view
image

Search Configuration

Select Search Mode

Search Fields * Search Fields contain the Airtable fields you wanted to be searched when someone is completing your form * This can be one field or multiple

Search Fields - Select the field where you want the user to search * You can add one or multiple options

Search Fields Matching Style - Determines how searches against the Search Fields will be performed

Contains - Default value and most common. Contains any value from the field

Exact Match - User must type in the entire exact match to obtain data * Can be useful for typing in entire email addresses

Case Sensitive - Toggle On for Case Sensitivity - Off by default

Sort Fields - Sort how the results are ordered by Ascending (ASC) or Descending (DESC) * You can add one or multiple options

image

Custom Formula

Custom Formula allows you to create your own special custom search formula. A helper dropdown containing all the fields from your configured table is available.

An additional property of SEARCH\_VALUE is included to be used as a placeholder for any user-typed value in the field. Anything returned ‘True’ in the formula will be displayed in the results.

Custom Search Formula - Create a filtered search using an Airtable formula

*   Example 1: FIND("City", {[SEARCH_VALUE]})
*   Example 2: FIND("[SEARCH_VALUE]",{City)}

Sort Fields - Sort how the results are ordered by Ascending (ASC) or Descending (DESC) * You can add one or multiple options

Display Configuration

Display Field - The specific Airtable field displayed on your form

Value Fields - Fields made available to publish with the submitted field * Useful if submitting values to Zapier or if using with another Sub-Select Field or Placeholder Field. Any of these fields are available for use by other field types or JotForm widgets. * Choose one or multiple options

Widget Type - Determines the style of how the results are displayed in the select field

  • Classic Type - Displays the results as a dropdown field. Useful for pre-configured fields prior to Widget Type update
  • New Style (Recommended) - Displays the results as a dropdown or a list with radio buttons or checkboxes - Configure in Widget Format below New Style works better on a mobile phone

Widget Format - Determines the format of the New Style Widget Type

  • * Dropdown** - Displays the records as a dropdown
  • List - Displays the records in a list with either radio buttons or checkboxes next to each record

With the List option, the results will be displayed with a radio (circle) button if allowing only a single selection or a checkbox if allowing multiple selections, you will also need to modify the Maximum Height for Results and Maximum Height for Expanding Entire Field Area in the Advanced Display Configuration settings below. This will ensure the results field is sized correctly and will display your results best. If you have more than 100 records, we recommend you use a dropdown instead of list, since it will be searchable

Placeholder - Input a text value to be displayed as a placeholder in your dropdown when no item is selected

Help Text - Input a text value to be displayed as help text below the dropdown in your form

Multiple - Choose whether to allow multiple record selections in your results field

  • If choosing a List in the Widget Format, this Multiple option will display checkboxes next to the records in the field
image

Parent Configuration

Parent Source - Determines the parent field of the Sub-Select field. Can be either a Select Field or a Direct Input ID from another JotForm field

Select Field - Choose a previously added Select Field

Direct Input ID - A specific field ID Useful for text fields

Parent Source - Choose your previously configured Select Field in JotForm as the parent field

Parent Source Field - Displays the options from the value field you configured in the parent field

Direct Input ID (Displays only if Direct Input ID is chosen as Parent Source) - ID for specific field in JotForm

Parent Link Mode - Determines the Parent and Child Link

Field Match - Use a field to match

Custom Formula

Child Search Field - Input from the Search Field will match the value in this field

Example: If the user inputs Colorado in the Select Field, the Cities from Colorado will be populated in the Sub-Select Field

In our example, the StateText field is a Rollup field in our Cities Table in our Airtable Base. The Rollup field is a CONCATENATE(values) formula using a Linked Record field from our States Table.

image

Parent Matching Style - Determines how the Parent field is searched to output the Sub-Select Field * Exact Match (Most Common) * Contains * Does Not Contain * Does Not Equal

image

Advanced Search Configuration

Initial Field - A field from your table to specify a pre-filled value in your form field. This is accomplished by using URL parameters.

Example: We added a checkbox field of Display to our Cities table to display only certain cities with or without the checkbox, where 1 = checked and 0 = unchecked.

  • Select the Display field
  • Add ?cities=<searchvalue>|1 OR ?city=<searchvalue>|1 to the end of your form URL
  • Only certain cities will display depending on their checkbox status when your form is loaded

Airtable View

image

Final URL Styling

https://form.jotform.com/201156946102044?city=<searchvalue>|1

image

Case Sensitive - Toggle On for Case Sensitivity - Off by default

Default Value - A specific hard-coded value to display as the default pre-filled value in dropdown. The value must match an option listed in your Initial Field selected above. * If you have a parameter in your Initial Field, it will take priority over the Default Value field.

Dynamic Filter Field - A way to limit the results returned in the field. This is used with URL Parameters. See example above.

Dynamic Filter Matching Style - Determines how the Dynamic Filter Field is searched * Exact Match - Must be an exact match * Contains - Any value contained in the record (Most common) * Does Not Contain - Does not contain the value * Does Not Equal - Does not equal the value

Case Sensitive - Toggle On for Case Sensitivity - Off by default

Dynamic Filter Required - Toggle On to require a filter in your URL parameter

This ensures your user can't delete the URL parameter for a workaround in your form. If there is no filter in your URL and this feature is On, the search filter will not work. See example above using URL parameter.

Advanced Feature

Filter - Create custom formulas to further filter results

Contains Helper properties of SEARCH_VALUE and DYNAMIC_VALUE are included. * SEARCH_VALUE can be used as a placeholder for any user-typed value in the field. Anything returned ‘True’ in the formula will be displayed in the results. * DYNAMIC_VALUE will give whatever you used as a URL parameter

Advanced Display Configuration

Max Display Count - The maximum number of returned search results displayed in your dropdown. Options 10 25 50 100 250 500 ALL

  • Large amounts of data may perform slower
  • If the display count amount is lower than the number of field record options, the form user will need to continue typing out the search term until the desired record is displayed

Hidden - Enable this to hide the field

Disabled - Makes a field disabled. Only use if the Initial Value field is configured since it sets a default pre-filled value

Searchable - Determines whether the field should be searchable

Clearable - When a selection is made in your dropdown, an X will display for the user to clear the field

Close on Select - Once a selection is made, the dropdown will automatically close

Disable Resize - When the select opens or shuts, it resizes the area around it to make room. This can cause issues, especially on mobile iPhones. This will disable the resize but force a large enough area for the dropdown

Minimum Height for Results - Minimum height of results selection * Use pixels - Should be a numeric value

Maximum Height for Results - Maximum height of results selection * Use pixels - Should be a numeric value

Maximum Height for Expanding the Entire Field Area - When results appear, the widget area is increased to provide space for the dropdown to open. The following fields are pushed down. This setting always needs to be slightly bigger than your Maximum Height for Results settings (ex: 20 pixels). * Use pixels - Should be a numeric value

image

Loading Message - Text to display as record options are loading

Empty Results Text - Text to display when no options are available or found

JotForm Meta Field Items

To update the JotForm field settings, enter new values here. Leave blank to leave as is.

Once the changes are made in On2Air, refresh the JotForm Builder to see changes. These are not saved in On2Air, only updated in JotForm.

Field name - Used for the URL parameter (This is equal to the Unique Name in JotForm Advanced Properties.) In our examples, “state” was the Unique ID.

Field Text - The field label displayed above your form field

Field Order - Use a numeric value to order your form fields You can also use the drag-and-drop option in JotFormThe Header field counts as #1

You can find these settings in JotForm

  • Click a form field
  • Select Properties (the middle gear icon on your form field)
  • Select the Advanced tab
  • Click Field Details
image

Sub-Select Field Details

  • Details - An overview of all configurations in your Sub-Select Field
  • Update Fields - This will open your configurations table allowing you to set up or change your configurations
image

Sub-Select Field Settings

  • Question ID - The order of your field
  • Type - Displays whether this is a Select Field, Sub-Select Field, or Placeholder Field
  • Code - Displays a unique ID
image

Delete Field

  • To delete your Sub-Select Field, click the Delete Field button on the right-hand side
  • In the popup, click Yes, I want to delete this field

WARNING: This action cannot be undone

image