Komponente laden...
Laden
Ich danke Ihnen! Ich werde
dieses Projekt so schnell wie möglich aktualisieren.
dieses Projekt so schnell wie möglich aktualisieren.
Huch! Beim Absenden des Formulars ist etwas schief gelaufen.
So aktivieren Sie die Google-Authentifizierung
So aktivieren Sie die Facebook-Authentifizierung
So aktivieren Sie die Spotify-Authentifizierung
Wie man die Dribbble-Authentifizierung aktiviert
Wie man die Github-Authentifizierung aktiviert
So aktivieren Sie die LinkedIn-Authentifizierung
So aktivieren Sie passwortlose Anmeldungen
So konfigurieren Sie die Kennwortüberprüfung
Passwort ein-/ausblenden
Wie man mit Profilbildern arbeitet
So fügen Sie einen Fluss für vergessene Passwörter hinzu
Wie man mit Kontrollkästchen arbeitet
Wie man Preistabellen konfiguriert
Über das Stripe-Kundenportal
{"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}}
Klonen in Webflow
Komponente kopieren
{"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 nicht unterstützt. Verwenden Sie
Chrome oder Safari.
Chrome oder Safari.
Über diese Komponente
AI-generiert
Komponentenbeschreibung (von AI generiert)
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.
Wesentliche Merkmale:
- 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
Gestaltungselemente:
- 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
Potenzielle Anwendungsfälle:
- 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.
Mit dem Bau beginnen
Bauen Sie Ihre Träume
Memberstack ist 100% kostenlos, bis Sie bereit sind, zu starten - worauf warten Sie also noch? Erstellen Sie Ihre erste App und beginnen Sie noch heute mit der Entwicklung.