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":"5f90ba0b-084e-4d5f-e207-ff2e38178809","type":"Block","tag":"div","classes":["16a5e4a4-e998-6287-974e-daebbb9061d4"],"children":["0c0968ef-1baf-0a1e-f5e2-c73ecbb233c4","5d0a3d28-4c8f-ba20-2fb5-2b2246cf7c85","3da2bf26-d794-6ca6-3b20-83868248f861"],"data":{"tag":"div","text":false,"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0c0968ef-1baf-0a1e-f5e2-c73ecbb233c4","type":"HtmlEmbed","tag":"div","classes":["36f14744-3a9c-ee2a-3a7f-8b3e804be68d"],"children":[],"v":"👋 Double click for CSS - Add to the page header\n\n<style>\n.form-control input:focus {\n\tborder-bottom-color: #000;\n\toutline: none;\n}\n.form-control input:focus + label span{\n\tcolor: #000;\n\ttransform: translateY(-30px);\n}\n.form-control input:valid {\n\tborder-bottom-color: #a54b9c;\n\toutline: none;\n}\n.form-control input:valid + label span{\n\tcolor: #a54b9c;\n\ttransform: translateY(-30px);\n}\n.form-control label span {\n\tdisplay: inline-block;\n\tfont-size: 18px;\n\tmin-width: 5px;\n\ttransition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n</style>","data":{"embed":{"type":"html","meta":{"html":"👋 Double click for CSS - Add to the page header\n\n<style>\n.form-control input:focus {\n\tborder-bottom-color: #000;\n\toutline: none;\n}\n.form-control input:focus + label span{\n\tcolor: #000;\n\ttransform: translateY(-30px);\n}\n.form-control input:valid {\n\tborder-bottom-color: #a54b9c;\n\toutline: none;\n}\n.form-control input:valid + label span{\n\tcolor: #a54b9c;\n\ttransform: translateY(-30px);\n}\n.form-control label span {\n\tdisplay: inline-block;\n\tfont-size: 18px;\n\tmin-width: 5px;\n\ttransition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n</style>","div":false,"iframe":false,"script":false,"compilable":false}},"insideRTE":false,"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5d0a3d28-4c8f-ba20-2fb5-2b2246cf7c85","type":"BackgroundVideoWrapper","tag":"div","classes":["2bbcaf6f-60dc-bc8d-dcf7-1f5934338c5c"],"children":["d6980dbb-2285-5132-55c8-91c1a5828b43"],"data":{"tag":"div","bgvideo":{"type":"wrapper","video_urls":["https://cdn.prod.website-files.com/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-transcode.webm","https://cdn.prod.website-files.com/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-transcode.mp4"],"poster_image_url":"https://cdn.prod.website-files.com/62210aa39c6f504f6d96bb26/62225ddcd5ae0c49af8e7034_production ID_4623748-poster-00001.jpg","original_filename":""},"attr":{"data-poster-url":"https://cdn.prod.website-files.com/62210aa39c6f504f6d96bb26/62225ddcd5ae0c49af8e7034_production ID_4623748-poster-00001.jpg","data-video-urls":"https://cdn.prod.website-files.com/62210aa39c6f504f6d96bb26/62225ddcd5ae0c49af8e7034_production ID_4623748-transcode.webm,https://cdn.prod.website-files.com/62210aa39c6f504f6d96bb26/62225ddcd5ae0c49af8e7034_production ID_4623748-transcode.mp4","data-autoplay":true,"data-loop":true,"data-wf-ignore":true,"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d6980dbb-2285-5132-55c8-91c1a5828b43","type":"Block","tag":"div","classes":["0b8abaff-ead8-ef98-dac0-9a0d1ef61a9e"],"children":["9f2db951-05a5-7838-6b16-8407bd661bbd"],"data":{"tag":"div","text":false,"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bbd","type":"FormWrapper","tag":"div","classes":[],"children":["9f2db951-05a5-7838-6b16-8407bd661bbe","9f2db951-05a5-7838-6b16-8407bd661bc6","9f2db951-05a5-7838-6b16-8407bd661bc9"],"data":{"form":{"type":"wrapper"},"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bbe","type":"FormForm","tag":"form","classes":[],"children":["d44217bf-2340-89d5-fbfe-d1bf6f4d8b04","1bc5992b-fada-3d28-05b3-d20a54b6b734","328d20f8-6815-3c20-ec2f-051ded4fc0f9","9f2db951-05a5-7838-6b16-8407bd661bc5"],"data":{"form":{"type":"form","name":"Email Form"},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"#/ms/reset-password","data-redirect":"#/ms/reset-password","action":"","method":"get"},"xattr":[{"name":"data-ms-form","value":"login"}],"search":{"exclude":false},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"d44217bf-2340-89d5-fbfe-d1bf6f4d8b04","type":"Heading","tag":"h1","classes":["294f1de2-d6cd-bb75-7a9a-b15d676cf09c"],"children":["d44217bf-2340-89d5-fbfe-d1bf6f4d8b05","05ad4ba7-c036-c556-9ee1-af4c866a0f46"],"data":{"tag":"h1","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d44217bf-2340-89d5-fbfe-d1bf6f4d8b05","text":true,"v":"Login"},{"_id":"05ad4ba7-c036-c556-9ee1-af4c866a0f46","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"1bc5992b-fada-3d28-05b3-d20a54b6b734","type":"Block","tag":"div","classes":["1b721393-1b62-01a3-8308-cdc45decb365"],"children":["9f2db951-05a5-7838-6b16-8407bd661bc4","9f2db951-05a5-7838-6b16-8407bd661bc2"],"data":{"text":false,"tag":"div","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc4","type":"FormTextInput","tag":"input","classes":["2ed05cab-25ad-e65a-b34f-b4038a90640c"],"children":[],"data":{"form":{"name":"Email","type":"input","passwordPage":false},"attr":{"autofocus":false,"maxlength":256,"name":"email","data-name":"Email","placeholder":"","type":"email","id":"email","disabled":false,"required":true},"xattr":[{"name":"data-ms-member","value":"email"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc2","type":"FormBlockLabel","tag":"label","classes":["3a7abb5d-454c-fc89-6fe6-3bc03ae9f623"],"children":["9f2db951-05a5-7838-6b16-8407bd661bc3"],"data":{"form":{"type":"label"},"attr":{"for":"email","id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc3","text":true,"v":"Email Address"},{"_id":"328d20f8-6815-3c20-ec2f-051ded4fc0f9","type":"Block","tag":"div","classes":["1b721393-1b62-01a3-8308-cdc45decb365"],"children":["328d20f8-6815-3c20-ec2f-051ded4fc0fa","328d20f8-6815-3c20-ec2f-051ded4fc0fb","b5a96a6d-2c57-dd1c-ab5c-ca68d0008454"],"data":{"search":{"exclude":false},"clearfix":true,"xattr":[],"text":false,"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"328d20f8-6815-3c20-ec2f-051ded4fc0fa","type":"FormTextInput","tag":"input","classes":["2ed05cab-25ad-e65a-b34f-b4038a90640c"],"children":[],"data":{"form":{"name":"Password","type":"input","passwordPage":false},"attr":{"autofocus":false,"maxlength":256,"name":"Password","data-name":"Password","placeholder":"","type":"password","id":"Password","disabled":false,"required":true},"xattr":[{"name":"minlength","value":"8"},{"name":"data-ms-member","value":"password"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"328d20f8-6815-3c20-ec2f-051ded4fc0fb","type":"FormBlockLabel","tag":"label","classes":["3a7abb5d-454c-fc89-6fe6-3bc03ae9f623"],"children":["328d20f8-6815-3c20-ec2f-051ded4fc0fc"],"data":{"form":{"type":"label"},"attr":{"for":"email-2","id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"328d20f8-6815-3c20-ec2f-051ded4fc0fc","text":true,"v":"Password"},{"_id":"b5a96a6d-2c57-dd1c-ab5c-ca68d0008454","type":"Link","tag":"a","classes":["9d043cda-7a69-a7dd-1e7b-fa03d8914abd"],"children":["b5a96a6d-2c57-dd1c-ab5c-ca68d0008455"],"data":{"search":{"exclude":false},"xattr":[],"block":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"b5a96a6d-2c57-dd1c-ab5c-ca68d0008455","text":true,"v":"Forgot Password"},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc5","type":"FormButton","tag":"input","classes":["10f35e59-c4fe-77aa-9de3-22212dee4290"],"children":[],"data":{"form":{"type":"button","wait":"Please wait..."},"attr":{"type":"submit","value":"Access My Account","data-wait":"Please wait...","id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc6","type":"FormSuccessMessage","tag":"div","classes":["4efd3e91-0a30-0ed0-8672-79e2e1c68d74"],"children":["9f2db951-05a5-7838-6b16-8407bd661bc7"],"data":{"form":{"type":"msg-done"},"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc7","type":"Block","tag":"div","classes":[],"children":["9f2db951-05a5-7838-6b16-8407bd661bc8"],"data":{"tag":"div","text":true,"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc8","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc9","type":"FormErrorMessage","tag":"div","classes":["4efd3e91-0a30-0ed0-8672-79e2e1c68d74"],"children":["9f2db951-05a5-7838-6b16-8407bd661bca"],"data":{"form":{"type":"msg-fail"},"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bca","type":"Block","tag":"div","classes":[],"children":["9f2db951-05a5-7838-6b16-8407bd661bcb"],"data":{"tag":"div","text":true,"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bcb","text":true,"v":"Oops! Something went wrong while submitting the form."},{"_id":"3da2bf26-d794-6ca6-3b20-83868248f861","type":"HtmlEmbed","tag":"div","classes":["36f14744-3a9c-ee2a-3a7f-8b3e804be68d"],"children":[],"v":"<!--👋 Add to the page footer-->\n<script>\nconst inputs = document.querySelectorAll('.form-control input');\nconst labels = document.querySelectorAll('.form-control label');\n\nlabels.forEach(label => {\n\tlabel.innerHTML = label.innerText\n\t\t.split('')\n\t\t.map((letter, idx) => `<span style=\"\n\t\t\t\ttransition-delay: ${idx * 50}ms\n\t\t\t\">${letter}</span>`)\n\t\t.join('');\n});\n</script>","data":{"embed":{"type":"html","meta":{"html":"<!--👋 Add to the page footer-->\n<script>\nconst inputs = document.querySelectorAll('.form-control input');\nconst labels = document.querySelectorAll('.form-control label');\n\nlabels.forEach(label => {\n\tlabel.innerHTML = label.innerText\n\t\t.split('')\n\t\t.map((letter, idx) => `<span style=\"\n\t\t\t\ttransition-delay: ${idx * 50}ms\n\t\t\t\">${letter}</span>`)\n\t\t.join('');\n});\n</script>","div":false,"iframe":false,"script":true,"compilable":false}},"insideRTE":false,"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}}],"styles":[{"_id":"10f35e59-c4fe-77aa-9de3-22212dee4290","fake":false,"type":"class","name":"Submit Button","namespace":"","comb":"","styleLess":"width: 100%; margin-left: -2px; padding-top: 15px; padding-bottom: 15px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(305.1724137931035, 27.36%, 41.57%, 1.00); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background-color: hsla(306, 37.50%, 47.06%, 1.00); box-shadow: 14px 14px 5px 0 hsla(227.6470588235294, 68.00%, 9.80%, 0.10); font-size: 1.15em;","variants":{},"children":[],"selector":null},{"_id":"9d043cda-7a69-a7dd-1e7b-fa03d8914abd","fake":false,"type":"class","name":"Forgot Password","namespace":"","comb":"","styleLess":"position: relative; margin-bottom: -20px; float: right; color: hsla(305.1724137931035, 27.36%, 41.57%, 1.00); text-decoration: none;","variants":{},"children":[],"selector":null},{"_id":"16a5e4a4-e998-6287-974e-daebbb9061d4","fake":false,"type":"class","name":"COPY ME","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"selector":null},{"_id":"2bbcaf6f-60dc-bc8d-dcf7-1f5934338c5c","fake":false,"type":"class","name":"Background Video","namespace":"","comb":"","styleLess":"position: relative; display: flex; min-height: 100vh; padding-top: 80px; padding-right: 30px; padding-bottom: 80px; padding-left: 30px; flex-direction: row; justify-content: center; align-items: center; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25),rgba(255, 255, 255, 0.25));","variants":{"tiny":{"styleLess":"display: block; min-height: 100vh; padding-top: 50px; padding-right: 18px; padding-bottom: 50px; padding-left: 18px;"}},"children":[],"selector":null},{"_id":"4efd3e91-0a30-0ed0-8672-79e2e1c68d74","fake":false,"type":"class","name":"hide","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"selector":null},{"_id":"1b721393-1b62-01a3-8308-cdc45decb365","fake":false,"type":"class","name":"Form Control","namespace":"","comb":"","styleLess":"position: relative; margin-top: 20px; margin-bottom: 50px;","variants":{},"children":[],"selector":null},{"_id":"294f1de2-d6cd-bb75-7a9a-b15d676cf09c","fake":false,"type":"class","name":"Asset Name","namespace":"","comb":"","styleLess":"margin-top: 0px; margin-bottom: 65px; color: hsla(0, 1.59%, 27.56%, 1.00); font-size: 30px; line-height: 38px; font-weight: 400;","variants":{},"children":[],"selector":null},{"_id":"0b8abaff-ead8-ef98-dac0-9a0d1ef61a9e","fake":false,"type":"class","name":"Form Wrap","namespace":"","comb":"","styleLess":"width: 100%; max-width: 400px; margin-right: auto; margin-left: auto; padding-top: 60px; padding-right: 60px; padding-bottom: 38px; padding-left: 60px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background-color: hsla(0, 0.00%, 100.00%, 0.90); box-shadow: 21px 21px 10px 0 rgba(8, 15, 42, 0.15);","variants":{},"children":[],"selector":null},{"_id":"36f14744-3a9c-ee2a-3a7f-8b3e804be68d","fake":false,"type":"class","name":"Hide onLoad","namespace":"","comb":"","styleLess":"padding-top: 18px; padding-bottom: 21px; text-align: center;","variants":{},"children":[],"selector":null},{"_id":"2ed05cab-25ad-e65a-b34f-b4038a90640c","fake":false,"type":"class","name":"Text Field","namespace":"","comb":"","styleLess":"position: relative; z-index: 2; display: block; width: 100%; margin-bottom: 10px; padding-top: 15px; padding-bottom: 15px; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: hsla(0, 0.00%, 0.00%, 0.30); border-left-style: none; background-color: transparent; transition-property: border-color; transition-duration: 100ms; transition-timing-function: ease; font-size: 18px;","variants":{"main_focus":{"styleLess":"border-bottom-color: hsla(306, 37.50%, 47.06%, 1.00);"}},"children":[],"selector":null},{"_id":"3a7abb5d-454c-fc89-6fe6-3bc03ae9f623","fake":false,"type":"class","name":"Field Label","namespace":"","comb":"","styleLess":"position: absolute; left: 0px; top: 0px; z-index: 1; margin-bottom: 0px; font-family: Montserrat; color: hsla(0, 0.00%, 24.67%, 1.00); font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0.6px;","variants":{},"children":[],"selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748.mp4","siteId":"632b15d83872924ac2b5a4be","width":0,"isHD":false,"height":0,"fileName":"632b15d9387292f0c3b5a4de_production ID_4623748.mp4","createdOn":"2022-03-04T18:43:40.730Z","origFileName":"production ID_4623748.mp4","fileHash":"b69c863b1ac7e39ebf67e0edd22252b6","variants":[{"_id":"62225debe9c5fa0e3a560a20","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-poster-00001.jpg","fileName":"632b15d9387292f0c3b5a4de_production ID_4623748-poster-00001.jpg","origFileName":"production ID_4623748-poster-00001.jpg","format":"jpg","cdnUrl":"https://cdn.prod.website-files.com/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-poster-00001.jpg"},{"_id":"62225debe9c5fa7cac560a21","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-transcode.webm","fileName":"632b15d9387292f0c3b5a4de_production ID_4623748-transcode.webm","origFileName":"production ID_4623748-transcode.webm","format":"webm","cdnUrl":"https://cdn.prod.website-files.com/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-transcode.webm"},{"_id":"62225debe9c5fac4b1560a22","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-transcode.mp4","fileName":"632b15d9387292f0c3b5a4de_production ID_4623748-transcode.mp4","origFileName":"production ID_4623748-transcode.mp4","format":"mp4","cdnUrl":"https://cdn.prod.website-files.com/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-transcode.mp4"}],"mimeType":"video/mp4","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748.mp4","thumbUrl":"https://cdn.prod.website-files.com/62210aa39c6f504f6d96bb26/62225ddcd5ae0c49af8e7034_production ID_4623748-poster-00001.jpg","_id":"632b15d9387292f0c3b5a4de","updatedOn":"2022-09-21T13:47:06.062Z","fileSize":6984718}],"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":"5f90ba0b-084e-4d5f-e207-ff2e38178809","type":"Block","tag":"div","classes":["16a5e4a4-e998-6287-974e-daebbb9061d4"],"children":["0c0968ef-1baf-0a1e-f5e2-c73ecbb233c4","5d0a3d28-4c8f-ba20-2fb5-2b2246cf7c85","3da2bf26-d794-6ca6-3b20-83868248f861"],"data":{"tag":"div","text":false,"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"0c0968ef-1baf-0a1e-f5e2-c73ecbb233c4","type":"HtmlEmbed","tag":"div","classes":["36f14744-3a9c-ee2a-3a7f-8b3e804be68d"],"children":[],"v":"👋 Double click for CSS - Add to the page header\n\n<style>\n.form-control input:focus {\n\tborder-bottom-color: #000;\n\toutline: none;\n}\n.form-control input:focus + label span{\n\tcolor: #000;\n\ttransform: translateY(-30px);\n}\n.form-control input:valid {\n\tborder-bottom-color: #a54b9c;\n\toutline: none;\n}\n.form-control input:valid + label span{\n\tcolor: #a54b9c;\n\ttransform: translateY(-30px);\n}\n.form-control label span {\n\tdisplay: inline-block;\n\tfont-size: 18px;\n\tmin-width: 5px;\n\ttransition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n</style>","data":{"embed":{"type":"html","meta":{"html":"👋 Double click for CSS - Add to the page header\n\n<style>\n.form-control input:focus {\n\tborder-bottom-color: #000;\n\toutline: none;\n}\n.form-control input:focus + label span{\n\tcolor: #000;\n\ttransform: translateY(-30px);\n}\n.form-control input:valid {\n\tborder-bottom-color: #a54b9c;\n\toutline: none;\n}\n.form-control input:valid + label span{\n\tcolor: #a54b9c;\n\ttransform: translateY(-30px);\n}\n.form-control label span {\n\tdisplay: inline-block;\n\tfont-size: 18px;\n\tmin-width: 5px;\n\ttransition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n</style>","div":false,"iframe":false,"script":false,"compilable":false}},"insideRTE":false,"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"5d0a3d28-4c8f-ba20-2fb5-2b2246cf7c85","type":"BackgroundVideoWrapper","tag":"div","classes":["2bbcaf6f-60dc-bc8d-dcf7-1f5934338c5c"],"children":["d6980dbb-2285-5132-55c8-91c1a5828b43"],"data":{"tag":"div","bgvideo":{"type":"wrapper","video_urls":["https://cdn.prod.website-files.com/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-transcode.webm","https://cdn.prod.website-files.com/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-transcode.mp4"],"poster_image_url":"https://cdn.prod.website-files.com/62210aa39c6f504f6d96bb26/62225ddcd5ae0c49af8e7034_production ID_4623748-poster-00001.jpg","original_filename":""},"attr":{"data-poster-url":"https://cdn.prod.website-files.com/62210aa39c6f504f6d96bb26/62225ddcd5ae0c49af8e7034_production ID_4623748-poster-00001.jpg","data-video-urls":"https://cdn.prod.website-files.com/62210aa39c6f504f6d96bb26/62225ddcd5ae0c49af8e7034_production ID_4623748-transcode.webm,https://cdn.prod.website-files.com/62210aa39c6f504f6d96bb26/62225ddcd5ae0c49af8e7034_production ID_4623748-transcode.mp4","data-autoplay":true,"data-loop":true,"data-wf-ignore":true,"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d6980dbb-2285-5132-55c8-91c1a5828b43","type":"Block","tag":"div","classes":["0b8abaff-ead8-ef98-dac0-9a0d1ef61a9e"],"children":["9f2db951-05a5-7838-6b16-8407bd661bbd"],"data":{"tag":"div","text":false,"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bbd","type":"FormWrapper","tag":"div","classes":[],"children":["9f2db951-05a5-7838-6b16-8407bd661bbe","9f2db951-05a5-7838-6b16-8407bd661bc6","9f2db951-05a5-7838-6b16-8407bd661bc9"],"data":{"form":{"type":"wrapper"},"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bbe","type":"FormForm","tag":"form","classes":[],"children":["d44217bf-2340-89d5-fbfe-d1bf6f4d8b04","1bc5992b-fada-3d28-05b3-d20a54b6b734","328d20f8-6815-3c20-ec2f-051ded4fc0f9","9f2db951-05a5-7838-6b16-8407bd661bc5"],"data":{"form":{"type":"form","name":"Email Form"},"attr":{"id":"email-form","name":"email-form","data-name":"Email Form","redirect":"#/ms/reset-password","data-redirect":"#/ms/reset-password","action":"","method":"get"},"xattr":[{"name":"data-ms-form","value":"login"}],"search":{"exclude":false},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"d44217bf-2340-89d5-fbfe-d1bf6f4d8b04","type":"Heading","tag":"h1","classes":["294f1de2-d6cd-bb75-7a9a-b15d676cf09c"],"children":["d44217bf-2340-89d5-fbfe-d1bf6f4d8b05","05ad4ba7-c036-c556-9ee1-af4c866a0f46"],"data":{"tag":"h1","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"d44217bf-2340-89d5-fbfe-d1bf6f4d8b05","text":true,"v":"Login"},{"_id":"05ad4ba7-c036-c556-9ee1-af4c866a0f46","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"1bc5992b-fada-3d28-05b3-d20a54b6b734","type":"Block","tag":"div","classes":["1b721393-1b62-01a3-8308-cdc45decb365"],"children":["9f2db951-05a5-7838-6b16-8407bd661bc4","9f2db951-05a5-7838-6b16-8407bd661bc2"],"data":{"text":false,"tag":"div","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc4","type":"FormTextInput","tag":"input","classes":["2ed05cab-25ad-e65a-b34f-b4038a90640c"],"children":[],"data":{"form":{"name":"Email","type":"input","passwordPage":false},"attr":{"autofocus":false,"maxlength":256,"name":"email","data-name":"Email","placeholder":"","type":"email","id":"email","disabled":false,"required":true},"xattr":[{"name":"data-ms-member","value":"email"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc2","type":"FormBlockLabel","tag":"label","classes":["3a7abb5d-454c-fc89-6fe6-3bc03ae9f623"],"children":["9f2db951-05a5-7838-6b16-8407bd661bc3"],"data":{"form":{"type":"label"},"attr":{"for":"email","id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc3","text":true,"v":"Email Address"},{"_id":"328d20f8-6815-3c20-ec2f-051ded4fc0f9","type":"Block","tag":"div","classes":["1b721393-1b62-01a3-8308-cdc45decb365"],"children":["328d20f8-6815-3c20-ec2f-051ded4fc0fa","328d20f8-6815-3c20-ec2f-051ded4fc0fb","b5a96a6d-2c57-dd1c-ab5c-ca68d0008454"],"data":{"search":{"exclude":false},"clearfix":true,"xattr":[],"text":false,"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"328d20f8-6815-3c20-ec2f-051ded4fc0fa","type":"FormTextInput","tag":"input","classes":["2ed05cab-25ad-e65a-b34f-b4038a90640c"],"children":[],"data":{"form":{"name":"Password","type":"input","passwordPage":false},"attr":{"autofocus":false,"maxlength":256,"name":"Password","data-name":"Password","placeholder":"","type":"password","id":"Password","disabled":false,"required":true},"xattr":[{"name":"minlength","value":"8"},{"name":"data-ms-member","value":"password"}],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"328d20f8-6815-3c20-ec2f-051ded4fc0fb","type":"FormBlockLabel","tag":"label","classes":["3a7abb5d-454c-fc89-6fe6-3bc03ae9f623"],"children":["328d20f8-6815-3c20-ec2f-051ded4fc0fc"],"data":{"form":{"type":"label"},"attr":{"for":"email-2","id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"328d20f8-6815-3c20-ec2f-051ded4fc0fc","text":true,"v":"Password"},{"_id":"b5a96a6d-2c57-dd1c-ab5c-ca68d0008454","type":"Link","tag":"a","classes":["9d043cda-7a69-a7dd-1e7b-fa03d8914abd"],"children":["b5a96a6d-2c57-dd1c-ab5c-ca68d0008455"],"data":{"search":{"exclude":false},"xattr":[],"block":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"b5a96a6d-2c57-dd1c-ab5c-ca68d0008455","text":true,"v":"Forgot Password"},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc5","type":"FormButton","tag":"input","classes":["10f35e59-c4fe-77aa-9de3-22212dee4290"],"children":[],"data":{"form":{"type":"button","wait":"Please wait..."},"attr":{"type":"submit","value":"Access My Account","data-wait":"Please wait...","id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc6","type":"FormSuccessMessage","tag":"div","classes":["4efd3e91-0a30-0ed0-8672-79e2e1c68d74"],"children":["9f2db951-05a5-7838-6b16-8407bd661bc7"],"data":{"form":{"type":"msg-done"},"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc7","type":"Block","tag":"div","classes":[],"children":["9f2db951-05a5-7838-6b16-8407bd661bc8"],"data":{"tag":"div","text":true,"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc8","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bc9","type":"FormErrorMessage","tag":"div","classes":["4efd3e91-0a30-0ed0-8672-79e2e1c68d74"],"children":["9f2db951-05a5-7838-6b16-8407bd661bca"],"data":{"form":{"type":"msg-fail"},"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bca","type":"Block","tag":"div","classes":[],"children":["9f2db951-05a5-7838-6b16-8407bd661bcb"],"data":{"tag":"div","text":true,"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"9f2db951-05a5-7838-6b16-8407bd661bcb","text":true,"v":"Oops! Something went wrong while submitting the form."},{"_id":"3da2bf26-d794-6ca6-3b20-83868248f861","type":"HtmlEmbed","tag":"div","classes":["36f14744-3a9c-ee2a-3a7f-8b3e804be68d"],"children":[],"v":"<!--👋 Add to the page footer-->\n<script>\nconst inputs = document.querySelectorAll('.form-control input');\nconst labels = document.querySelectorAll('.form-control label');\n\nlabels.forEach(label => {\n\tlabel.innerHTML = label.innerText\n\t\t.split('')\n\t\t.map((letter, idx) => `<span style=\"\n\t\t\t\ttransition-delay: ${idx * 50}ms\n\t\t\t\">${letter}</span>`)\n\t\t.join('');\n});\n</script>","data":{"embed":{"type":"html","meta":{"html":"<!--👋 Add to the page footer-->\n<script>\nconst inputs = document.querySelectorAll('.form-control input');\nconst labels = document.querySelectorAll('.form-control label');\n\nlabels.forEach(label => {\n\tlabel.innerHTML = label.innerText\n\t\t.split('')\n\t\t.map((letter, idx) => `<span style=\"\n\t\t\t\ttransition-delay: ${idx * 50}ms\n\t\t\t\">${letter}</span>`)\n\t\t.join('');\n});\n</script>","div":false,"iframe":false,"script":true,"compilable":false}},"insideRTE":false,"attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}}],"styles":[{"_id":"10f35e59-c4fe-77aa-9de3-22212dee4290","fake":false,"type":"class","name":"Submit Button","namespace":"","comb":"","styleLess":"width: 100%; margin-left: -2px; padding-top: 15px; padding-bottom: 15px; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(305.1724137931035, 27.36%, 41.57%, 1.00); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background-color: hsla(306, 37.50%, 47.06%, 1.00); box-shadow: 14px 14px 5px 0 hsla(227.6470588235294, 68.00%, 9.80%, 0.10); font-size: 1.15em;","variants":{},"children":[],"selector":null},{"_id":"9d043cda-7a69-a7dd-1e7b-fa03d8914abd","fake":false,"type":"class","name":"Forgot Password","namespace":"","comb":"","styleLess":"position: relative; margin-bottom: -20px; float: right; color: hsla(305.1724137931035, 27.36%, 41.57%, 1.00); text-decoration: none;","variants":{},"children":[],"selector":null},{"_id":"16a5e4a4-e998-6287-974e-daebbb9061d4","fake":false,"type":"class","name":"COPY ME","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"selector":null},{"_id":"2bbcaf6f-60dc-bc8d-dcf7-1f5934338c5c","fake":false,"type":"class","name":"Background Video","namespace":"","comb":"","styleLess":"position: relative; display: flex; min-height: 100vh; padding-top: 80px; padding-right: 30px; padding-bottom: 80px; padding-left: 30px; flex-direction: row; justify-content: center; align-items: center; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25),rgba(255, 255, 255, 0.25));","variants":{"tiny":{"styleLess":"display: block; min-height: 100vh; padding-top: 50px; padding-right: 18px; padding-bottom: 50px; padding-left: 18px;"}},"children":[],"selector":null},{"_id":"4efd3e91-0a30-0ed0-8672-79e2e1c68d74","fake":false,"type":"class","name":"hide","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"selector":null},{"_id":"1b721393-1b62-01a3-8308-cdc45decb365","fake":false,"type":"class","name":"Form Control","namespace":"","comb":"","styleLess":"position: relative; margin-top: 20px; margin-bottom: 50px;","variants":{},"children":[],"selector":null},{"_id":"294f1de2-d6cd-bb75-7a9a-b15d676cf09c","fake":false,"type":"class","name":"Asset Name","namespace":"","comb":"","styleLess":"margin-top: 0px; margin-bottom: 65px; color: hsla(0, 1.59%, 27.56%, 1.00); font-size: 30px; line-height: 38px; font-weight: 400;","variants":{},"children":[],"selector":null},{"_id":"0b8abaff-ead8-ef98-dac0-9a0d1ef61a9e","fake":false,"type":"class","name":"Form Wrap","namespace":"","comb":"","styleLess":"width: 100%; max-width: 400px; margin-right: auto; margin-left: auto; padding-top: 60px; padding-right: 60px; padding-bottom: 38px; padding-left: 60px; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; background-color: hsla(0, 0.00%, 100.00%, 0.90); box-shadow: 21px 21px 10px 0 rgba(8, 15, 42, 0.15);","variants":{},"children":[],"selector":null},{"_id":"36f14744-3a9c-ee2a-3a7f-8b3e804be68d","fake":false,"type":"class","name":"Hide onLoad","namespace":"","comb":"","styleLess":"padding-top: 18px; padding-bottom: 21px; text-align: center;","variants":{},"children":[],"selector":null},{"_id":"2ed05cab-25ad-e65a-b34f-b4038a90640c","fake":false,"type":"class","name":"Text Field","namespace":"","comb":"","styleLess":"position: relative; z-index: 2; display: block; width: 100%; margin-bottom: 10px; padding-top: 15px; padding-bottom: 15px; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: hsla(0, 0.00%, 0.00%, 0.30); border-left-style: none; background-color: transparent; transition-property: border-color; transition-duration: 100ms; transition-timing-function: ease; font-size: 18px;","variants":{"main_focus":{"styleLess":"border-bottom-color: hsla(306, 37.50%, 47.06%, 1.00);"}},"children":[],"selector":null},{"_id":"3a7abb5d-454c-fc89-6fe6-3bc03ae9f623","fake":false,"type":"class","name":"Field Label","namespace":"","comb":"","styleLess":"position: absolute; left: 0px; top: 0px; z-index: 1; margin-bottom: 0px; font-family: Montserrat; color: hsla(0, 0.00%, 24.67%, 1.00); font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: 0.6px;","variants":{},"children":[],"selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748.mp4","siteId":"632b15d83872924ac2b5a4be","width":0,"isHD":false,"height":0,"fileName":"632b15d9387292f0c3b5a4de_production ID_4623748.mp4","createdOn":"2022-03-04T18:43:40.730Z","origFileName":"production ID_4623748.mp4","fileHash":"b69c863b1ac7e39ebf67e0edd22252b6","variants":[{"_id":"62225debe9c5fa0e3a560a20","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-poster-00001.jpg","fileName":"632b15d9387292f0c3b5a4de_production ID_4623748-poster-00001.jpg","origFileName":"production ID_4623748-poster-00001.jpg","format":"jpg","cdnUrl":"https://cdn.prod.website-files.com/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-poster-00001.jpg"},{"_id":"62225debe9c5fa7cac560a21","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-transcode.webm","fileName":"632b15d9387292f0c3b5a4de_production ID_4623748-transcode.webm","origFileName":"production ID_4623748-transcode.webm","format":"webm","cdnUrl":"https://cdn.prod.website-files.com/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-transcode.webm"},{"_id":"62225debe9c5fac4b1560a22","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-transcode.mp4","fileName":"632b15d9387292f0c3b5a4de_production ID_4623748-transcode.mp4","origFileName":"production ID_4623748-transcode.mp4","format":"mp4","cdnUrl":"https://cdn.prod.website-files.com/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748-transcode.mp4"}],"mimeType":"video/mp4","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/632b15d83872924ac2b5a4be/632b15d9387292f0c3b5a4de_production%20ID_4623748.mp4","thumbUrl":"https://cdn.prod.website-files.com/62210aa39c6f504f6d96bb26/62225ddcd5ae0c49af8e7034_production ID_4623748-poster-00001.jpg","_id":"632b15d9387292f0c3b5a4de","updatedOn":"2022-09-21T13:47:06.062Z","fileSize":6984718}],"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)
This component features an animated label for a membership login form, enhancing user interaction with stylish visual effects.
Caractéristiques principales :
- Animated label that moves upon input focus
- Responsive design suitable for various screen sizes
- Includes email and password input fields with validation
- Success and error messages for form submission feedback
Éléments de conception :
- Modern and clean layout
- Soft color palette with contrasting text colors
- Smooth transitions and animations for labels
Cas d'utilisation potentiels :
- Membership-based websites
- E-commerce platforms requiring user login
- Online learning portals with user accounts
- Community forums and social networks
- Subscription services needing secure access
Conclusion: The Membership Login Label Animation component is a versatile and visually appealing solution for any website requiring user authentication, making it an excellent choice for enhancing user experience.
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.