Loading Component...
Loading
Thank you! I'll update
this project ASAP.
this project ASAP.
Oops! Something went wrong while submitting the form.
How to enable Google authentication
How to enable Facebook authentication
How to enable Spotify authentication
How to enable Dribbble authentication
How to enable Github authentication
How to enable LinkedIn authentication
How to enable passwordless logins
How to configure password validation
How to show/hide password
How to work with profile images
How to add a forgot password flow
How to work with checkboxes
How to configure pricing tables
About the Stripe Customer Portal
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"1bcf8306-6d64-2c9f-e25f-1580c9a5bedb","type":"BlockContainer","tag":"div","classes":["7a26b071-a23a-92d3-f95f-46eea0221def"],"children":["5e833a08-23bb-d93b-531c-a9f928a07429"],"data":{"grid":{"type":"container"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07429","type":"FormWrapper","tag":"div","classes":["f85c6b28-5c3c-c2ad-bec1-1faaede44b0a"],"children":["5e833a08-23bb-d93b-531c-a9f928a0742a","5e833a08-23bb-d93b-531c-a9f928a07432","5e833a08-23bb-d93b-531c-a9f928a07435"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a0742a","type":"FormForm","tag":"form","classes":["1a7522ff-abfd-7b7f-b1d1-497501337616"],"children":["6a7e6ad7-a485-4684-974c-d6da560ba9a2","85c41965-080c-764f-0462-3cacdd9ebdf9","aa46d00a-f1d4-90ff-bbd9-fd5234bcd480","7f63a716-144b-2711-6863-1ee952afebb3","3af56c33-6c75-ba80-2e64-3d773c1c5cef"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[{"name":"data-ms-form","value":"signup"}],"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":"6a7e6ad7-a485-4684-974c-d6da560ba9a2","type":"Block","tag":"div","classes":["889de99b-8255-800a-65be-b8801cb67189"],"children":["5e833a08-23bb-d93b-531c-a9f928a0742b","5e833a08-23bb-d93b-531c-a9f928a0742d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a0742b","type":"FormBlockLabel","tag":"label","classes":["bc2a663d-62e6-8b01-7cdf-1124bf1441bb"],"children":["5e833a08-23bb-d93b-531c-a9f928a0742c"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"name","id":""},"visibility":{"conditions":[]}}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a0742c","text":true,"v":"Name"},{"_id":"5e833a08-23bb-d93b-531c-a9f928a0742d","type":"FormTextInput","tag":"input","classes":["7b1153d3-5b0c-cf62-8186-ba0583e0b2dd"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"name","data-name":"Name","placeholder":"John Doe","type":"text","id":"name","disabled":false,"required":false},"form":{"type":"input","name":"Name","passwordPage":false},"xattr":[{"name":"data-ms-member","value":"name"}],"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"85c41965-080c-764f-0462-3cacdd9ebdf9","type":"Block","tag":"div","classes":["889de99b-8255-800a-65be-b8801cb67189","9b837a18-2d91-cf48-c661-0a8b065fb72b"],"children":["85c41965-080c-764f-0462-3cacdd9ebdfa","85c41965-080c-764f-0462-3cacdd9ebdfc"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"85c41965-080c-764f-0462-3cacdd9ebdfa","type":"FormBlockLabel","tag":"label","classes":["bc2a663d-62e6-8b01-7cdf-1124bf1441bb","2eadd405-790f-17d5-3474-6c8a53b5c011"],"children":["85c41965-080c-764f-0462-3cacdd9ebdfb"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Phone","id":""},"visibility":{"conditions":[]}}},{"_id":"85c41965-080c-764f-0462-3cacdd9ebdfb","text":true,"v":"Phone number"},{"_id":"85c41965-080c-764f-0462-3cacdd9ebdfc","type":"FormTextInput","tag":"input","classes":["7b1153d3-5b0c-cf62-8186-ba0583e0b2dd","f5b7de11-4e25-2c14-e5e5-86d3143b4914"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Phone","data-name":"Phone","placeholder":"","type":"text","id":"Phone","disabled":false,"required":false},"xattr":[{"name":"ms-code-phone-number","value":"us,ca,gb"},{"name":"data-ms-member","value":"phone-number"}],"form":{"name":"Phone","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"aa46d00a-f1d4-90ff-bbd9-fd5234bcd480","type":"Block","tag":"div","classes":["889de99b-8255-800a-65be-b8801cb67189"],"children":["aa46d00a-f1d4-90ff-bbd9-fd5234bcd481","aa46d00a-f1d4-90ff-bbd9-fd5234bcd483"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"aa46d00a-f1d4-90ff-bbd9-fd5234bcd481","type":"FormBlockLabel","tag":"label","classes":["bc2a663d-62e6-8b01-7cdf-1124bf1441bb"],"children":["aa46d00a-f1d4-90ff-bbd9-fd5234bcd482"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Email","id":""},"visibility":{"conditions":[]}}},{"_id":"aa46d00a-f1d4-90ff-bbd9-fd5234bcd482","text":true,"v":"Email"},{"_id":"aa46d00a-f1d4-90ff-bbd9-fd5234bcd483","type":"FormTextInput","tag":"input","classes":["7b1153d3-5b0c-cf62-8186-ba0583e0b2dd"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Email","data-name":"Email","placeholder":"johndoe@gmail.com","type":"email","id":"Email","disabled":false,"required":false},"xattr":[{"name":"data-ms-member","value":"email"}],"form":{"name":"Email","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"7f63a716-144b-2711-6863-1ee952afebb3","type":"Block","tag":"div","classes":["889de99b-8255-800a-65be-b8801cb67189"],"children":["7f63a716-144b-2711-6863-1ee952afebb4","7f63a716-144b-2711-6863-1ee952afebb6"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"7f63a716-144b-2711-6863-1ee952afebb4","type":"FormBlockLabel","tag":"label","classes":["bc2a663d-62e6-8b01-7cdf-1124bf1441bb"],"children":["7f63a716-144b-2711-6863-1ee952afebb5"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Password","id":""},"visibility":{"conditions":[]}}},{"_id":"7f63a716-144b-2711-6863-1ee952afebb5","text":true,"v":"Password"},{"_id":"7f63a716-144b-2711-6863-1ee952afebb6","type":"FormTextInput","tag":"input","classes":["7b1153d3-5b0c-cf62-8186-ba0583e0b2dd"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Password","data-name":"Password","placeholder":"*************","type":"password","id":"Password","disabled":false,"required":false},"xattr":[{"name":"data-ms-member","value":"password"}],"form":{"name":"Password","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"3af56c33-6c75-ba80-2e64-3d773c1c5cef","type":"Block","tag":"div","classes":["bd944f3e-93a4-951a-ad5e-938effbcc757"],"children":["3af56c33-6c75-ba80-2e64-3d773c1c5cf0","3af56c33-6c75-ba80-2e64-3d773c1c5cf1"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"3af56c33-6c75-ba80-2e64-3d773c1c5cf0","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<style>\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n.border-gradient{\nanimation: spin 6s linear infinite;\nbackground:conic-gradient(from 0 at 50% 50%,rgba(255,255,255,.2) 0deg,rgba(255,255,255,0) 60deg,rgba(255,255,255,0) 310deg,rgba(255,255,255,.5) 360deg);\n}\n\n\n\n.main-button-n:hover .border-gradient {\n animation-duration: 6s;\n animation-play-state: running;\n}\n\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<style>\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n.border-gradient{\nanimation: spin 6s linear infinite;\nbackground:conic-gradient(from 0 at 50% 50%,rgba(255,255,255,.2) 0deg,rgba(255,255,255,0) 60deg,rgba(255,255,255,0) 310deg,rgba(255,255,255,.5) 360deg);\n}\n\n\n\n.main-button-n:hover .border-gradient {\n animation-duration: 6s;\n animation-play-state: running;\n}\n\n</style>","div":false,"iframe":false,"script":false,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"3af56c33-6c75-ba80-2e64-3d773c1c5cf1","type":"Block","tag":"div","classes":["c9c333f4-d3b5-d614-5b41-aa0dd04b00a3"],"children":["3af56c33-6c75-ba80-2e64-3d773c1c5cf2","3af56c33-6c75-ba80-2e64-3d773c1c5cf5"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"3af56c33-6c75-ba80-2e64-3d773c1c5cf2","type":"Block","tag":"div","classes":["c9c333f4-d3b5-d614-5b41-aa0dd04b00a4"],"children":["e6021747-3d0b-8b61-16b5-8ff6b9a60248"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e6021747-3d0b-8b61-16b5-8ff6b9a60248","type":"FormButton","tag":"input","classes":["c9c333f4-d3b5-d614-5b41-aa0dd04b00a5"],"children":[],"data":{"attr":{"type":"submit","value":"Sign up now","data-wait":"Please wait...","id":""},"form":{"type":"button"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"3af56c33-6c75-ba80-2e64-3d773c1c5cf5","type":"Block","tag":"div","classes":["c9c333f4-d3b5-d614-5b41-aa0dd04b00a6"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07432","type":"FormSuccessMessage","tag":"div","classes":[],"children":["5e833a08-23bb-d93b-531c-a9f928a07433"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07433","type":"Block","tag":"div","classes":[],"children":["5e833a08-23bb-d93b-531c-a9f928a07434"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07434","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07435","type":"FormErrorMessage","tag":"div","classes":[],"children":["5e833a08-23bb-d93b-531c-a9f928a07436"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07436","type":"Block","tag":"div","classes":[],"children":["5e833a08-23bb-d93b-531c-a9f928a07437"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07437","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"c9c333f4-d3b5-d614-5b41-aa0dd04b00a6","fake":false,"type":"class","name":"border-gradient","namespace":"","comb":"","styleLess":"position: absolute; width: 100%; min-height: 550px; grid-auto-columns: 1fr; grid-column-gap: 16px; grid-row-gap: 16px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; transform: rotate(-55deg);","variants":{},"children":[],"createdBy":"604b18039b859d11f9f5f808","selector":null},{"_id":"bd944f3e-93a4-951a-ad5e-938effbcc757","fake":false,"type":"class","name":"button-wrap","namespace":"","comb":"","styleLess":"margin-top: 20px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"c9c333f4-d3b5-d614-5b41-aa0dd04b00a4","fake":false,"type":"class","name":"button-bg","namespace":"","comb":"","styleLess":"position: relative; z-index: 1; width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: #151515; opacity: 1; text-align: center;","variants":{},"children":[],"createdBy":"5e527d932c16e8928a10abea","selector":null},{"_id":"c9c333f4-d3b5-d614-5b41-aa0dd04b00a3","fake":false,"type":"class","name":"main-button-n","namespace":"","comb":"","styleLess":"position: relative; display: flex; overflow: hidden; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px; flex-direction: column; justify-content: center; align-items: center; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0 0 50px 0 hsla(313.3333333333333, 51.83%, 37.45%, 0.60); transition-property: all; transition-duration: 400ms; transition-timing-function: ease; text-decoration: none;","variants":{"main_hover":{"styleLess":"box-shadow: 0 0 80px 0 hsla(313.3333333333333, 51.83%, 37.45%, 1.00);"}},"children":[],"createdBy":"604b18039b859d11f9f5f808","selector":null},{"_id":"2eadd405-790f-17d5-3474-6c8a53b5c011","fake":false,"type":"class","name":"for-phone","namespace":"","comb":"&","styleLess":"padding-left: 70px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"c9c333f4-d3b5-d614-5b41-aa0dd04b00a5","fake":false,"type":"class","name":"button-inside","namespace":"","comb":"","styleLess":"position: static; left: 1%; top: 1%; right: 1%; bottom: 1%; z-index: 2; display: flex; width: 100%; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; justify-content: center; align-items: center; background-color: hsla(0, 0.00%, 8.24%, 1.00); background-image: linear-gradient(to right, hsla(0, 0.00%, 100.00%, 0.70), hsla(0, 0.00%, 100.00%, 1.00)); opacity: 1; font-size: 1.2rem; font-weight: 400; text-align: center; white-space: nowrap; background-clip: text;","variants":{},"children":[],"createdBy":"604b18039b859d11f9f5f808","selector":null},{"_id":"7a26b071-a23a-92d3-f95f-46eea0221def","fake":false,"type":"class","name":"conatiner","namespace":"","comb":"","styleLess":"width: 100%; max-width: 400px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"bc2a663d-62e6-8b01-7cdf-1124bf1441bb","fake":false,"type":"class","name":"label","namespace":"","comb":"","styleLess":"position: relative; z-index: 1; margin-bottom: -30px; padding-top: 12px; padding-left: 20px; color: hsla(0, 0.00%, 84.00%, 1.00); font-size: 13px; font-weight: 400;","variants":{},"children":["2eadd405-790f-17d5-3474-6c8a53b5c011"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"889de99b-8255-800a-65be-b8801cb67189","fake":false,"type":"class","name":"input-wrap","namespace":"","comb":"","styleLess":"position: relative; z-index: 1; height: 70px;","variants":{},"children":["9b837a18-2d91-cf48-c661-0a8b065fb72b"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"7b1153d3-5b0c-cf62-8186-ba0583e0b2dd","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"position: relative; left: 0%; top: 0%; right: 0%; bottom: 0%; width: 100%; height: 100%; margin-bottom: 0px; padding-top: 35px; padding-right: 20px; padding-bottom: 12px; padding-left: 20px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 18.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 18.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 18.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 18.00%, 1.00); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: hsla(235, 0.00%, 10.00%, 1.00); color: hsla(0, 0.00%, 100.00%, 1.00);","variants":{"main_focus-visible":{"styleLess":"border-top-color: hsla(0, 0.00%, 33.33%, 1.00); border-right-color: hsla(0, 0.00%, 33.33%, 1.00); border-bottom-color: hsla(0, 0.00%, 33.33%, 1.00); border-left-color: hsla(0, 0.00%, 33.33%, 1.00); background-color: hsla(235, 0.00%, 19.33%, 1.00);"}},"children":["f5b7de11-4e25-2c14-e5e5-86d3143b4914"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"1a7522ff-abfd-7b7f-b1d1-497501337616","fake":false,"type":"class","name":"form","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; grid-auto-columns: 1fr; grid-column-gap: 15px; grid-row-gap: 15px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"f5b7de11-4e25-2c14-e5e5-86d3143b4914","fake":false,"type":"class","name":"phone","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"9b837a18-2d91-cf48-c661-0a8b065fb72b","fake":false,"type":"class","name":"for-phone","namespace":"","comb":"&","styleLess":"z-index: 3;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"f85c6b28-5c3c-c2ad-bec1-1faaede44b0a","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"1bcf8306-6d64-2c9f-e25f-1580c9a5bedb","type":"BlockContainer","tag":"div","classes":["7a26b071-a23a-92d3-f95f-46eea0221def"],"children":["5e833a08-23bb-d93b-531c-a9f928a07429"],"data":{"grid":{"type":"container"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07429","type":"FormWrapper","tag":"div","classes":["f85c6b28-5c3c-c2ad-bec1-1faaede44b0a"],"children":["5e833a08-23bb-d93b-531c-a9f928a0742a","5e833a08-23bb-d93b-531c-a9f928a07432","5e833a08-23bb-d93b-531c-a9f928a07435"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a0742a","type":"FormForm","tag":"form","classes":["1a7522ff-abfd-7b7f-b1d1-497501337616"],"children":["6a7e6ad7-a485-4684-974c-d6da560ba9a2","85c41965-080c-764f-0462-3cacdd9ebdf9","aa46d00a-f1d4-90ff-bbd9-fd5234bcd480","7f63a716-144b-2711-6863-1ee952afebb3","3af56c33-6c75-ba80-2e64-3d773c1c5cef"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[{"name":"data-ms-form","value":"signup"}],"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":"6a7e6ad7-a485-4684-974c-d6da560ba9a2","type":"Block","tag":"div","classes":["889de99b-8255-800a-65be-b8801cb67189"],"children":["5e833a08-23bb-d93b-531c-a9f928a0742b","5e833a08-23bb-d93b-531c-a9f928a0742d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a0742b","type":"FormBlockLabel","tag":"label","classes":["bc2a663d-62e6-8b01-7cdf-1124bf1441bb"],"children":["5e833a08-23bb-d93b-531c-a9f928a0742c"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"name","id":""},"visibility":{"conditions":[]}}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a0742c","text":true,"v":"Name"},{"_id":"5e833a08-23bb-d93b-531c-a9f928a0742d","type":"FormTextInput","tag":"input","classes":["7b1153d3-5b0c-cf62-8186-ba0583e0b2dd"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"name","data-name":"Name","placeholder":"John Doe","type":"text","id":"name","disabled":false,"required":false},"form":{"type":"input","name":"Name","passwordPage":false},"xattr":[{"name":"data-ms-member","value":"name"}],"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"85c41965-080c-764f-0462-3cacdd9ebdf9","type":"Block","tag":"div","classes":["889de99b-8255-800a-65be-b8801cb67189","9b837a18-2d91-cf48-c661-0a8b065fb72b"],"children":["85c41965-080c-764f-0462-3cacdd9ebdfa","85c41965-080c-764f-0462-3cacdd9ebdfc"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"85c41965-080c-764f-0462-3cacdd9ebdfa","type":"FormBlockLabel","tag":"label","classes":["bc2a663d-62e6-8b01-7cdf-1124bf1441bb","2eadd405-790f-17d5-3474-6c8a53b5c011"],"children":["85c41965-080c-764f-0462-3cacdd9ebdfb"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Phone","id":""},"visibility":{"conditions":[]}}},{"_id":"85c41965-080c-764f-0462-3cacdd9ebdfb","text":true,"v":"Phone number"},{"_id":"85c41965-080c-764f-0462-3cacdd9ebdfc","type":"FormTextInput","tag":"input","classes":["7b1153d3-5b0c-cf62-8186-ba0583e0b2dd","f5b7de11-4e25-2c14-e5e5-86d3143b4914"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Phone","data-name":"Phone","placeholder":"","type":"text","id":"Phone","disabled":false,"required":false},"xattr":[{"name":"ms-code-phone-number","value":"us,ca,gb"},{"name":"data-ms-member","value":"phone-number"}],"form":{"name":"Phone","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"aa46d00a-f1d4-90ff-bbd9-fd5234bcd480","type":"Block","tag":"div","classes":["889de99b-8255-800a-65be-b8801cb67189"],"children":["aa46d00a-f1d4-90ff-bbd9-fd5234bcd481","aa46d00a-f1d4-90ff-bbd9-fd5234bcd483"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"aa46d00a-f1d4-90ff-bbd9-fd5234bcd481","type":"FormBlockLabel","tag":"label","classes":["bc2a663d-62e6-8b01-7cdf-1124bf1441bb"],"children":["aa46d00a-f1d4-90ff-bbd9-fd5234bcd482"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Email","id":""},"visibility":{"conditions":[]}}},{"_id":"aa46d00a-f1d4-90ff-bbd9-fd5234bcd482","text":true,"v":"Email"},{"_id":"aa46d00a-f1d4-90ff-bbd9-fd5234bcd483","type":"FormTextInput","tag":"input","classes":["7b1153d3-5b0c-cf62-8186-ba0583e0b2dd"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Email","data-name":"Email","placeholder":"johndoe@gmail.com","type":"email","id":"Email","disabled":false,"required":false},"xattr":[{"name":"data-ms-member","value":"email"}],"form":{"name":"Email","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"7f63a716-144b-2711-6863-1ee952afebb3","type":"Block","tag":"div","classes":["889de99b-8255-800a-65be-b8801cb67189"],"children":["7f63a716-144b-2711-6863-1ee952afebb4","7f63a716-144b-2711-6863-1ee952afebb6"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"7f63a716-144b-2711-6863-1ee952afebb4","type":"FormBlockLabel","tag":"label","classes":["bc2a663d-62e6-8b01-7cdf-1124bf1441bb"],"children":["7f63a716-144b-2711-6863-1ee952afebb5"],"data":{"form":{"type":"label","passwordPage":false},"search":{"exclude":false},"users":"","xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"for":"Password","id":""},"visibility":{"conditions":[]}}},{"_id":"7f63a716-144b-2711-6863-1ee952afebb5","text":true,"v":"Password"},{"_id":"7f63a716-144b-2711-6863-1ee952afebb6","type":"FormTextInput","tag":"input","classes":["7b1153d3-5b0c-cf62-8186-ba0583e0b2dd"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Password","data-name":"Password","placeholder":"*************","type":"password","id":"Password","disabled":false,"required":false},"xattr":[{"name":"data-ms-member","value":"password"}],"form":{"name":"Password","type":"input","passwordPage":false},"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"3af56c33-6c75-ba80-2e64-3d773c1c5cef","type":"Block","tag":"div","classes":["bd944f3e-93a4-951a-ad5e-938effbcc757"],"children":["3af56c33-6c75-ba80-2e64-3d773c1c5cf0","3af56c33-6c75-ba80-2e64-3d773c1c5cf1"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"3af56c33-6c75-ba80-2e64-3d773c1c5cf0","type":"HtmlEmbed","tag":"div","classes":[],"children":[],"v":"<style>\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n.border-gradient{\nanimation: spin 6s linear infinite;\nbackground:conic-gradient(from 0 at 50% 50%,rgba(255,255,255,.2) 0deg,rgba(255,255,255,0) 60deg,rgba(255,255,255,0) 310deg,rgba(255,255,255,.5) 360deg);\n}\n\n\n\n.main-button-n:hover .border-gradient {\n animation-duration: 6s;\n animation-play-state: running;\n}\n\n</style>","data":{"insideRTE":false,"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<style>\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n\n.border-gradient{\nanimation: spin 6s linear infinite;\nbackground:conic-gradient(from 0 at 50% 50%,rgba(255,255,255,.2) 0deg,rgba(255,255,255,0) 60deg,rgba(255,255,255,0) 310deg,rgba(255,255,255,.5) 360deg);\n}\n\n\n\n.main-button-n:hover .border-gradient {\n animation-duration: 6s;\n animation-play-state: running;\n}\n\n</style>","div":false,"iframe":false,"script":false,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"3af56c33-6c75-ba80-2e64-3d773c1c5cf1","type":"Block","tag":"div","classes":["c9c333f4-d3b5-d614-5b41-aa0dd04b00a3"],"children":["3af56c33-6c75-ba80-2e64-3d773c1c5cf2","3af56c33-6c75-ba80-2e64-3d773c1c5cf5"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"3af56c33-6c75-ba80-2e64-3d773c1c5cf2","type":"Block","tag":"div","classes":["c9c333f4-d3b5-d614-5b41-aa0dd04b00a4"],"children":["e6021747-3d0b-8b61-16b5-8ff6b9a60248"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e6021747-3d0b-8b61-16b5-8ff6b9a60248","type":"FormButton","tag":"input","classes":["c9c333f4-d3b5-d614-5b41-aa0dd04b00a5"],"children":[],"data":{"attr":{"type":"submit","value":"Sign up now","data-wait":"Please wait...","id":""},"form":{"type":"button"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"3af56c33-6c75-ba80-2e64-3d773c1c5cf5","type":"Block","tag":"div","classes":["c9c333f4-d3b5-d614-5b41-aa0dd04b00a6"],"children":[],"data":{"text":false,"tag":"div","displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07432","type":"FormSuccessMessage","tag":"div","classes":[],"children":["5e833a08-23bb-d93b-531c-a9f928a07433"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07433","type":"Block","tag":"div","classes":[],"children":["5e833a08-23bb-d93b-531c-a9f928a07434"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07434","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07435","type":"FormErrorMessage","tag":"div","classes":[],"children":["5e833a08-23bb-d93b-531c-a9f928a07436"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07436","type":"Block","tag":"div","classes":[],"children":["5e833a08-23bb-d93b-531c-a9f928a07437"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"5e833a08-23bb-d93b-531c-a9f928a07437","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"c9c333f4-d3b5-d614-5b41-aa0dd04b00a6","fake":false,"type":"class","name":"border-gradient","namespace":"","comb":"","styleLess":"position: absolute; width: 100%; min-height: 550px; grid-auto-columns: 1fr; grid-column-gap: 16px; grid-row-gap: 16px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; transform: rotate(-55deg);","variants":{},"children":[],"createdBy":"604b18039b859d11f9f5f808","selector":null},{"_id":"bd944f3e-93a4-951a-ad5e-938effbcc757","fake":false,"type":"class","name":"button-wrap","namespace":"","comb":"","styleLess":"margin-top: 20px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"c9c333f4-d3b5-d614-5b41-aa0dd04b00a4","fake":false,"type":"class","name":"button-bg","namespace":"","comb":"","styleLess":"position: relative; z-index: 1; width: 100%; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: #151515; opacity: 1; text-align: center;","variants":{},"children":[],"createdBy":"5e527d932c16e8928a10abea","selector":null},{"_id":"c9c333f4-d3b5-d614-5b41-aa0dd04b00a3","fake":false,"type":"class","name":"main-button-n","namespace":"","comb":"","styleLess":"position: relative; display: flex; overflow: hidden; padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px; flex-direction: column; justify-content: center; align-items: center; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; box-shadow: 0 0 50px 0 hsla(313.3333333333333, 51.83%, 37.45%, 0.60); transition-property: all; transition-duration: 400ms; transition-timing-function: ease; text-decoration: none;","variants":{"main_hover":{"styleLess":"box-shadow: 0 0 80px 0 hsla(313.3333333333333, 51.83%, 37.45%, 1.00);"}},"children":[],"createdBy":"604b18039b859d11f9f5f808","selector":null},{"_id":"2eadd405-790f-17d5-3474-6c8a53b5c011","fake":false,"type":"class","name":"for-phone","namespace":"","comb":"&","styleLess":"padding-left: 70px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"c9c333f4-d3b5-d614-5b41-aa0dd04b00a5","fake":false,"type":"class","name":"button-inside","namespace":"","comb":"","styleLess":"position: static; left: 1%; top: 1%; right: 1%; bottom: 1%; z-index: 2; display: flex; width: 100%; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; justify-content: center; align-items: center; background-color: hsla(0, 0.00%, 8.24%, 1.00); background-image: linear-gradient(to right, hsla(0, 0.00%, 100.00%, 0.70), hsla(0, 0.00%, 100.00%, 1.00)); opacity: 1; font-size: 1.2rem; font-weight: 400; text-align: center; white-space: nowrap; background-clip: text;","variants":{},"children":[],"createdBy":"604b18039b859d11f9f5f808","selector":null},{"_id":"7a26b071-a23a-92d3-f95f-46eea0221def","fake":false,"type":"class","name":"conatiner","namespace":"","comb":"","styleLess":"width: 100%; max-width: 400px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"bc2a663d-62e6-8b01-7cdf-1124bf1441bb","fake":false,"type":"class","name":"label","namespace":"","comb":"","styleLess":"position: relative; z-index: 1; margin-bottom: -30px; padding-top: 12px; padding-left: 20px; color: hsla(0, 0.00%, 84.00%, 1.00); font-size: 13px; font-weight: 400;","variants":{},"children":["2eadd405-790f-17d5-3474-6c8a53b5c011"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"889de99b-8255-800a-65be-b8801cb67189","fake":false,"type":"class","name":"input-wrap","namespace":"","comb":"","styleLess":"position: relative; z-index: 1; height: 70px;","variants":{},"children":["9b837a18-2d91-cf48-c661-0a8b065fb72b"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"7b1153d3-5b0c-cf62-8186-ba0583e0b2dd","fake":false,"type":"class","name":"input","namespace":"","comb":"","styleLess":"position: relative; left: 0%; top: 0%; right: 0%; bottom: 0%; width: 100%; height: 100%; margin-bottom: 0px; padding-top: 35px; padding-right: 20px; padding-bottom: 12px; padding-left: 20px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 18.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 18.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 18.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 18.00%, 1.00); border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-color: hsla(235, 0.00%, 10.00%, 1.00); color: hsla(0, 0.00%, 100.00%, 1.00);","variants":{"main_focus-visible":{"styleLess":"border-top-color: hsla(0, 0.00%, 33.33%, 1.00); border-right-color: hsla(0, 0.00%, 33.33%, 1.00); border-bottom-color: hsla(0, 0.00%, 33.33%, 1.00); border-left-color: hsla(0, 0.00%, 33.33%, 1.00); background-color: hsla(235, 0.00%, 19.33%, 1.00);"}},"children":["f5b7de11-4e25-2c14-e5e5-86d3143b4914"],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"1a7522ff-abfd-7b7f-b1d1-497501337616","fake":false,"type":"class","name":"form","namespace":"","comb":"","styleLess":"display: flex; flex-direction: column; grid-auto-columns: 1fr; grid-column-gap: 15px; grid-row-gap: 15px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"f5b7de11-4e25-2c14-e5e5-86d3143b4914","fake":false,"type":"class","name":"phone","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"9b837a18-2d91-cf48-c661-0a8b065fb72b","fake":false,"type":"class","name":"for-phone","namespace":"","comb":"&","styleLess":"z-index: 3;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"f85c6b28-5c3c-c2ad-bec1-1faaede44b0a","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"margin-bottom: 0px;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser not supported. Use
Chrome or Safari.
Chrome or Safari.
About this component
AI Generated
Component Description (Generated by AI)
The Dark Mode Sign Up Form is a stylish and modern form designed for user registration, featuring a sleek dark theme that enhances user experience and engagement.
Key Features:
- Responsive design suitable for various devices
- Includes fields for name, phone number, email, and password
- Success and error messages for user feedback
- Customizable styles with CSS animations
- Easy integration with Webflow CMS
Design Elements:
- Dark color scheme with contrasting text for readability
- Rounded input fields and buttons for a modern look
- Animated gradient background for visual appeal
- Clear labels for each input field
Potential Use Cases:
- Web applications requiring user registration
- E-commerce sites looking to enhance user sign-up experience
- Blogs or content platforms needing newsletter sign-ups
- Mobile apps that require user authentication
- Event registration pages for conferences or webinars
Conclusion: The Dark Mode Sign Up Form is a versatile and visually appealing component that can enhance user engagement across various platforms, making it an excellent choice for modern web applications.
Start building
Start building your dreams
Memberstack is 100% free until you're ready to launch - so, what are you waiting for? Create your first app and start building today.