Loading Component...

Loading

More Components

View All
Part of

Animated Inset Label Inputs

Oops! Something went wrong while submitting the form.
Animated Inset Label Inputs
{"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
CC Chrome or SS 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.

Similar Components

View All