Select Page
Field Type: Select Field - JotForm

Field Type: Select Field - JotForm

Form Builder - JotForm

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

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

image

In this article

How to Add the Select Field to Your Form in JotForm

💡

We are currently waiting for JotForm to add the new On2Air: Forms widget to the Integrations area in JotForm. This does not affect the features of On2Air: Forms, you only need to configure your fields in our dashboard instead of in the builder.

The process documented below will be the process for adding fields to your forms once JotForm adds the On2Air widget to the Integration area. Until this is complete, please use the On2Air dashboard to add new On2Air fields to your JotForm form.

You will need to add the On2Air Widget to your form in JotForm

  • In your JotForm form, select Add Form Element
  • Click Widgets
  • In the search field, search On2Air
  • Drag the widget into your form where desired
image
  • The Widget Settings will pop out on the right-hand side
  • Click General
  • Click the Edit Settings button

If you have not added any other form fields, you will need to connect this form to the On2Air JotForm Connection you created

*   Select your On2Air JotForm connection

*   The form should automatically populate in the form field

*   Give your form a description
image
  • Once you have connected to On2Air, you will be given the field options from On2Air
  • Click Select to the right of the Select Field
  • The Select Field configurations will be displayed
image

Secondary Option

How to Add the Select Field to Your Form from the On2Air Dashboard

  • Before creating your new form, connect On2Air to your JotForm account
  • If you don't have any forms in JotForm, create a blank form. We will use this to begin creating our form in On2Air.
  • In the On2Air: Forms dashboard, click + Connect Form
  • Select your JotForm connection
  • Choose your form in JotForm
  • Click Create new form
image
  • Click + New Field
  • Choose the field type you need
  • Click Update Details to begin configuring your field
image

Using the Select Field Configurations

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

From the JotForm form field

  • The configuration options will display when choosing the 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

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("Dan", {[SEARCH_VALUE]})
*   Example 2: FIND("[SEARCH_VALUE]"={State)}

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

image

Display Configuration

Display Field - The 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 the Sub-Select 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 selectionsYou 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 bestIf 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 selections in your dropdown

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:

  • Select the States field
  • Add ?states=Utah to the end of your form URL
  • This must be an exact matched record value from your selected field
  • The record, Utah, will automatically be pre-filled and displayed on your form when loaded

Final URL Styling

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. _ Example: State is the field - Default Value is California_

image

Dynamic Filter Field - A way to limit the results returned in the field. This is used with URL Parameters and is useful for providing users with only the results you would like them to see. See example below

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 below using URL parameter.

Dynamic Filter Example:

Dynamic Filter Field is State. Dynamic Filter Matching Style is Contains. Add the URL parameter of ?states=|c to the end of your URL

Final URL Styling

https://www.jotform.com/form/201156946102044?states=|c

This will limit the search to only states containing the letter “c”

l = The vertical bar (pipe key) on your keyboard c = Will search only states containing a “c”

image

If you toggle the 'Dynamic Filter Required' on, then a form user deletes the 'c' in your URL, they will not be able to view the States field records.

Example 2:

You can also still set your Initial Field with the Dynamic Filter Field

Use ?states=California|c at the end of your URL

Final URL Styling

https://www.jotform.com/form/201156946102044?states=California|c

California = Initial Field pre-filled in your form

l = The vertical bar (pipe key) on your keyboard c = Will search only states containing a “c”

image

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 such as ?states=|c

Advanced Display Configuration

Max Display Count - The maximum number of returned results in your dropdown * Options are 10, 25, 100, 250, 500, ALL * 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 * Large amounts of data may perform slower

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 fields below 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 JotForm. The 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

Select Field Details

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

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 Select Field, click the Delete Field button on the right-hand side
  • Click Yes I want to delete this field
  • WARNING: This action cannot be undone**
image