{"id":2666,"date":"2021-01-14T14:55:15","date_gmt":"2021-01-14T14:55:15","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/freestyle-forms-advanced\/"},"modified":"2026-01-13T10:57:43","modified_gmt":"2026-01-13T10:57:43","slug":"freestyle-forms","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/freestyle-forms\/","title":{"rendered":"Freestyle Forms"},"content":{"rendered":"\n<p class=\"\">In this video, we will discuss some of the more advanced features available for freestyle forms including a discussion of styling, error validation, form layout and more.<\/p>\n\n\n\n<iframe loading=\"lazy\" title=\"vimeo-player\" src=\"https:\/\/player.vimeo.com\/video\/136615166?h=f3e5758bd1\" width=\"640\" height=\"360\" frameborder=\"0\" referrerpolicy=\"strict-origin-when-cross-origin\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\"   allowfullscreen><\/iframe>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"textbox\">Freestyle Forms: Textbox<\/h2>\n\n\n\n<p class=\"\">The most commonly used field in a form is a textbox. To add a textbox to your custom form, simply drag the textbox icon into your custom form container.<\/p>\n\n\n\n<iframe loading=\"lazy\" title=\"vimeo-player\" src=\"https:\/\/player.vimeo.com\/video\/136636775?h=ff4ceae19e\" width=\"640\" height=\"360\" frameborder=\"0\" referrerpolicy=\"strict-origin-when-cross-origin\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\"   allowfullscreen><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Field Labels<\/h3>\n\n\n\n<p class=\"\">Your textbox will include a textbox at the top of the field by default. You can double click the label to edit it as needed. The position of your label can be modified with a micro-theme. With your form container selected, you will see the option for label positioning within the \u201cForm\u201d micro-theme category.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"622\" height=\"270\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_1.png\" alt=\"\" class=\"wp-image-8134\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_1.png 622w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_1-300x130.png 300w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/figure>\n\n\n\n<p class=\"\">The field label can also be removed altogether if you would prefer to use placeholder text for the textbox.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Input Types<\/h3>\n\n\n\n<p class=\"\">After you pull a textbox into your form, you will want to select an input type. The input type controls the formatting of your textbox. When viewed on a mobile device, the input type options allow specific keyboards to be presented to visitors when they select a given textbox. The six input type options are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>Text<\/strong> &#8211; allows anything to be entered into the textbox<\/li>\n\n\n\n<li class=\"\"><strong>Multi-line Text<\/strong>&nbsp;&#8211; a larger textbox will be presented to respondents which in turn gives them an opportunity for a longer response (i.e. comments field)<\/li>\n\n\n\n<li class=\"\"><strong>Number<\/strong> &#8211; only allows numeric values to be submitted<\/li>\n\n\n\n<li class=\"\"><strong>Email<\/strong> &#8211; only allows email addresses to be submitted<\/li>\n\n\n\n<li class=\"\"><strong>Phone Number<\/strong> &#8211; only allows phone numbers to be submitted<\/li>\n\n\n\n<li class=\"\"><strong>Date<\/strong> &#8211; only accepts dates to be submitted and will give visitors a calendar to choose a specific date from<\/li>\n\n\n\n<li class=\"\"><strong>Password<\/strong> &#8211; text will be hidden while respondents enter password into textbox<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Required Fields<\/h3>\n\n\n\n<p class=\"\">You can make the textboxes in your custom form required like you would within your Form Library. To make a given textbox a required field, simply check the Required checkbox.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"645\" height=\"243\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_2.png\" alt=\"\" class=\"wp-image-8136\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_2.png 645w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_2-300x113.png 300w\" sizes=\"auto, (max-width: 645px) 100vw, 645px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Data Field<\/h3>\n\n\n\n<p class=\"\">Next, you will want to apply a data field to your textbox so that data is saved to the platform. To assign a data field your textbox, click the Data field button to open a flyout. From here, select the data field category and data field from the flyout to save data from the textbox to that field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"624\" height=\"334\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_3.png\" alt=\"\" class=\"wp-image-8138\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_3.png 624w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_3-300x161.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Pre-populated Value<\/h3>\n\n\n\n<p class=\"\">You can set default values and add placeholder text to your textboxes too! As a first step, you will want to define the initial value using the available dropdown. Within the initial value dropdown, you will find three options.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>Respondent data or default value&nbsp;<\/strong>&#8211; pre-populates textbox with data that was entered during a previous visit to the page or, if none is available, displays a custom default value<\/li>\n\n\n\n<li class=\"\"><strong>Default value<\/strong> &#8211; pre-populates textbox with an initial value that is manually set within your creative studio<\/li>\n\n\n\n<li class=\"\"><strong>No value<\/strong> &#8211; data will not pre-populate textbox<\/li>\n<\/ul>\n\n\n\n<p class=\"\"><strong>*Note:<\/strong> If you use one of the first two options listed above, you will see a button available to add a custom initial value. To manually set an initial value that will always be displayed to visitors, simply click this button and enter the desired initial value.<\/p>\n\n\n\n<p class=\"\">Within the Pre-populated value section, you will also find the option to add placeholder text. Unlike the initial value option, this would not be used to save data to the textbox. Instead, this would allow you to display a field label inside of your textbox that would automatically be removed when a respondent clicks into the textbox.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"622\" height=\"241\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_4.png\" alt=\"\" class=\"wp-image-8140\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_4.png 622w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_4-300x116.png 300w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Focus Behavior<\/h3>\n\n\n\n<p class=\"\">Within the focus behavior section, you will find two options.<\/p>\n\n\n\n<p class=\"\"><strong>Auto-focus<\/strong> &#8211; when enabled, the visitor\u2019s cursor will automatically be placed inside this textbox on page load<\/p>\n\n\n\n<p class=\"\"><strong>Select text on focus<\/strong> &#8211; when enabled, visitors who click into the textbox will automatically highlight the initial value so that when they start typing, it will overwrite the initial value<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"choice-group\">Freestyle Forms: Choice Group<\/h2>\n\n\n\n<p class=\"\">When working with forms, you likely have added checkboxes or radio buttons to it. You can add checkboxes and radio buttons to your custom forms too!<\/p>\n\n\n\n<iframe loading=\"lazy\" title=\"vimeo-player\" src=\"https:\/\/player.vimeo.com\/video\/136554717?h=61ea4f1d88\" width=\"640\" height=\"360\" frameborder=\"0\" referrerpolicy=\"strict-origin-when-cross-origin\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\"   allowfullscreen><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Let\u2019s get started<\/h3>\n\n\n\n<p class=\"\">To begin, drag the Choice Group icon into your custom form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"630\" height=\"297\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_5.png\" alt=\"\" class=\"wp-image-8142\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_5.png 630w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_5-300x141.png 300w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/figure>\n\n\n\n<p class=\"\">With your Choice Group in place, you will see a few options available within your creative studio.<\/p>\n\n\n\n<p class=\"\">The first option is to allow visitors to select multiple choices. This option is typically used when presenting visitors with checkboxes. If you are going to turn your Choice Group into radio buttons, you will likely want to uncheck this box.<\/p>\n\n\n\n<p class=\"\">Next, you will see the option to make this a required field. If you want to ensure respondents select one of your choices, you will want to check this box.<\/p>\n\n\n\n<p class=\"\">Below the Required checkbox, you will see an option to assign a data field to the Choice Group. This is a very important step as a data field must be defined to properly save which choice(s) respondents are selecting. To assign a data field to your Choice Group, simply click the \u201c+ Data field\u201d button and select the desired field from the flyout.<\/p>\n\n\n\n<p class=\"\">Finally, you will want to choose an option for the pre-populated value from the available drop down menu. Here you will leave two options:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>Respondent data or choice defaults<\/strong> shows the selection(s) a given respondent selected during a previous visit.&nbsp;<\/li>\n\n\n\n<li class=\"\"><strong>Choice defaults<\/strong> will show the default state that you have set up for each choice regardless of anything that may have been selected during a previous visit.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"645\" height=\"273\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_6.png\" alt=\"\" class=\"wp-image-8144\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_6.png 645w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_6-300x127.png 300w\" sizes=\"auto, (max-width: 645px) 100vw, 645px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Choices<\/h3>\n\n\n\n<p class=\"\">After your choice group variables are set up, you will want to first ensure that you have enough Choices within the group.<\/p>\n\n\n\n<p class=\"\">By default, your Choice Group will include two Choices. You can remove choices by selecting a given choice and then clicking the remove icon within your creative studio.<\/p>\n\n\n\n<p class=\"\">You can add more Choices to the group by dragging the Choice icon into your group.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"625\" height=\"288\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_7.png\" alt=\"\" class=\"wp-image-8146\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_7.png 625w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_7-300x138.png 300w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/figure>\n\n\n\n<p class=\"\">When editing a Choice, you will want to ensure that a data value is applied. You will see a button in your Creative Studio available for applying a value when editing a Choice. The value entered here is what will be saved to the platform when this Choice is selected.<\/p>\n\n\n\n<p class=\"\">Also in your Creative Studio, you will see a checkbox to make this specific Choice within the group required for form submission.<\/p>\n\n\n\n<p class=\"\">Next, you will see an option to make your choice selected or unselected by default when visitors land on the page.<\/p>\n\n\n\n<p class=\"\">Your Choices also have two modes that can be used &#8211; simple and expanded. Simple mode will show any content you publish into a given Choice\u2019s container.<\/p>\n\n\n\n<p class=\"\">If you switch over to the expanded mode, you will have two containers to publish content into for your Choice. The first container is what will be shown to visitors when the page loads. Content published into the second container will be displayed when that Choice is selected. This gives you the ability to apply your own custom on-state to your choices!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"633\" height=\"289\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_8.png\" alt=\"\" class=\"wp-image-8148\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_8.png 633w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_8-300x137.png 300w\" sizes=\"auto, (max-width: 633px) 100vw, 633px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Adding Content<\/h3>\n\n\n\n<p class=\"\">When you drag the Choice Group icon into your custom form, you will now see two checkboxes in place by default with containers next to them.<\/p>\n\n\n\n<p class=\"\">If you want to have text next to each choice, simply drag your text editor icon into the choice container.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"622\" height=\"276\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_9.png\" alt=\"\" class=\"wp-image-8150\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_9.png 622w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_9-300x133.png 300w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/figure>\n\n\n\n<p class=\"\">If you would like to place an image next to your choices, you can absolutely do that too!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"621\" height=\"303\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_10.png\" alt=\"\" class=\"wp-image-8152\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_10.png 621w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_10-300x146.png 300w\" sizes=\"auto, (max-width: 621px) 100vw, 621px\" \/><\/figure>\n\n\n\n<p class=\"\">You can even add grids to your Choices for even more control over how content is displayed within your Choices!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"624\" height=\"663\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_11-1.png\" alt=\"\" class=\"wp-image-8156\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_11-1.png 624w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_11-1-282x300.png 282w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"drop-down\">Freestyle Forms: Drop down<\/h2>\n\n\n\n<p class=\"\">Drop down menus are a very common way to give respondents multiple options to choose from within a form. Drop down menus can easily be added to your custom forms in ion!<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"video_fit_container\"><iframe loading=\"lazy\" title=\"Drop Down Menus\" src=\"https:\/\/player.vimeo.com\/video\/136554717?dnt=1&amp;app_id=122963\" width=\"960\" height=\"600\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\"><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Let\u2019s get started<\/h3>\n\n\n\n<p class=\"\">To begin, drag the Drop Down&nbsp;icon into your custom form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"629\" height=\"316\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_12.png\" alt=\"\" class=\"wp-image-8159\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_12.png 629w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_12-300x151.png 300w\" sizes=\"auto, (max-width: 629px) 100vw, 629px\" \/><\/figure>\n\n\n\n<p class=\"\">With your&nbsp;Drop Down in place, you will see a few options available within your creative studio.<\/p>\n\n\n\n<p class=\"\">The first option is to make this a required field. By checking this box, respondents will need to select one of the options from your drop down menu before they can submit the form.<\/p>\n\n\n\n<p class=\"\">Next, you will be able&nbsp;to assign a data field to your drop down menu. This is a very important step in the process&nbsp;as this is the data field into which information will be saved within your ion console.<\/p>\n\n\n\n<p class=\"\">You will then see a button that allows you to assign a choice set to your drop down menu.&nbsp;This will function just like when adding a drop down menu to your library forms as your choice set is what will control what options are presented to visitors within the drop down menu. For more information on choice sets, <a href=\"https:\/\/ioninteractive.com\/ionacademy\/data-collection-create-a-choice-set\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/p>\n\n\n\n<p class=\"\">Finally, you will see the &#8220;Show Search&#8221; option. When enabled, respondents will see a search bar within their drop down menu that they can use to simply type in the option they are looking for.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"624\" height=\"155\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_13.png\" alt=\"\" class=\"wp-image-8162\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_13.png 624w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_13-300x75.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Pre-Populated Value<\/h3>\n\n\n\n<p class=\"\">Within the Pre-Populated Value section, you will be presented with a drop down containing three choices.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>Respondent data or default value<\/strong> &#8211; This option is your typical default ion form behavior which will allow you to show a default value to unique visitors and data&nbsp;previously selected to return visitors.<\/li>\n\n\n\n<li class=\"\"><strong>Default value<\/strong> &#8211; The same&nbsp;default value will always be shown to unique and return visitors alike.<\/li>\n\n\n\n<li class=\"\"><strong>No value<\/strong> &#8211; Visitors will not see a default value or previous selection but rather will either simply see a blank drop down menu or placeholder text that you can define within your creative studio.<\/li>\n<\/ul>\n\n\n\n<p class=\"\"><strong>*NOTE:<\/strong> Default values will be saved and can be submitted with form data even if respondents do not select something else in the drop down. Placeholder text will simply show text in the drop down menu when the page loads but visitors would not be saved to the platform&nbsp;upon form submission. If the field is required, respondents will not be able to submit the form with the placeholder text shown as they will need to select an option from within the drop down menu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Focus Behavior<\/h3>\n\n\n\n<p class=\"\">When auto-focus is enabled from within the Focus Behavior section, visitors will automatically be taken to the drop down menu on page load and would be able to use their keyboard to make a selection without needing to use their mouse.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Freestyle Forms: Create choice set filters<\/h2>\n\n\n\n<p class=\"\">You can use ion&#8217;s choice set filters feature to create conditional choice sets as visitors make selections within freestyle form drop down menus.<\/p>\n\n\n\n<p class=\"\">For example, the first drop down menu could collect a state and the second drop down could show store locations within that state.<\/p>\n\n\n\n<p class=\"\">Here are the steps involved:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Format a .CSV file of your choice set<\/strong>&nbsp;<\/h3>\n\n\n\n<p class=\"\">Column A: [Choice Names] \u2013 choices that will be shown in choice set<\/p>\n\n\n\n<p class=\"\">Column B: [Choice Values] \u2013 values stored into ion database<\/p>\n\n\n\n<p class=\"\">Column C: [Filter 1]<\/p>\n\n\n\n<p class=\"\"><strong>*Note:<\/strong>&nbsp;Column headers are not necessary. Filters are limited to three per choice set.<\/p>\n\n\n\n<p class=\"\">Ex.<\/p>\n\n\n\n<p class=\"\">AL, Location 1<\/p>\n\n\n\n<p class=\"\">CA, Location 2<\/p>\n\n\n\n<p class=\"\">FL, Location 3<\/p>\n\n\n\n<p class=\"\"><strong>*NOTE<\/strong>: You may also build choice set filters directly in your ion choice set by entering the above information into the corresponding columns when editing a given choice within your choice set.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Upload choice set .CSV to ion<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">Navigate to Data Management &gt; Data Collection &gt; Choice Sets<\/li>\n\n\n\n<li class=\"\">Navigate into an existing choice set category, or add a new category<\/li>\n\n\n\n<li class=\"\">Add a new choice set and label it accordingly<\/li>\n\n\n\n<li class=\"\">From the Choice Set Actions dropdown in the top right, choose Import Choice Set<\/li>\n\n\n\n<li class=\"\">Choose file to import, click \u2018save\u2019<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"623\" height=\"101\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_14.png\" alt=\"\" class=\"wp-image-8164\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_14.png 623w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_14-300x49.png 300w\" sizes=\"auto, (max-width: 623px) 100vw, 623px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Create freestyle form<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">Add a freestyle form to your ion page with drop down menus. For more information on working with freestyle forms,&nbsp;<a href=\"https:\/\/ioninteractive.com\/ionacademy\/freestyle-forms-introduction\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/li>\n\n\n\n<li class=\"\">Within the advanced settings for the second drop down, click the &#8220;+Dependent Data Field&#8221; button to and select the field you want to make the second drop down menu dependent on. In this example, the State field is selected to make the Location drop down menu dependent on the State field. This will filter the Location drop down menu based on the value collected in the State drop down menu to only show locations relevant for the state selected.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"630\" height=\"623\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_15.png\" alt=\"\" class=\"wp-image-8166\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_15.png 630w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_15-300x297.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_15-50x50.png 50w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_15-60x60.png 60w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"slider\">Freestyle Forms: Slider<\/h2>\n\n\n\n<p class=\"\">You can add a slider to your custom forms to give respondents an interactive way for selecting a numeric value. When a Slider is added to a custom form, you will be able to define the beginning and ending range values as well as the incremental steps in between. The ion platform will then automatically save the selected value into a data field of your choosing.<\/p>\n\n\n\n<iframe loading=\"lazy\" title=\"vimeo-player\" src=\"https:\/\/player.vimeo.com\/video\/136554661?h=06e3ab2e1b\" width=\"640\" height=\"360\" frameborder=\"0\" referrerpolicy=\"strict-origin-when-cross-origin\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share\"   allowfullscreen><\/iframe>\n\n\n\n<h3 class=\"wp-block-heading\">Let\u2019s get started<\/h3>\n\n\n\n<p class=\"\">To add a Slider to your custom form, simply drag the Slider widget into your custom form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"630\" height=\"301\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_1-1.png\" alt=\"\" class=\"wp-image-8170\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_1-1.png 630w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_1-1-300x143.png 300w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/figure>\n\n\n\n<p class=\"\">After adding the Slider to your custom form, you will see several options within your creative studio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Orientation &amp; Data field<\/h3>\n\n\n\n<p class=\"\">The first option you will see is the orientation dropdown. This will allow you to define if you want the Slider to display horizontally or vertically.<\/p>\n\n\n\n<p class=\"\">Next, you will see a button to assign your Slider to a data field. This is an important step as the platform will save data to the data field you select. To assign a data field to the Slider, simply click the \u201c+ Data field\u201d button and select the desired data field from the flyout.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"634\" height=\"319\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_2-1.png\" alt=\"\" class=\"wp-image-8172\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_2-1.png 634w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_2-1-300x151.png 300w\" sizes=\"auto, (max-width: 634px) 100vw, 634px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Range<\/h3>\n\n\n\n<p class=\"\">The range options allow you to assign minimum and maximum values for your Slider. You will also find a \u201cStep\u201d option within the Range section. The step is the increments in which your slider will adjust.<\/p>\n\n\n\n<p class=\"\">For example, if you have a minimum value of 0 and a maximum value of 100 and you set your step value to 10, each move within the Slider will account for an increase of 10 (i.e. 0, 10, 20, etc.).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"625\" height=\"260\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_3-2.png\" alt=\"\" class=\"wp-image-8176\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_3-2.png 625w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_3-2-300x125.png 300w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Pre-populated Value<\/h3>\n\n\n\n<p class=\"\">The Pre-populated value gives you three options for your slider:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\"><strong>Use data field if any, or custom value<\/strong> &#8211; pre-selects data that was saved during a previous visit to the page when a given respondent returns to the page.\n<ul class=\"wp-block-list\">\n<li class=\"\">When this option is selected, you will also see an option to enter an default value that will be displayed if data has not previously been collected for a given respondent.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\"><strong>Default value<\/strong> &#8211; gives you the ability to enter a value that will always be seen whenever a visitor lands on the page (even if they have previously submitted the form).<\/li>\n\n\n\n<li class=\"\"><strong>None<\/strong> &#8211; all unique and return visitors will be given a slider that starts at the minimum value<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"631\" height=\"270\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_4-1.png\" alt=\"\" class=\"wp-image-8178\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_4-1.png 631w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_4-1-300x128.png 300w\" sizes=\"auto, (max-width: 631px) 100vw, 631px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Value Display<\/h3>\n\n\n\n<p class=\"\">The value display options allow you to define where the selected value is displayed. By default, the value will be displayed beneath the Slider handle but you can have the value displayed on the left or right side of the slider instead if you prefer.<\/p>\n\n\n\n<p class=\"\">You will also have the option to apply a prefix and\/or suffix to your value. This can come in handy if you are allowing respondents to select a price as it allows you to enter a dollar sign as the prefix and or display cents to the right of your value.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"629\" height=\"317\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_5-1.png\" alt=\"\" class=\"wp-image-8180\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_5-1.png 629w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_5-1-300x151.png 300w\" sizes=\"auto, (max-width: 629px) 100vw, 629px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Focus Behavior<\/h3>\n\n\n\n<p class=\"\">The focus behavior option allows you to auto-focus on the Slider when the page loads. When this is checked off, respondents will be able to use their keyboard to adjust the Slider as soon ash the page loads without clicking.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"629\" height=\"341\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_6-1.png\" alt=\"\" class=\"wp-image-8182\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_6-1.png 629w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_6-1-300x163.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_6-1-345x187.png 345w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_6-1-626x339.png 626w\" sizes=\"auto, (max-width: 629px) 100vw, 629px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Freestyle Forms: Error Messaging<\/h2>\n\n\n\n<p class=\"\">Custom error messaging can be shown within your freestyle form fields.&nbsp;Below, please find steps to add a custom error message to your freestyle form fields.<\/p>\n\n\n\n<p class=\"\">1. Drag text editor into freestyle form container<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"628\" height=\"410\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_7-1.png\" alt=\"\" class=\"wp-image-8185\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_7-1.png 628w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_7-1-300x196.png 300w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/figure>\n\n\n\n<p class=\"\">2. Enter the desired error message into the text editor and style your text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"598\" height=\"402\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_8-1.png\" alt=\"\" class=\"wp-image-8187\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_8-1.png 598w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_8-1-300x202.png 300w\" sizes=\"auto, (max-width: 598px) 100vw, 598px\" \/><\/figure>\n\n\n\n<p class=\"\">3. With the error message text selected,&nbsp;click into the &#8220;Form&#8221; micro-theme category and open the next drop down menu. From here, you will see options to show or hide your custom error message when the data entered into the field is valid, invalid, incomplete, validating or unknown.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"602\" height=\"168\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_9-1.png\" alt=\"\" class=\"wp-image-8191\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_9-1.png 602w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2021\/01\/Screenshot_9-1-300x84.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/figure>\n\n\n\n<p class=\"\"><strong>*NOTE:<\/strong> Error messaging is typically set to show when the data is invalid and\/or incomplete. You may assign multiple error message micro-themes to your text to have it show or hide under multiple conditions.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this video, we will discuss some of the more advanced features available for freestyle forms including a discussion of styling, error validation, form layout and more. Freestyle Forms: Textbox The most commonly used [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":5601,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1004,9],"tags":[2173,2144],"class_list":["post-2666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-forms-component","category-the-interactive-components","tag-advanced","tag-forms"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=2666"}],"version-history":[{"count":22,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2666\/revisions"}],"predecessor-version":[{"id":8572,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/2666\/revisions\/8572"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/5601"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=2666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=2666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=2666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}