[{"title":"Custom Form Select","description":"Use a Webflow Dropdown element as a Webflow Form <select> component.","data":{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f867","type":"FormWrapper","tag":"div","classes":[],"children":["87092238-f0fa-0d7c-a4a6-7499d212f868","87092238-f0fa-0d7c-a4a6-7499d212f875","87092238-f0fa-0d7c-a4a6-7499d212f878"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]}}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f868","type":"FormForm","tag":"form","classes":[],"children":["87092238-f0fa-0d7c-a4a6-7499d212f869"],"data":{"form":{"type":"form","name":"Example 3 Form"},"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":"wf-form-Example-3-Form","name":"wf-form-Example-3-Form","data-name":"Example 3 Form","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f869","type":"DropdownWrapper","tag":"div","classes":["ac338f92-6ea3-e736-f7ce-57570d4580ef"],"children":["87092238-f0fa-0d7c-a4a6-7499d212f86a","87092238-f0fa-0d7c-a4a6-7499d212f870"],"data":{"search":{"exclude":true},"xattr":[{"name":"fs-selectcustom-element","value":"dropdown"},{"name":"fs-selectcustom-hideinitial","value":"true"}],"displayName":"","dropdown":{"type":"wrapper"},"attr":{"data-delay":0,"data-hover":false,"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f86a","type":"DropdownToggle","tag":"div","classes":["47870654-b3bb-4713-ee1f-b16c26445112","9aed0e62-32bf-b307-e018-7b11f8f1459b"],"children":["87092238-f0fa-0d7c-a4a6-7499d212f86d","87092238-f0fa-0d7c-a4a6-7499d212f86f"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","dropdown":{"type":"toggle"},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f86d","type":"Block","tag":"div","classes":["aacce27a-518a-24ee-e9f8-393453d1c36c"],"children":["87092238-f0fa-0d7c-a4a6-7499d212f86e"],"data":{"search":{"exclude":false},"xattr":[{"name":"fs-selectcustom-element","value":"label"}],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f86e","text":true,"v":"Select"},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f86f","type":"Icon","tag":"div","classes":[],"children":[],"data":{"widget":{"type":"icon","icon":"dropdown-toggle"},"search":{"exclude":true}}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f870","type":"DropdownList","tag":"div","classes":["8238ea99-4390-64d4-998e-f6d3e0f951c0"],"children":["75eae50f-b0e0-291c-d2b2-dac4c04e1624","87092238-f0fa-0d7c-a4a6-7499d212f874","87092238-f0fa-0d7c-a4a6-7499d212f871","c8d4bad0-da7b-66bd-76f2-145656ffea1a"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","dropdown":{"type":"list"},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"75eae50f-b0e0-291c-d2b2-dac4c04e1624","type":"Block","tag":"div","classes":["b3d5dda7-bf53-405f-78d3-0cc8d94e7e39"],"children":["75eae50f-b0e0-291c-d2b2-dac4c04e1625","75eae50f-b0e0-291c-d2b2-dac4c04e1627"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"75eae50f-b0e0-291c-d2b2-dac4c04e1625","type":"Block","tag":"div","classes":["a04ae9fc-4aa9-3ff6-6acf-1187a74e6c60"],"children":["75eae50f-b0e0-291c-d2b2-dac4c04e1626"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"75eae50f-b0e0-291c-d2b2-dac4c04e1626","text":true,"v":"We are showing this select field as example. You can hide it ;)"},{"_id":"75eae50f-b0e0-291c-d2b2-dac4c04e1627","type":"Image","tag":"img","classes":["dd6c1483-6e75-7485-a277-c2f07eac1b0d"],"children":[],"data":{"attr":{"src":"https://uploads-ssl.webflow.com/6132770a5e2efb2a37b68270/6132770a5e2efb31f9b68327_arrow-down-green.svg","loading":"lazy","width":"auto","height":"auto","alt":""},"img":{"id":"626c315ba1c26639e49c2d11"}}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f874","type":"FormSelect","tag":"select","classes":["7116c8d0-636b-6550-48ec-5869dc8aff0d"],"children":[],"data":{"form":{"name":"Example 3 Select","opts":[{"t":"Select an option","v":""},{"t":"Spain","v":"Spain"},{"t":"Brazil","v":"Brazil"},{"t":"Italy","v":"Italy"},{"t":"France","v":"Another option"}],"type":"select"},"attr":{"id":"example-3-select","name":"Example-3-Select","data-name":"Example 3 Select","required":false,"multiple":false}}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f871","type":"Link","tag":"a","classes":["73d5d22c-1024-e06a-8e70-1042d45037f4"],"children":["87092238-f0fa-0d7c-a4a6-7499d212f872"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external"}}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f872","type":"Block","tag":"div","classes":[],"children":["87092238-f0fa-0d7c-a4a6-7499d212f873"],"data":{"search":{"exclude":false},"xattr":[{"name":"fs-selectcustom-element","value":"text"}],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f873","text":true,"v":"Link Template"},{"_id":"c8d4bad0-da7b-66bd-76f2-145656ffea1a","type":"Link","tag":"a","classes":["73d5d22c-1024-e06a-8e70-1042d45037f4"],"children":["c8b70222-7ec5-1126-c153-f8ab6191255b","c8d4bad0-da7b-66bd-76f2-145656ffea1b"],"data":{"search":{"exclude":false},"xattr":[{"name":"fs-selectcustom-element","value":"clear"}],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external"}}},{"_id":"c8b70222-7ec5-1126-c153-f8ab6191255b","type":"Image","tag":"img","classes":["e3a9dc4b-288b-2e4f-bcf5-bb98817f3e82"],"children":[],"data":{"img":{"id":"626c315ba1c266f2f69c2e51"},"attr":{"width":"auto","height":"auto","src":"https://uploads-ssl.webflow.com/6132770a5e2efb2a37b68270/61b281ba2968b343192a09fb_arrow-left-white.svg","loading":"lazy"}}},{"_id":"c8d4bad0-da7b-66bd-76f2-145656ffea1b","type":"Block","tag":"div","classes":[],"children":["c8d4bad0-da7b-66bd-76f2-145656ffea1c"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"c8d4bad0-da7b-66bd-76f2-145656ffea1c","text":true,"v":"Clear selection"},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f875","type":"FormSuccessMessage","tag":"div","classes":[],"children":["87092238-f0fa-0d7c-a4a6-7499d212f876"],"data":{"form":{"type":"msg-done"},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f876","type":"Block","tag":"div","classes":[],"children":["87092238-f0fa-0d7c-a4a6-7499d212f877"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f877","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f878","type":"FormErrorMessage","tag":"div","classes":[],"children":["87092238-f0fa-0d7c-a4a6-7499d212f879"],"data":{"form":{"type":"msg-fail"},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f879","type":"Block","tag":"div","classes":[],"children":["87092238-f0fa-0d7c-a4a6-7499d212f87a"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"87092238-f0fa-0d7c-a4a6-7499d212f87a","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"dd6c1483-6e75-7485-a277-c2f07eac1b0d","fake":false,"type":"class","name":"fs-selectcustom_message-icon","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: 0%; right: 0%; bottom: auto; width: 2rem; margin-top: -1rem; margin-right: -3rem; opacity: 0.4; filter: grayscale(100%); transform: rotate(60deg);","variants":{},"children":[],"selector":null},{"_id":"b3d5dda7-bf53-405f-78d3-0cc8d94e7e39","fake":false,"type":"class","name":"fs-selectcustom_message","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: auto; bottom: auto; width: 18rem; height: 4rem; margin-top: -4.25rem; margin-left: 19rem; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(78.84057971014492, 0.00%, 28.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(78.84057971014492, 0.00%, 28.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(78.84057971014492, 0.00%, 28.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(78.84057971014492, 0.00%, 28.00%, 1.00); border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;","variants":{"medium":{"styleLess":"display: none;"}},"children":[],"selector":null},{"_id":"e3a9dc4b-288b-2e4f-bcf5-bb98817f3e82","fake":false,"type":"class","name":"fs-selectcustom_reset-icon","namespace":"","comb":"","styleLess":"width: 0.65rem; margin-right: 0.5rem;","variants":{},"children":[],"selector":null},{"_id":"47870654-b3bb-4713-ee1f-b16c26445112","fake":false,"type":"class","name":"fs-selectcustom_dropdown-toggle","namespace":"","comb":"","styleLess":"display: flex; width: 100%; padding-top: 1rem; padding-right: 3rem; padding-bottom: 1rem; padding-left: 1rem; justify-content: space-between; background-color: hsla(0, 0.00%, 10.00%, 1.00);","variants":{"main_focus":{"styleLess":"border-top-style: solid; border-top-width: 1px; border-top-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00);"}},"children":["9aed0e62-32bf-b307-e018-7b11f8f1459b"],"selector":null},{"_id":"9aed0e62-32bf-b307-e018-7b11f8f1459b","fake":false,"type":"class","name":"is-border-effect","namespace":"","comb":"&","styleLess":"border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 96.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 96.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 96.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 96.00%, 1.00);","variants":{"main_focus":{"styleLess":"border-top-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-right-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-bottom-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-left-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00);"}},"children":[],"selector":null},{"_id":"73d5d22c-1024-e06a-8e70-1042d45037f4","fake":false,"type":"class","name":"fs-selectcustom_link","namespace":"","comb":"","styleLess":"display: flex; width: 100%; padding-top: 1rem; padding-right: 1rem; padding-bottom: 1rem; padding-left: 1rem; align-items: center; text-decoration: none;","variants":{"main_current":{"styleLess":"color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00);"},"main_current_focus":{"styleLess":"border-top-style: solid; border-top-width: 1px; border-top-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00);"},"main_visited":{"styleLess":"border-top-style: solid; border-top-width: 1px; border-top-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00);"},"main_focus":{"styleLess":"border-top-style: solid; border-top-width: 1px; border-top-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(78.84057971014492, 98.10%, 58.63%, 1.00);"}},"children":[],"selector":null},{"_id":"8238ea99-4390-64d4-998e-f6d3e0f951c0","fake":false,"type":"class","name":"fs-selectcustom_dropdown-list","namespace":"","comb":"","styleLess":"","variants":{"main_open":{"styleLess":"background-color: #252525;"}},"children":[],"selector":null},{"_id":"ac338f92-6ea3-e736-f7ce-57570d4580ef","fake":false,"type":"class","name":"fs-selectcustom_dropdown","namespace":"","comb":"","styleLess":"width: 16rem; margin-left: 2rem;","variants":{},"children":[],"selector":null},{"_id":"aacce27a-518a-24ee-e9f8-393453d1c36c","fake":false,"type":"class","name":"fs-selectcustom_label","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"selector":null},{"_id":"7116c8d0-636b-6550-48ec-5869dc8aff0d","fake":false,"type":"class","name":"fs-selectcustom_select","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: -3.5rem; right: -20rem; bottom: auto;","variants":{"medium":{"styleLess":"display: none;"}},"children":[],"selector":null},{"_id":"a04ae9fc-4aa9-3ff6-6acf-1187a74e6c60","fake":false,"type":"class","name":"fs-selectcustom_message-text","namespace":"","comb":"","styleLess":"position: absolute; left: auto; top: 0%; right: 0%; bottom: auto; max-width: 15rem; margin-top: -4rem; color: hsla(78.84057971014492, 0.00%, 47.33%, 1.00); text-align: right;","variants":{},"children":[],"selector":null}],"assets":[{"cdnUrl":"https://uploads-ssl.webflow.com/6132770a5e2efb2a37b68270/6132770a5e2efb31f9b68327_arrow-down-green.svg","siteId":"6132770a5e2efb2a37b68270","width":119,"isHD":false,"height":150,"fileName":"6132770a5e2efb31f9b68327_arrow-down-green.svg","createdOn":"2021-08-31T08:33:11.914Z","origFileName":"arrow-down-green.svg","fileHash":"7bf5a0f6525118e0a34e5a4046092e79","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/6132770a5e2efb2a37b68270/6132770a5e2efb31f9b68327_arrow-down-green.svg","thumbUrl":"https://uploads-ssl.webflow.com/6132770a5e2efb2a37b68270/6132770a5e2efb31f9b68327_arrow-down-green.svg","_id":"626c315ba1c26639e49c2d11","updatedOn":"2022-04-29T18:41:31.959Z","fileSize":1408},{"cdnUrl":"https://uploads-ssl.webflow.com/6132770a5e2efb2a37b68270/61b281ba2968b343192a09fb_arrow-left-white.svg","siteId":"6132770a5e2efb2a37b68270","width":150,"isHD":false,"height":150,"fileName":"61b281ba2968b343192a09fb_arrow-left-white.svg","createdOn":"2021-12-09T22:22:50.129Z","origFileName":"arrow-left-white.svg","alt":"back arrow\n","fileHash":"094d600e7750d8ee9067edca17c3450c","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/6132770a5e2efb2a37b68270/61b281ba2968b343192a09fb_arrow-left-white.svg","thumbUrl":"https://uploads-ssl.webflow.com/6132770a5e2efb2a37b68270/61b281ba2968b343192a09fb_arrow-left-white.svg","_id":"626c315ba1c266f2f69c2e51","updatedOn":"2022-04-29T18:41:32.657Z","fileSize":667}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}}]