{"id":5412,"date":"2023-11-28T13:10:03","date_gmt":"2023-11-28T13:10:03","guid":{"rendered":"https:\/\/obo.zoj.mybluehost.me\/?p=5412"},"modified":"2026-07-22T16:12:06","modified_gmt":"2026-07-22T16:12:06","slug":"palette-forms-and-interactive-elements-ion","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/palette-forms-and-interactive-elements-ion\/","title":{"rendered":"Palette: Forms and Interactive Elements"},"content":{"rendered":"<p>Use this learning path to find the current Forms and Interactive components and to apply a safe, repeatable configuration workflow.<\/p>\n<figure class=\"wp-block-video\"><video controls playsinline preload=\"metadata\" poster=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/academy-current-20260722d-palette-forms-interactive-poster.png\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/academy-current-20260722d-palette-forms-interactive.mp4\" style=\"width:100%;height:auto\"><\/video><figcaption class=\"wp-element-caption\">Silent current-UI walkthrough of the Forms and Interactive palette groups and representative component settings.<\/figcaption><\/figure>\n<h2>What is the Ion Palette and how does it work?<\/h2>\n<p>Open <strong>Add elements<\/strong>, choose a component, and drag it onto a valid page target. Select the new element, then configure its Design and Settings panels. Verify the intended viewport before styling.<\/p>\n<h2>Forms: components<\/h2>\n<p>The Forms group contains form containers, choices, input controls, and submit controls. Use the component that matches the data and interaction requirement; do not collect fields that the launch does not need.<\/p>\n<h2>Forms: creating a form in Ion<\/h2>\n<p>Add the form container first, then add fields and the submit control. Map each input to the intended data field, mark required fields deliberately, and provide clear labels and error text.<\/p>\n<h2>Forms: advanced settings<\/h2>\n<p>Review validation, behaviors, actions, rules, integrations, conversion logic, consent, and the success destination. Test valid, invalid, duplicate, and edge-case submissions in every intended viewport.<\/p>\n<h2>Forms: using Choice for engagement<\/h2>\n<p>Use Choice when respondents should select from controlled values. Keep the displayed label, saved value, data mapping, and any rule conditions aligned.<\/p>\n<h2>Interactive components<\/h2>\n<p>The current Interactive group includes Lightbox, Reveal, Flow, Accordion, Tabs, Video, and other components. Choose the simplest component that delivers the intended behavior.<\/p>\n<h2>Lightbox and Reveal<\/h2>\n<p>For Reveal, select overlay or toggle behavior, choose click or hover deliberately, and verify mobile behavior. For Lightbox, test open\/close controls, focus movement, keyboard access, and responsive size.<\/p>\n<h2>Flow and inherited Rotator experiences<\/h2>\n<p>For Flow, review navigation, auto-play, looping, fixed height, and step behavior. If an inherited creative still uses a legacy Rotator, test it in place before replacing it; do not assume the current Flow settings are identical.<\/p>\n<h2>Accordion and Tabs<\/h2>\n<p>Give every item a meaningful label, confirm the intended initial state, and test keyboard, tracking, and responsive behavior. Do not hide required information behind an inaccessible interaction.<\/p>\n<h2>Video and full-page interactions<\/h2>\n<p>Use an approved video source and verify playback, captions, poster\/fallback behavior, and mobile sizing. If an inherited experience uses a full-page slider, test its navigation, focus order, and escape path before launch.<\/p>\n<h2>Final verification<\/h2>\n<p>Preview the experience, then test the final public URL with representative devices and data. Confirm interactions, submissions, integrations, accessibility, analytics, and rollback before opening traffic.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use this learning path to find the current Forms and Interactive components and to apply a safe, repeatable configuration workflow. Silent current-UI walkthrough of the Forms and Interactive palette groups and representative component settings. [&hellip;]<\/p>\n","protected":false},"author":21,"featured_media":3560,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1004,2064,9,4],"tags":[2144,2086,2167,2382],"class_list":["post-5412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-forms-component","category-ion-platform-en","category-the-interactive-components","category-the-platform","tag-forms","tag-interactive-components","tag-ion-platform","tag-palette"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5412","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\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=5412"}],"version-history":[{"count":1,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5412\/revisions"}],"predecessor-version":[{"id":5413,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/5412\/revisions\/5413"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/3560"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=5412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=5412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=5412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}