Concours : Créez une application SaaS entre le 29 mai et le 14 juin et courez la chance de gagner des prix en espèces, des plans gratuits et bien plus encore !
Chargement du composant...
Chargement
Je vous remercie ! Je mettrai à jour
ce projet dès que possible.
ce projet dès que possible.
Oups ! Un problème s'est produit lors de l'envoi du formulaire.
Comment activer l'authentification Google
Comment activer l'authentification Facebook
Comment activer l'authentification Spotify
Comment activer l'authentification Dribbble
Comment activer l'authentification Github
Comment activer l'authentification LinkedIn
Comment activer les connexions sans mot de passe
Comment configurer la validation du mot de passe
Comment afficher/masquer le mot de passe
Comment travailler avec des images de profil
Comment ajouter un flux d'oubli de mot de passe
Comment travailler avec des cases à cocher
Comment configurer les tables de tarification
A propos du portail client Stripe
{"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}}
Cloner dans Webflow
Composant de copie
{"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}}
Navigateur non pris en charge. Utilisez
Chrome ou Safari.
Chrome ou Safari.
A propos de ce composant
Généré par l'IA
Description du composant (générée par l'IA)
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.
Caractéristiques principales :
- 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
Éléments de conception :
- 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
Cas d'utilisation potentiels :
- 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.
Commencer à construire
Commencez à construire vos rêves
Memberstack est 100% gratuit jusqu'à ce que vous soyez prêt à vous lancer - alors, qu'attendez-vous ? Créez votre première application et commencez à construire dès aujourd'hui.
.png)
