{"id":3009,"date":"2023-03-13T19:07:54","date_gmt":"2023-03-13T19:07:54","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/uncategorized\/library-forms-create-edit\/"},"modified":"2026-01-13T11:10:31","modified_gmt":"2026-01-13T11:10:31","slug":"library-forms-create-edit","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/library-forms-create-edit\/","title":{"rendered":"Library Forms"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\"><strong>Before We Begin<\/strong><\/h3>\n\n\n\n<p class=\"\">Please make sure that all of the data fields you need for your form have been created within your Data Collection screen.<\/p>\n\n\n\n<p class=\"\">If the fields you want to include on your form are already part of ion, and you just want to create a new form using those existing fields, keep on reading. If you want to create new\/custom fields (e.g., questions and answers) for your form, read more about creating data fields\u00a0<a href=\"https:\/\/ioninteractive.com\/ionacademy\/data-collection-create-a-data-field\/\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Let&#8217;s Get Started!<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>To create a form<\/strong><\/h4>\n\n\n\n<p class=\"\">Library forms are set up at the global level so they are available for any page. Just select &#8216;Forms&#8217; from the &#8216;Libraries&#8217; tab in your console\u2019s side nav to get started.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"336\" height=\"606\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-10.png\" alt=\"\" class=\"wp-image-8576\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-10.png 336w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-10-166x300.png 166w\" sizes=\"auto, (max-width: 336px) 100vw, 336px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">Click the green &#8216;New category&#8217; button to create a new form category or click the title of an existing category name to add a form to an existing category. Categories are just a way to group and organize your forms (e.g., Contact Forms, Survey Forms, etc.) Descriptions may also be added to categories.<\/li>\n\n\n\n<li class=\"\">Click the green &#8216;New form&#8217; button then choose a unique form label (title) and optional description. Before clicking save, you have the option to copy form fields from an existing form. If you copy a form, you will still be able to make changes to it; this is a convenient option if there is a similar form already in your library or when creating several versions of the same form.<\/li>\n\n\n\n<li class=\"\">Save the form, then click the green &#8216;New form field&#8217; button to begin adding the form fields to appear on your form.<\/li>\n\n\n\n<li class=\"\">Choose a data field category from the first drop-down menu, then choose the data field from that category in the second drop-down menu.<\/li>\n\n\n\n<li class=\"\">Choose the input type for the field\u2014this will determine how the user will provide information on the form. You may choose from single or multi-line text (for free-form questions), checkbox (for multiple choice questions), listbox (for choices to appear in a selector box), radio buttons or dropdown list (for single choice questions). The type of question you are asking will determine the input type.\n<ul class=\"wp-block-list\">\n<li class=\"\">For single or multi-line text fields, choose the input style\u2014standard, narrow or wide fields. For multi-line text, you can also specify the line height to be 2-10 lines.<\/li>\n\n\n\n<li class=\"\">For radio buttons, drop-down list or listbox, select the choice set category from the first drop-down menu, then choose the choice set to use for this field in the second drop-down menu. For a listbox, you can also specify the input style (narrow, standard or wide) and the line height to be 2-10 lines.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li class=\"\">Check the &#8216;Required&#8217; box if a respondent must fill out this field to submit the form.\u00a0<strong>NOTE:<\/strong>\u00a0as a best practice, add an asterisk (*) or another visual indicator in front of the field label text to clearly distinguish this field from optional fields on the form.<\/li>\n\n\n\n<li class=\"\">Enter your label text\u2014this the text that a respondent will see before the form field.<\/li>\n\n\n\n<li class=\"\">Add a field hint (optional)\u2014this will appear below or to the right of the field, depending on the form size.<\/li>\n\n\n\n<li class=\"\">Add pre-field text (optional)\u2014this is useful to give form information or instructions at the top of the form. (e.g., * indicates required fields)<\/li>\n\n\n\n<li class=\"\">Add post-field text (optional)\u2014this will appear below the field label on the form.<\/li>\n\n\n\n<li class=\"\">Check the &#8216;Seperator&#8217; box if you would like to insert a line separator after a field on the form\u2014this is useful to visually group related fields on a form.<\/li>\n\n\n\n<li class=\"\">Click Save and continue adding the remaining fields on your form.<\/li>\n\n\n\n<li class=\"\">After you add fields to the form, you can easily reorder them by using your mouse to click and drag the fields to the desired position. Questions on the form will appear in the same order they appear in the form field list. Your form is now ready to use on any path in the ion console! Remember, it\u2019s always a good idea to test your form using preview to make sure it&#8217;s configured the way you intended. And now that the form is set up, the next step is to create an export for the data you&#8217;re collecting.<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>To edit a form<\/strong><\/h4>\n\n\n\n<p class=\"\">Click the title of the form you&#8217;d like to edit.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">To edit the form name, click the Form Actions dropdown menu and then click \u201cEdit form.\u201d<\/li>\n\n\n\n<li class=\"\">To edit a form field, click the form field title.<\/li>\n\n\n\n<li class=\"\">To delete a field on the form, click the trash can at the far right of the field row.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>To delete a form<\/strong><\/h4>\n\n\n\n<p class=\"\">Simply click the trash can at the far right of the form row from within the form category screen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">&nbsp;<\/h2>\n\n\n\n<h2 class=\"wp-block-heading\">Create choice set filters<\/h2>\n\n\n\n<p class=\"\"><strong>Ex<\/strong>. \u201cStep 1\u201d form collects country and state, then the \u201cStep 2\u201d form on a subsequent page shows a choice set of stores limited to that country and state combination.<\/p>\n\n\n\n<p class=\"\">You can use choice set filters for any multistep form process that has conditional choice sets.<\/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><\/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=\"\">Column D: [Filter 2]<\/p>\n\n\n\n<p class=\"\">Column E: [Filter 3]<\/p>\n\n\n\n<p class=\"\"><strong>*NOTE:&nbsp;<\/strong>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=\"\">Jane Street Center, JSC, AL, US<\/p>\n\n\n\n<p class=\"\">Town Center Shops, TCS, AL, US<\/p>\n\n\n\n<p class=\"\">Red Square, RSQ, AL, US<\/p>\n\n\n\n<p class=\"\">Golden Circle, GDC, AK, US<\/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 > Data Collection > 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-large\"><img decoding=\"async\" width=\"1024\" height=\"184\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-11-1024x184.png\" alt=\"\" class=\"wp-image-8578\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-11-1024x184.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-11-300x54.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-11-768x138.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-11-1536x277.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-11.png 1644w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">&nbsp;<\/h3>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Create forms in your ion console<\/strong><\/h3>\n\n\n\n<p class=\"\">1. Under Libraries &gt; Forms, navigate into an existing form category, or add a new category using \u201cNew category\u201d button<\/p>\n\n\n\n<p class=\"\">2. Create a form for each step<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Ex. \u201cStep 1\u201d form collects country and state, then the \u201cStep 2\u201d form on a subsequent page shows a choice set of stores limited to that country and state combination.<\/li>\n<\/ul>\n\n\n\n<p class=\"\">3. Add filters to checkbox(es), drop-down, listbox or radio button input types<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">You can input static or dynamic filters. To filter dynamically, enter {% raw %}{{data_name}}{% endraw %}. The data name can be confirmed under Integration > Data Collection > Data Fields.<\/li>\n\n\n\n<li class=\"\">To filter store locations by the Country and State previously selected, add two choice set filters to the form:\n<ul class=\"wp-block-list\">\n<li class=\"\">Choice set filter 1: {% raw %}{{Country}}{% endraw %}<\/li>\n\n\n\n<li class=\"\">Choice set filer 2: {% raw %}{{State}}{% endraw %}<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Add forms to your pages in your ion console<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"\">Navigate into the form page within the creative<\/li>\n\n\n\n<li class=\"\">Insert your \u201cStep 1\u201d form into the creative via the library form editor (choose from category\/form drop-down)<\/li>\n\n\n\n<li class=\"\">Assign an action to the form to take respondents to the \u201cStep 2\u201d page when the form is submitted<\/li>\n\n\n\n<li class=\"\">Be sure to add a tag so you can track respondents as they navigate through the form experience (ex. \u201cStep 1 &#8211; Complete)<\/li>\n\n\n\n<li class=\"\">\u201cMark respondent as converted\u201d should be checked off on the final form submission, marking your visitor as a conversion within ion<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Library Forms: Create custom HTML forms<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"294\" height=\"202\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-12.png\" alt=\"\" class=\"wp-image-8580\"\/><\/figure>\n\n\n\n<p class=\"\">With an HTML form, you provide the complete HTML for the form \u2014 the \u2039form\u203a\u2039\/form\u203a tags and everything in between. (You may also include non-editable content outside the \u2039form\u203a\u2039\/form\u203a tags.)<\/p>\n\n\n\n<p class=\"\">By default, \u2039input\u203a and \u2039select\u203a tags will be saved with the names of their IDs, although you can override those and assign them to Data Collection fields if you prefer when editing fields from the next page.<\/p>\n\n\n\n<p class=\"\">The choices for checkboxes, radio buttons, drop-downs and list boxes should be included in your &nbsp;HTML. However, you can optionally substitute the choices in \u2039select\u203a drop-downs and list boxes by assigning them a choice set when editing fields from the next page. Note that currently all \u2039option\u203a tags in your HTML must have closing \u2039\/option\u203a tags.<\/p>\n\n\n\n<p class=\"\">The data collected on your custom HTML form will be saved into the ion database upon form submission. You can also export the data collected on a custom HTML form using any export format supported by the ion platform. Form-level advanced rules will be available to leverage, as well!<\/p>\n\n\n\n<p class=\"\">You must provide your own button to submit the form.<\/p>\n\n\n\n<p class=\"\">You may also include \u2039style\u203a and \u2039script\u203a blocks, usually in front of the \u2039form\u203a tag, to impact the look-and-feel and behavior of the form. (Be careful to avoid CSS and Javascript conflicts with your master page templates and themes.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Get started with these steps:<\/h3>\n\n\n\n<p class=\"\">1. Navigate to the &#8216;Forms&#8217; library and select the category you would like to add your custom form to (or create a new category). Add a new form by selecting the green &#8216;New form&#8217; button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"162\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-13-1024x162.png\" alt=\"\" class=\"wp-image-8582\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-13-1024x162.png 1024w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-13-300x48.png 300w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-13-768x122.png 768w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-13-1536x244.png 1536w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-13.png 1640w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"\">2. Give it a unique &#8216;label&#8217;, optional &#8216;description&#8217; and select &#8216;HTML&#8217; from the &#8216;Form type&#8217; drop-down menu. Put your form code (be sure to include the \u2039form\u203a\u2039\/form\u203a tags) within the &#8216;Custom HTML&#8217; field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"595\" height=\"862\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-14.png\" alt=\"\" class=\"wp-image-8584\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-14.png 595w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-14-207x300.png 207w\" sizes=\"auto, (max-width: 595px) 100vw, 595px\" \/><\/figure>\n\n\n\n<p class=\"\"><strong>NOTE:<\/strong>&nbsp;if you have a script and it is using the name of the form as a reference, it will not work because the platform removes the name attribute of the form. Instead you can use the ID of the form as a reference.<\/p>\n\n\n\n<p class=\"\">3. Assign a custom class (by default the class is: pf_field_row_bad) to handle any \u2039input\u203a tags with errors (i.e. used for validation).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"672\" height=\"212\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-15.png\" alt=\"\" class=\"wp-image-8586\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-15.png 672w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-15-300x95.png 300w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><\/figure>\n\n\n\n<p class=\"\">4. Click on Save, and you will be brought to the Form Setting Page. You can preview the form by clicking the \u201cPreview\u201d button within the Form Actions dropdown menu. To edit the custom form, click \u201cEdit form\u201d within the Form Actions dropdown menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"633\" height=\"212\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-16.png\" alt=\"\" class=\"wp-image-8588\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-16.png 633w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-16-300x100.png 300w\" sizes=\"auto, (max-width: 633px) 100vw, 633px\" \/><\/figure>\n\n\n\n<p class=\"\"><strong>NOTE:<\/strong>&nbsp;If you do not see the fields of your HTML form, you need to check your input fields. They should have a name or an ID attribute. If you specify both attribute name and ID, ID will appear under &#8220;Field Name&#8221;. It is a good practice to make your ID or name to be descriptive so it will be mapped easily to your fields.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Mapping Custom HTML Form Fields<\/strong><\/h3>\n\n\n\n<p class=\"\">Mapping your HTML fields to ion fields will let you direct the data collected from your custom HTML form to the ion field that you would like the data to be exported to. This will then be included in your exported data.<\/p>\n\n\n\n<p class=\"\">You will need to map your custom HTML form to make sure the data collected makes it into the right place within your ion database. If you have a field that you don&#8217;t need to keep track of, it is ok not to map it to ion field.<\/p>\n\n\n\n<p class=\"\">Follow these steps to map your form to a ion data field:<\/p>\n\n\n\n<p class=\"\">1. Click the * save as is * link associated with the field you would like to map.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"613\" height=\"151\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-18.png\" alt=\"\" class=\"wp-image-8592\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-18.png 613w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-18-300x74.png 300w\" sizes=\"auto, (max-width: 613px) 100vw, 613px\" \/><\/figure>\n\n\n\n<p class=\"\">2. Inside the edit form fields select the &#8220;choose category&#8221; option, then choose the data field you want your field name to be mapped.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"632\" height=\"259\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-17.png\" alt=\"\" class=\"wp-image-8590\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-17.png 632w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-17-300x123.png 300w\" sizes=\"auto, (max-width: 632px) 100vw, 632px\" \/><\/figure>\n\n\n\n<p class=\"\">3. If you are mapping a dropdown field (\u2039select\u203a) you have the choice to use what is in your custom HTML form or an ion choice set. Click &#8220;save&#8221; and you are done!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"651\" height=\"675\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-19.png\" alt=\"\" class=\"wp-image-8594\" srcset=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-19.png 651w, https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2023\/03\/image-19-289x300.png 289w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Additional Guidelines:<\/h3>\n\n\n\n<p class=\"\">If you have \u2039H1\u203a, \u2039DIV\u203a and other HTML elements within the custom HTML form code, it\u2019s recommended you add classes to them. This will prevent overriding element styles within the framework theme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Styling Custom HTML Forms Within Your Framework Theme Style<\/h2>\n\n\n\n<p class=\"\">You can stylize your custom HTML forms to blend in with your theme by including all the ion form-specific CSS classes within your form code.<\/p>\n\n\n\n<p class=\"\">For instance, to stylize an input textbox add the class &#8220;pf_text&#8221; to the input textbox like the following:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\u2039input type=\"text\" id=\"first_name\" name=\"first_name\" class=\"pf_text\" \/\u203a<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">.pf_text is the standard size of a text field (default 130px wide).<\/li>\n\n\n\n<li class=\"\">.pf_text_narrow is the narrow size of a text field (default 75px wide).<\/li>\n\n\n\n<li class=\"\">.pf_text_wide is the wide size of a text field (default 250px wide).<\/li>\n<\/ul>\n\n\n\n<p class=\"\"><strong>NOTE:<\/strong>&nbsp;The width (and style) of these fields can be adjusted at the theme level or within your custom html form code.<\/p>\n\n\n\n<p class=\"\">For theme control of the field labels, add the class &#8220;pf_label_text&#8221;. For instance:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\u2039label class=\"pf_label_text\"\u203aFirst Name*\u2039\/label\u203a<\/pre>\n\n\n\n<p class=\"\">For theme control of the submit button, add the class &#8220;pf_submit_button&#8221;. For instance:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\u2039input type=\"submit\" class=\"pf_submit_button\" value\"Register\" \/\u203a<\/pre>\n\n\n\n<p class=\"\">If you are using hint text on your form, you can use this class &#8220;pf_hint_text&#8221;. For instance:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\u2039span class=\"pf_hint _text\"\u203aenter phone number with dashes xxx-xxx-xxxx\u2039\/span\u203a<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Sample custom HTML form (with no theme control):<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">\u2039form\u203a  \n\u2039label class=\"pf_label_text\"\u203aName:\u2039\/label\u203a\n\u2039input type=\"text\" name=\"lbform_name\" id=\"lbform_name\" class=\"pf_text\" value=\"\" \/\u203a\n\n\u2039label class=\"pf_label_text\"\u203aE-mail:\u2039\/label\u203a\n\u2039input type=\"text\" name=\"mail\" id=\"lbform_mail\" class=\"pf_text\" value=\"\" \/\u203a\n\n\u2039label class=\"pf_label_text\"\u203aComment:\u2039\/label\u203a\n\u2039input type=\"text\" name=\"comment\" id=\"lbform_comment\" class=\"pf_text\" value=\"\" \/\u203a\n\u2039span class=\"pf_hint_text\"\u203aUp to 100 characters\u2039\/span\u203a \n\n\u2039input type=\"submit\" class=\"pf_submit_button\" value=\"Send\"\u203a  \n\u2039\/form\u203a<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Complete reference of the form-specific CSS classes.<\/h3>\n\n\n\n<p class=\"\"><strong>.pf_form_table<\/strong>: CSS class for form table<br><strong>.pf_field_row<\/strong>: CSS class for field rows<br><strong>.pf_field_row_bad&nbsp;<\/strong>: CSS class for bad field rows<br><strong>.pf_label_cell<\/strong>: CSS class for label cells<br><strong>.pf_label_cell_bad<\/strong>: CSS class for bad label cells<br><strong>.pf_label_text<\/strong>: CSS class for label text<br><strong>.pf_label_text_bad<\/strong>: CSS class for bad label text<br><strong>.pf_field_cell<\/strong>: CSS class for field cells<br><strong>.pf_field_cell_bad<\/strong>: CSS class for bad field cells<br><strong>.pf_hint_cell<\/strong>: CSS class for hint cells<br><strong>.pf_hint_text<\/strong>: CSS class for hint text<br><strong>.pf_hint_text_bad<\/strong>: CSS class for bad hint text<br><strong>.pf_hr_cell<\/strong>: CSS class for \u2039hr\u203a separator cell<br><strong>.pf_hr<\/strong>: CSS class for \u2039hr\u203a<br><strong>.pf_prefield_cell&nbsp;<\/strong>: CSS class for pre-field cells<br><strong>.pf_prefield_text<\/strong>: CSS class for pre-field text<br><strong>.pf_postfield_cell<\/strong>: CSS class for post-field cells<br><strong>.pf_postfield_text<\/strong>: CSS class for post-field text<br><strong>.pf_text<\/strong>: CSS class for regular \u2039input\u203a text<br><strong>.pf_text_narrow<\/strong>: CSS class for narrow \u2039input\u203a text<br><strong>.pf_text_wide<\/strong>: CSS class for wide \u2039input\u203a text<br><strong>.pf_dropdown<\/strong>: CSS class for \u2039select\u203a drop-down<br><strong>.pf_dropdown_narrow<\/strong>: CSS class for \u2039select\u203a drop-down narrow<br><strong>.pf_dropdown_wide<\/strong>: CSS class for \u2039select\u203a drop-down wide<br><strong>.pf_multiline<\/strong>: CSS class for \u2039textarea\u203a multiline text<br><strong>.pf_multiline_narrow<\/strong>: CSS class for \u2039textarea\u203a multiline text narrow<br><strong>.pf_multiline_wide<\/strong>: CSS class for \u2039textarea\u203a multiline text wide<br><strong>.pf_listbox<\/strong>: CSS class for \u2039select\u203a listbox<br><strong>.pf_listbox_narrow<\/strong>: CSS class for \u2039select\u203a listbox narrow<br><strong>.pf_listbox_wide<\/strong>: CSS class for \u2039select\u203a listbox wide<br><strong>.pf_checktable<\/strong>: CSS class for \u2039table\u203a of checkbox \u2039input\u203a options<br><strong>.pf_radiotable<\/strong>: CSS class for \u2039table\u203a of radio \u2039input\u203a options<br><strong>.pf_submit_cell<\/strong>: CSS class for submit button cell<br><strong>.pf_submit_button<\/strong>: CSS class for submit button<br><strong>.pf_submit_image<\/strong>: CSS class for submit image<br><strong>.pf_upleft_corner<\/strong>: CSS class for top left form hook<br><strong>.pf_upright_corner<\/strong>: CSS class for top right form hook<br><strong>.pf_loleft_corner<\/strong>: CSS class for bottom left form hook<br><strong>.pf_loright_corner<\/strong>: CSS class for bottom right form hook<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Custom HTML Form Validation<\/h2>\n\n\n\n<p class=\"\">For instance, in the following example, custom JavaScript is being used to validate a custom HTML form. You can add the onsubmit event to the form and execute the form validation as such.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\u2039script type=\"text\/javascript\"\u203a\n \tfunction validateForm() {\n \t\tvar x=document.forms[\"myForm\"][\"fname\"].value;\n\t \t\nif (x==null || x==\"\") {\nalert(\"First name must be filled out\");\n\treturn false;\n}\n}\n\u2039\/script\u203a\n\n\n\u2039form id=\"myForm\" onsubmit=\"return validateForm()\"\u203a\n     First name: \u2039input type=\"text\" name=\"fname\"\u203a\u2039input type=\"submit\" value=\"Submit\"\u203a\n\u2039\/form\u203a<\/pre>\n\n\n\n<p class=\"\">Or, to use Ion\u2019s built-in validation, map the HTML form fields to ion form fields.<\/p>\n\n\n\n<p class=\"\">By default, when mapping your HTML form field to an ion field, it will pick up ion&#8217;s validation patterns.<\/p>\n\n\n\n<p class=\"\"><strong>NOTE:<\/strong>&nbsp;When using ion&#8217;s validation patterns, include the following error handling classes to the form elements and stylize as desired. These classes will highlight or call attention to the form field if validation fails.<br>.pf_field_row_bad: CSS class for bad field rows if form built in table format<br>.pf_label_cell_bad: CSS class for bad label cells if form built in table format<br>.pf_label_text_bad: CSS class for bad label text<br>.pf_field_cell_bad: CSS class for bad field cells if form built in table format<br>.pf_hint_text_bad: CSS class for bad hint text<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"\"><strong>NOTE:<\/strong>&nbsp;ion will only allow you to delete an unused form, it cannot be referenced by any creative.<\/p>\n\n\n\n<p class=\"\">If you have any questions, please contact us at <a href=\"mailto:help@ioninteractive.com\" rel=\"nofollow\">help@ioninteractive.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Before We Begin Please make sure that all of the data fields you need for your form have been created within your Data Collection screen. If the fields you want to include on your [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":6010,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1004,9],"tags":[2328,2144,2330],"class_list":["post-3009","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-forms-component","category-the-interactive-components","tag-create-a-form","tag-forms","tag-library-forms"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3009","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=3009"}],"version-history":[{"count":6,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3009\/revisions"}],"predecessor-version":[{"id":8595,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/3009\/revisions\/8595"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/6010"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=3009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=3009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=3009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}