Loading Component...
Loading
Thank you! I'll update
this project ASAP.
this project ASAP.
Oops! Something went wrong while submitting the form.
How to enable Google authentication
How to enable Facebook authentication
How to enable Spotify authentication
How to enable Dribbble authentication
How to enable Github authentication
How to enable LinkedIn authentication
How to enable passwordless logins
How to configure password validation
How to show/hide password
How to work with profile images
How to add a forgot password flow
How to work with checkboxes
How to configure pricing tables
About the Stripe Customer Portal
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"a29ab17b-ad3f-96e3-8eca-71d90aa73258","type":"Block","tag":"div","classes":[],"children":["11f4516d-c12c-8772-6fc5-4f69e3638439","825f1f9e-4282-b5c5-cfac-dc01245a820d"],"data":{"tag":"div","text":false}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638439","type":"FormWrapper","tag":"div","classes":["cf13f91b-bb81-3aaf-8ac1-fb9d7c90d095"],"children":["11f4516d-c12c-8772-6fc5-4f69e363843a","11f4516d-c12c-8772-6fc5-4f69e3638442","11f4516d-c12c-8772-6fc5-4f69e3638445"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e363843a","type":"FormForm","tag":"form","classes":[],"children":["cd500ec7-a35e-bbec-e6e6-5d2b83864632","7da1abcc-0c66-68aa-7438-1b71605e9276","2bf95a6d-d06a-f18d-b39e-52a4e604ceee","c4995cb9-73ec-abad-518f-3043421562e6","ce2f163b-3d25-8ff1-894b-4b95950ceeaf","e5e7a002-c178-a733-f551-6ec899e895ea"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"cd500ec7-a35e-bbec-e6e6-5d2b83864632","type":"Block","tag":"div","classes":["b12e1b50-1ad5-e42a-75cb-6c42278e3649"],"children":["11f4516d-c12c-8772-6fc5-4f69e363843b","11f4516d-c12c-8772-6fc5-4f69e363843d"],"data":{"search":{"exclude":false},"xattr":[{"name":"ms-code-input-focus","value":"wrap"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e363843b","type":"FormBlockLabel","tag":"label","classes":["8676821f-4474-3c7b-10be-30c81efda387"],"children":["11f4516d-c12c-8772-6fc5-4f69e363843c"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[{"name":"ms-code-input-focus","value":"label"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"First-Name","id":""},"visibility":{"conditions":[]}}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e363843c","text":true,"v":"First name"},{"_id":"11f4516d-c12c-8772-6fc5-4f69e363843d","type":"FormTextInput","tag":"input","classes":["dfe37151-5f19-0599-fdb0-f6994f0668d7"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"First-Name","data-name":"First Name","placeholder":"","type":"text","id":"First-Name","disabled":false,"required":false},"xattr":[{"name":"ms-code-input-focus","value":"input"}],"form":{"name":"First Name","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"7da1abcc-0c66-68aa-7438-1b71605e9276","type":"Block","tag":"div","classes":["b12e1b50-1ad5-e42a-75cb-6c42278e3649"],"children":["7da1abcc-0c66-68aa-7438-1b71605e9277","7da1abcc-0c66-68aa-7438-1b71605e9279"],"data":{"search":{"exclude":false},"xattr":[{"name":"ms-code-input-focus","value":"wrap"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"7da1abcc-0c66-68aa-7438-1b71605e9277","type":"FormBlockLabel","tag":"label","classes":["8676821f-4474-3c7b-10be-30c81efda387"],"children":["7da1abcc-0c66-68aa-7438-1b71605e9278"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[{"name":"ms-code-input-focus","value":"label"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Last-Name","id":""},"visibility":{"conditions":[]}}},{"_id":"7da1abcc-0c66-68aa-7438-1b71605e9278","text":true,"v":"Last name"},{"_id":"7da1abcc-0c66-68aa-7438-1b71605e9279","type":"FormTextInput","tag":"input","classes":["dfe37151-5f19-0599-fdb0-f6994f0668d7"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Last-Name","data-name":"Last Name","placeholder":"","type":"text","id":"Last-Name","disabled":false,"required":false},"xattr":[{"name":"ms-code-input-focus","value":"input"}],"form":{"name":"Last Name","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2bf95a6d-d06a-f18d-b39e-52a4e604ceee","type":"Block","tag":"div","classes":["b12e1b50-1ad5-e42a-75cb-6c42278e3649"],"children":["2bf95a6d-d06a-f18d-b39e-52a4e604ceef","2bf95a6d-d06a-f18d-b39e-52a4e604cef1"],"data":{"search":{"exclude":false},"xattr":[{"name":"ms-code-input-focus","value":"wrap"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"2bf95a6d-d06a-f18d-b39e-52a4e604ceef","type":"FormBlockLabel","tag":"label","classes":["8676821f-4474-3c7b-10be-30c81efda387"],"children":["2bf95a6d-d06a-f18d-b39e-52a4e604cef0"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[{"name":"ms-code-input-focus","value":"label"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Occupation","id":""},"visibility":{"conditions":[]}}},{"_id":"2bf95a6d-d06a-f18d-b39e-52a4e604cef0","text":true,"v":"Occupation"},{"_id":"2bf95a6d-d06a-f18d-b39e-52a4e604cef1","type":"FormTextInput","tag":"input","classes":["dfe37151-5f19-0599-fdb0-f6994f0668d7"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Occupation","data-name":"Occupation","placeholder":"","type":"text","id":"Occupation","disabled":false,"required":false},"xattr":[{"name":"ms-code-input-focus","value":"input"}],"form":{"name":"Occupation","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"c4995cb9-73ec-abad-518f-3043421562e6","type":"Block","tag":"div","classes":["b12e1b50-1ad5-e42a-75cb-6c42278e3649"],"children":["c4995cb9-73ec-abad-518f-3043421562e7","c4995cb9-73ec-abad-518f-3043421562e9"],"data":{"search":{"exclude":false},"xattr":[{"name":"ms-code-input-focus","value":"wrap"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"c4995cb9-73ec-abad-518f-3043421562e7","type":"FormBlockLabel","tag":"label","classes":["8676821f-4474-3c7b-10be-30c81efda387"],"children":["c4995cb9-73ec-abad-518f-3043421562e8"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[{"name":"ms-code-input-focus","value":"label"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Email","id":""},"visibility":{"conditions":[]}}},{"_id":"c4995cb9-73ec-abad-518f-3043421562e8","text":true,"v":"Email"},{"_id":"c4995cb9-73ec-abad-518f-3043421562e9","type":"FormTextInput","tag":"input","classes":["dfe37151-5f19-0599-fdb0-f6994f0668d7"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Email","data-name":"Email","placeholder":"","type":"email","id":"Email","disabled":false,"required":false},"xattr":[{"name":"ms-code-input-focus","value":"input"}],"form":{"name":"Email","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ce2f163b-3d25-8ff1-894b-4b95950ceeaf","type":"Block","tag":"div","classes":["b12e1b50-1ad5-e42a-75cb-6c42278e3649"],"children":["ce2f163b-3d25-8ff1-894b-4b95950ceeb0","ce2f163b-3d25-8ff1-894b-4b95950ceeb2"],"data":{"search":{"exclude":false},"xattr":[{"name":"ms-code-input-focus","value":"wrap"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ce2f163b-3d25-8ff1-894b-4b95950ceeb0","type":"FormBlockLabel","tag":"label","classes":["8676821f-4474-3c7b-10be-30c81efda387"],"children":["ce2f163b-3d25-8ff1-894b-4b95950ceeb1"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[{"name":"ms-code-input-focus","value":"label"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Phone-Number","id":""},"visibility":{"conditions":[]}}},{"_id":"ce2f163b-3d25-8ff1-894b-4b95950ceeb1","text":true,"v":"Phone number"},{"_id":"ce2f163b-3d25-8ff1-894b-4b95950ceeb2","type":"FormTextInput","tag":"input","classes":["dfe37151-5f19-0599-fdb0-f6994f0668d7"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Phone-Number","data-name":"Phone Number","placeholder":"","type":"text","id":"Phone-Number","disabled":false,"required":false},"xattr":[{"name":"ms-code-input-focus","value":"input"}],"form":{"name":"Phone Number","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e5e7a002-c178-a733-f551-6ec899e895ea","type":"Block","tag":"div","classes":["b12e1b50-1ad5-e42a-75cb-6c42278e3649","c7cdd786-cf11-45f5-0477-6ae669ebdcbf"],"children":["e5e7a002-c178-a733-f551-6ec899e895eb","e5e7a002-c178-a733-f551-6ec899e895ed"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e5e7a002-c178-a733-f551-6ec899e895eb","type":"FormBlockLabel","tag":"label","classes":["8676821f-4474-3c7b-10be-30c81efda387","f63f1608-947e-b13b-00a9-e35143d54d2f","ba1a60bb-dd80-bea4-eb90-0b3582374e15"],"children":["e5e7a002-c178-a733-f551-6ec899e895ec"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Phone-Number-2","id":""},"visibility":{"conditions":[]}}},{"_id":"e5e7a002-c178-a733-f551-6ec899e895ec","text":true,"v":"Phone number"},{"_id":"e5e7a002-c178-a733-f551-6ec899e895ed","type":"FormTextInput","tag":"input","classes":["dfe37151-5f19-0599-fdb0-f6994f0668d7"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Phone-Number-2","data-name":"Phone Number 2","placeholder":"","type":"text","id":"Phone-Number-2","disabled":false,"required":false},"form":{"name":"Phone Number 2","type":"input","passwordPage":false},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638442","type":"FormSuccessMessage","tag":"div","classes":[],"children":["11f4516d-c12c-8772-6fc5-4f69e3638443"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638443","type":"Block","tag":"div","classes":[],"children":["11f4516d-c12c-8772-6fc5-4f69e3638444"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638444","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638445","type":"FormErrorMessage","tag":"div","classes":[],"children":["11f4516d-c12c-8772-6fc5-4f69e3638446"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638446","type":"Block","tag":"div","classes":[],"children":["11f4516d-c12c-8772-6fc5-4f69e3638447"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638447","text":true,"v":"Oops! Something went wrong while submitting the form."},{"_id":"825f1f9e-4282-b5c5-cfac-dc01245a820d","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<style>\n .label {\n pointer-events: none;\n }\n</style>\n<script>\n// Get all the input wraps with the attribute ms-code-input-focus\nconst inputWraps = document.querySelectorAll('[ms-code-input-focus=\"wrap\"]');\n\n// Iterate over each input wrap\ninputWraps.forEach((wrap) => {\n // Find the label and input elements within the wrap\n const label = wrap.querySelector('[ms-code-input-focus=\"label\"]');\n const input = wrap.querySelector('[ms-code-input-focus=\"input\"]');\n\n // Add event listeners to the input element\n input.addEventListener('focus', () => {\n // Add the 'focus' class to the label when input is in focus\n label.classList.add('focus');\n });\n\n input.addEventListener('blur', () => {\n // Remove the 'focus' class from the label when input loses focus\n label.classList.remove('focus');\n });\n\n input.addEventListener('input', () => {\n if (input.value.trim() !== '') {\n // Add the 'when-filled' class to the label when input is being filled\n label.classList.add('when-filled');\n } else {\n // Remove the 'when-filled' class from the label if input is empty\n label.classList.remove('when-filled');\n }\n });\n});\n</script>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<style>\n .label {\n pointer-events: none;\n }\n</style>\n<script>\n// Get all the input wraps with the attribute ms-code-input-focus\nconst inputWraps = document.querySelectorAll('[ms-code-input-focus=\"wrap\"]');\n\n// Iterate over each input wrap\ninputWraps.forEach((wrap) => {\n // Find the label and input elements within the wrap\n const label = wrap.querySelector('[ms-code-input-focus=\"label\"]');\n const input = wrap.querySelector('[ms-code-input-focus=\"input\"]');\n\n // Add event listeners to the input element\n input.addEventListener('focus', () => {\n // Add the 'focus' class to the label when input is in focus\n label.classList.add('focus');\n });\n\n input.addEventListener('blur', () => {\n // Remove the 'focus' class from the label when input loses focus\n label.classList.remove('focus');\n });\n\n input.addEventListener('input', () => {\n if (input.value.trim() !== '') {\n // Add the 'when-filled' class to the label when input is being filled\n label.classList.add('when-filled');\n } else {\n // Remove the 'when-filled' class from the label if input is empty\n label.classList.remove('when-filled');\n }\n });\n});\n</script>","div":false,"iframe":false,"script":true}}}}],"styles":[{"_id":"cf13f91b-bb81-3aaf-8ac1-fb9d7c90d095","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"width: 100%; max-width: 350px; margin-bottom: 0px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"b12e1b50-1ad5-e42a-75cb-6c42278e3649","fake":false,"type":"class","name":"field-wrap","namespace":"","comb":"","styleLess":"position: relative; display: flex; height: 50px; margin-bottom: 20px; flex-direction: column; align-items: flex-start;","variants":{},"children":["c7cdd786-cf11-45f5-0477-6ae669ebdcbf"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"8676821f-4474-3c7b-10be-30c81efda387","fake":false,"type":"class","name":"label","namespace":"","comb":"","styleLess":"position: relative; top: 15px; z-index: 2; margin-left: 10px; padding-right: 5px; padding-left: 5px; background-color: hsla(0, 0.00%, 100.00%, 1.00); transition-property: font-size, top, color; transition-duration: 200ms, 200ms, 200ms; transition-timing-function: ease, ease, ease; color: hsla(0, 0.00%, 80.78%, 1.00); font-size: 16px; font-weight: 400;","variants":{},"children":["f63f1608-947e-b13b-00a9-e35143d54d2f"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"dfe37151-5f19-0599-fdb0-f6994f0668d7","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; width: 100%; height: 50px; margin-bottom: 0px; border-top-style: solid; border-top-width: 1.5px; border-top-color: hsla(0, 0.00%, 80.67%, 1.00); border-right-style: solid; border-right-width: 1.5px; border-right-color: hsla(0, 0.00%, 80.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1.5px; border-bottom-color: hsla(0, 0.00%, 80.67%, 1.00); border-left-style: solid; border-left-width: 1.5px; border-left-color: hsla(0, 0.00%, 80.67%, 1.00); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; transition-property: border-color; transition-duration: 200ms; transition-timing-function: ease;","variants":{"main_focus":{"styleLess":"border-top-style: solid; border-top-color: hsla(239, 90.74%, 64.01%, 1.00); border-right-style: solid; border-right-color: hsla(239, 90.74%, 64.01%, 1.00); border-bottom-style: solid; border-bottom-color: hsla(239, 90.74%, 64.01%, 1.00); border-left-style: solid; border-left-color: hsla(239, 90.74%, 64.01%, 1.00);"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"c7cdd786-cf11-45f5-0477-6ae669ebdcbf","fake":false,"type":"class","name":"hidden","namespace":"","comb":"&","styleLess":"display: none;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"f63f1608-947e-b13b-00a9-e35143d54d2f","fake":false,"type":"class","name":"when-filled","namespace":"","comb":"&","styleLess":"top: -9px; font-size: 12px;","variants":{},"children":["ba1a60bb-dd80-bea4-eb90-0b3582374e15"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"ba1a60bb-dd80-bea4-eb90-0b3582374e15","fake":false,"type":"class","name":"focus","namespace":"","comb":"&","styleLess":"color: hsla(239, 90.74%, 64.01%, 1.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"a29ab17b-ad3f-96e3-8eca-71d90aa73258","type":"Block","tag":"div","classes":[],"children":["11f4516d-c12c-8772-6fc5-4f69e3638439","825f1f9e-4282-b5c5-cfac-dc01245a820d"],"data":{"tag":"div","text":false}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638439","type":"FormWrapper","tag":"div","classes":["cf13f91b-bb81-3aaf-8ac1-fb9d7c90d095"],"children":["11f4516d-c12c-8772-6fc5-4f69e363843a","11f4516d-c12c-8772-6fc5-4f69e3638442","11f4516d-c12c-8772-6fc5-4f69e3638445"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e363843a","type":"FormForm","tag":"form","classes":[],"children":["cd500ec7-a35e-bbec-e6e6-5d2b83864632","7da1abcc-0c66-68aa-7438-1b71605e9276","2bf95a6d-d06a-f18d-b39e-52a4e604ceee","c4995cb9-73ec-abad-518f-3043421562e6","ce2f163b-3d25-8ff1-894b-4b95950ceeaf","e5e7a002-c178-a733-f551-6ec899e895ea"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"cd500ec7-a35e-bbec-e6e6-5d2b83864632","type":"Block","tag":"div","classes":["b12e1b50-1ad5-e42a-75cb-6c42278e3649"],"children":["11f4516d-c12c-8772-6fc5-4f69e363843b","11f4516d-c12c-8772-6fc5-4f69e363843d"],"data":{"search":{"exclude":false},"xattr":[{"name":"ms-code-input-focus","value":"wrap"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e363843b","type":"FormBlockLabel","tag":"label","classes":["8676821f-4474-3c7b-10be-30c81efda387"],"children":["11f4516d-c12c-8772-6fc5-4f69e363843c"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[{"name":"ms-code-input-focus","value":"label"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"First-Name","id":""},"visibility":{"conditions":[]}}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e363843c","text":true,"v":"First name"},{"_id":"11f4516d-c12c-8772-6fc5-4f69e363843d","type":"FormTextInput","tag":"input","classes":["dfe37151-5f19-0599-fdb0-f6994f0668d7"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"First-Name","data-name":"First Name","placeholder":"","type":"text","id":"First-Name","disabled":false,"required":false},"xattr":[{"name":"ms-code-input-focus","value":"input"}],"form":{"name":"First Name","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"7da1abcc-0c66-68aa-7438-1b71605e9276","type":"Block","tag":"div","classes":["b12e1b50-1ad5-e42a-75cb-6c42278e3649"],"children":["7da1abcc-0c66-68aa-7438-1b71605e9277","7da1abcc-0c66-68aa-7438-1b71605e9279"],"data":{"search":{"exclude":false},"xattr":[{"name":"ms-code-input-focus","value":"wrap"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"7da1abcc-0c66-68aa-7438-1b71605e9277","type":"FormBlockLabel","tag":"label","classes":["8676821f-4474-3c7b-10be-30c81efda387"],"children":["7da1abcc-0c66-68aa-7438-1b71605e9278"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[{"name":"ms-code-input-focus","value":"label"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Last-Name","id":""},"visibility":{"conditions":[]}}},{"_id":"7da1abcc-0c66-68aa-7438-1b71605e9278","text":true,"v":"Last name"},{"_id":"7da1abcc-0c66-68aa-7438-1b71605e9279","type":"FormTextInput","tag":"input","classes":["dfe37151-5f19-0599-fdb0-f6994f0668d7"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Last-Name","data-name":"Last Name","placeholder":"","type":"text","id":"Last-Name","disabled":false,"required":false},"xattr":[{"name":"ms-code-input-focus","value":"input"}],"form":{"name":"Last Name","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2bf95a6d-d06a-f18d-b39e-52a4e604ceee","type":"Block","tag":"div","classes":["b12e1b50-1ad5-e42a-75cb-6c42278e3649"],"children":["2bf95a6d-d06a-f18d-b39e-52a4e604ceef","2bf95a6d-d06a-f18d-b39e-52a4e604cef1"],"data":{"search":{"exclude":false},"xattr":[{"name":"ms-code-input-focus","value":"wrap"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"2bf95a6d-d06a-f18d-b39e-52a4e604ceef","type":"FormBlockLabel","tag":"label","classes":["8676821f-4474-3c7b-10be-30c81efda387"],"children":["2bf95a6d-d06a-f18d-b39e-52a4e604cef0"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[{"name":"ms-code-input-focus","value":"label"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Occupation","id":""},"visibility":{"conditions":[]}}},{"_id":"2bf95a6d-d06a-f18d-b39e-52a4e604cef0","text":true,"v":"Occupation"},{"_id":"2bf95a6d-d06a-f18d-b39e-52a4e604cef1","type":"FormTextInput","tag":"input","classes":["dfe37151-5f19-0599-fdb0-f6994f0668d7"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Occupation","data-name":"Occupation","placeholder":"","type":"text","id":"Occupation","disabled":false,"required":false},"xattr":[{"name":"ms-code-input-focus","value":"input"}],"form":{"name":"Occupation","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"c4995cb9-73ec-abad-518f-3043421562e6","type":"Block","tag":"div","classes":["b12e1b50-1ad5-e42a-75cb-6c42278e3649"],"children":["c4995cb9-73ec-abad-518f-3043421562e7","c4995cb9-73ec-abad-518f-3043421562e9"],"data":{"search":{"exclude":false},"xattr":[{"name":"ms-code-input-focus","value":"wrap"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"c4995cb9-73ec-abad-518f-3043421562e7","type":"FormBlockLabel","tag":"label","classes":["8676821f-4474-3c7b-10be-30c81efda387"],"children":["c4995cb9-73ec-abad-518f-3043421562e8"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[{"name":"ms-code-input-focus","value":"label"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Email","id":""},"visibility":{"conditions":[]}}},{"_id":"c4995cb9-73ec-abad-518f-3043421562e8","text":true,"v":"Email"},{"_id":"c4995cb9-73ec-abad-518f-3043421562e9","type":"FormTextInput","tag":"input","classes":["dfe37151-5f19-0599-fdb0-f6994f0668d7"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Email","data-name":"Email","placeholder":"","type":"email","id":"Email","disabled":false,"required":false},"xattr":[{"name":"ms-code-input-focus","value":"input"}],"form":{"name":"Email","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ce2f163b-3d25-8ff1-894b-4b95950ceeaf","type":"Block","tag":"div","classes":["b12e1b50-1ad5-e42a-75cb-6c42278e3649"],"children":["ce2f163b-3d25-8ff1-894b-4b95950ceeb0","ce2f163b-3d25-8ff1-894b-4b95950ceeb2"],"data":{"search":{"exclude":false},"xattr":[{"name":"ms-code-input-focus","value":"wrap"}],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ce2f163b-3d25-8ff1-894b-4b95950ceeb0","type":"FormBlockLabel","tag":"label","classes":["8676821f-4474-3c7b-10be-30c81efda387"],"children":["ce2f163b-3d25-8ff1-894b-4b95950ceeb1"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[{"name":"ms-code-input-focus","value":"label"}],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Phone-Number","id":""},"visibility":{"conditions":[]}}},{"_id":"ce2f163b-3d25-8ff1-894b-4b95950ceeb1","text":true,"v":"Phone number"},{"_id":"ce2f163b-3d25-8ff1-894b-4b95950ceeb2","type":"FormTextInput","tag":"input","classes":["dfe37151-5f19-0599-fdb0-f6994f0668d7"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Phone-Number","data-name":"Phone Number","placeholder":"","type":"text","id":"Phone-Number","disabled":false,"required":false},"xattr":[{"name":"ms-code-input-focus","value":"input"}],"form":{"name":"Phone Number","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e5e7a002-c178-a733-f551-6ec899e895ea","type":"Block","tag":"div","classes":["b12e1b50-1ad5-e42a-75cb-6c42278e3649","c7cdd786-cf11-45f5-0477-6ae669ebdcbf"],"children":["e5e7a002-c178-a733-f551-6ec899e895eb","e5e7a002-c178-a733-f551-6ec899e895ed"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e5e7a002-c178-a733-f551-6ec899e895eb","type":"FormBlockLabel","tag":"label","classes":["8676821f-4474-3c7b-10be-30c81efda387","f63f1608-947e-b13b-00a9-e35143d54d2f","ba1a60bb-dd80-bea4-eb90-0b3582374e15"],"children":["e5e7a002-c178-a733-f551-6ec899e895ec"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Phone-Number-2","id":""},"visibility":{"conditions":[]}}},{"_id":"e5e7a002-c178-a733-f551-6ec899e895ec","text":true,"v":"Phone number"},{"_id":"e5e7a002-c178-a733-f551-6ec899e895ed","type":"FormTextInput","tag":"input","classes":["dfe37151-5f19-0599-fdb0-f6994f0668d7"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Phone-Number-2","data-name":"Phone Number 2","placeholder":"","type":"text","id":"Phone-Number-2","disabled":false,"required":false},"form":{"name":"Phone Number 2","type":"input","passwordPage":false},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638442","type":"FormSuccessMessage","tag":"div","classes":[],"children":["11f4516d-c12c-8772-6fc5-4f69e3638443"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638443","type":"Block","tag":"div","classes":[],"children":["11f4516d-c12c-8772-6fc5-4f69e3638444"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638444","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638445","type":"FormErrorMessage","tag":"div","classes":[],"children":["11f4516d-c12c-8772-6fc5-4f69e3638446"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638446","type":"Block","tag":"div","classes":[],"children":["11f4516d-c12c-8772-6fc5-4f69e3638447"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"11f4516d-c12c-8772-6fc5-4f69e3638447","text":true,"v":"Oops! Something went wrong while submitting the form."},{"_id":"825f1f9e-4282-b5c5-cfac-dc01245a820d","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<style>\n .label {\n pointer-events: none;\n }\n</style>\n<script>\n// Get all the input wraps with the attribute ms-code-input-focus\nconst inputWraps = document.querySelectorAll('[ms-code-input-focus=\"wrap\"]');\n\n// Iterate over each input wrap\ninputWraps.forEach((wrap) => {\n // Find the label and input elements within the wrap\n const label = wrap.querySelector('[ms-code-input-focus=\"label\"]');\n const input = wrap.querySelector('[ms-code-input-focus=\"input\"]');\n\n // Add event listeners to the input element\n input.addEventListener('focus', () => {\n // Add the 'focus' class to the label when input is in focus\n label.classList.add('focus');\n });\n\n input.addEventListener('blur', () => {\n // Remove the 'focus' class from the label when input loses focus\n label.classList.remove('focus');\n });\n\n input.addEventListener('input', () => {\n if (input.value.trim() !== '') {\n // Add the 'when-filled' class to the label when input is being filled\n label.classList.add('when-filled');\n } else {\n // Remove the 'when-filled' class from the label if input is empty\n label.classList.remove('when-filled');\n }\n });\n});\n</script>","data":{"insideRTE":false,"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"embed":{"type":"html","meta":{"html":"<style>\n .label {\n pointer-events: none;\n }\n</style>\n<script>\n// Get all the input wraps with the attribute ms-code-input-focus\nconst inputWraps = document.querySelectorAll('[ms-code-input-focus=\"wrap\"]');\n\n// Iterate over each input wrap\ninputWraps.forEach((wrap) => {\n // Find the label and input elements within the wrap\n const label = wrap.querySelector('[ms-code-input-focus=\"label\"]');\n const input = wrap.querySelector('[ms-code-input-focus=\"input\"]');\n\n // Add event listeners to the input element\n input.addEventListener('focus', () => {\n // Add the 'focus' class to the label when input is in focus\n label.classList.add('focus');\n });\n\n input.addEventListener('blur', () => {\n // Remove the 'focus' class from the label when input loses focus\n label.classList.remove('focus');\n });\n\n input.addEventListener('input', () => {\n if (input.value.trim() !== '') {\n // Add the 'when-filled' class to the label when input is being filled\n label.classList.add('when-filled');\n } else {\n // Remove the 'when-filled' class from the label if input is empty\n label.classList.remove('when-filled');\n }\n });\n});\n</script>","div":false,"iframe":false,"script":true}}}}],"styles":[{"_id":"cf13f91b-bb81-3aaf-8ac1-fb9d7c90d095","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"width: 100%; max-width: 350px; margin-bottom: 0px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"b12e1b50-1ad5-e42a-75cb-6c42278e3649","fake":false,"type":"class","name":"field-wrap","namespace":"","comb":"","styleLess":"position: relative; display: flex; height: 50px; margin-bottom: 20px; flex-direction: column; align-items: flex-start;","variants":{},"children":["c7cdd786-cf11-45f5-0477-6ae669ebdcbf"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"8676821f-4474-3c7b-10be-30c81efda387","fake":false,"type":"class","name":"label","namespace":"","comb":"","styleLess":"position: relative; top: 15px; z-index: 2; margin-left: 10px; padding-right: 5px; padding-left: 5px; background-color: hsla(0, 0.00%, 100.00%, 1.00); transition-property: font-size, top, color; transition-duration: 200ms, 200ms, 200ms; transition-timing-function: ease, ease, ease; color: hsla(0, 0.00%, 80.78%, 1.00); font-size: 16px; font-weight: 400;","variants":{},"children":["f63f1608-947e-b13b-00a9-e35143d54d2f"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"dfe37151-5f19-0599-fdb0-f6994f0668d7","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; width: 100%; height: 50px; margin-bottom: 0px; border-top-style: solid; border-top-width: 1.5px; border-top-color: hsla(0, 0.00%, 80.67%, 1.00); border-right-style: solid; border-right-width: 1.5px; border-right-color: hsla(0, 0.00%, 80.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1.5px; border-bottom-color: hsla(0, 0.00%, 80.67%, 1.00); border-left-style: solid; border-left-width: 1.5px; border-left-color: hsla(0, 0.00%, 80.67%, 1.00); border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; transition-property: border-color; transition-duration: 200ms; transition-timing-function: ease;","variants":{"main_focus":{"styleLess":"border-top-style: solid; border-top-color: hsla(239, 90.74%, 64.01%, 1.00); border-right-style: solid; border-right-color: hsla(239, 90.74%, 64.01%, 1.00); border-bottom-style: solid; border-bottom-color: hsla(239, 90.74%, 64.01%, 1.00); border-left-style: solid; border-left-color: hsla(239, 90.74%, 64.01%, 1.00);"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"c7cdd786-cf11-45f5-0477-6ae669ebdcbf","fake":false,"type":"class","name":"hidden","namespace":"","comb":"&","styleLess":"display: none;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"f63f1608-947e-b13b-00a9-e35143d54d2f","fake":false,"type":"class","name":"when-filled","namespace":"","comb":"&","styleLess":"top: -9px; font-size: 12px;","variants":{},"children":["ba1a60bb-dd80-bea4-eb90-0b3582374e15"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"ba1a60bb-dd80-bea4-eb90-0b3582374e15","fake":false,"type":"class","name":"focus","namespace":"","comb":"&","styleLess":"color: hsla(239, 90.74%, 64.01%, 1.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser not supported. Use
Chrome or Safari.
Chrome or Safari.
About this component
AI Generated
Component Description (Generated by AI)
The Animated Inset Label Inputs component provides a modern and interactive form input design where labels animate into position when the user interacts with the input fields. This enhances user experience and visual appeal.
Key Features:
- Animated labels that move when input fields are focused or filled
- Includes multiple input types: text, email, and phone number
- Responsive design suitable for various screen sizes
- Customizable styles and animations
- Success and error messages for form submissions
Design Elements:
- Clean and minimalistic design
- Soft color palette with a focus on usability
- Rounded input fields with subtle border animations
- Labels transition smoothly to indicate focus and filled states
Potential Use Cases:
- Contact forms for businesses and service providers
- Sign-up forms for newsletters or memberships
- User registration forms for websites and applications
- Feedback or inquiry forms for customer support
- Event registration forms for workshops or seminars
Conclusion: The Animated Inset Label Inputs component is a versatile and visually appealing solution for modern web forms, enhancing user interaction while maintaining a clean aesthetic.