Component laden...
Laden
Bedankt! Ik zal
dit project zo snel mogelijk bijwerken.
dit project zo snel mogelijk bijwerken.
Oeps! Er ging iets mis bij het verzenden van het formulier.
Hoe Google-verificatie inschakelen
Facebook-verificatie inschakelen
Spotify verificatie inschakelen
Hoe Dribbble verificatie in te schakelen
Hoe de Github-authenticatie in te schakelen
Hoe LinkedIn verificatie inschakelen
Hoe wachtwoordloze aanmeldingen inschakelen
Hoe wachtwoordvalidatie configureren
Hoe wachtwoord tonen/verbergen
Werken met profielafbeeldingen
Hoe een wachtwoord vergeten-flow toevoegen
Werken met selectievakjes
Hoe prijstabellen configureren
Over het Stripe klantenportaal
{"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
Kopieer 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 niet ondersteund. Gebruik
Chrome of Safari.
Chrome of Safari.
Over dit onderdeel
AI-gegenereerd
Beschrijving van onderdeel (gegenereerd door 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.
Belangrijkste kenmerken:
- Animated labels that move when input fields are focused or filled
- Includes multiple input types: text, email, and phone number
- Responsive ontwerp geschikt voor verschillende schermformaten
- Customizable styles and animations
- Success and error messages for form submissions
Ontwerpelementen:
- Clean and minimalistic design
- Zacht kleurenpalet met focus op bruikbaarheid
- Rounded input fields with subtle border animations
- Labels transition smoothly to indicate focus and filled states
Potentiële gebruikssituaties:
- 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.
Bouwen
Begin met het bouwen van je dromen
Memberstack is 100% gratis totdat u klaar bent om te lanceren - dus waar wacht u nog op? Maak je eerste app en begin vandaag nog.