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":"ffcdb7e6-11c7-e942-87aa-a8ce50f216ed","type":"Block","tag":"div","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ad5"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216ee"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216ee","type":"Block","tag":"div","classes":["a923ca5a-98d9-3854-5e3e-810ce7479acf"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216ef","ffcdb7e6-11c7-e942-87aa-a8ce50f216f1"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216ef","type":"Link","tag":"a","classes":["a923ca5a-98d9-3854-5e3e-810ce7479aca"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216f0"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f0","type":"Image","tag":"img","classes":[],"children":[],"data":{"img":{"id":"64831a029b9fe070616e3c0a"},"attr":{"src":"https://cdn.prod.website-files.com/64831a029b9fe070616e3b70/64831a029b9fe070616e3c0a_Createq-logo.svg","loading":"lazy","width":"auto","height":"auto"}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f1","type":"FormWrapper","tag":"div","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ace"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216f2","ffcdb7e6-11c7-e942-87aa-a8ce50f21709","ffcdb7e6-11c7-e942-87aa-a8ce50f2170c"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f2","type":"FormForm","tag":"form","classes":["a923ca5a-98d9-3854-5e3e-810ce7479acc"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216f3","ffcdb7e6-11c7-e942-87aa-a8ce50f216f8","ffcdb7e6-11c7-e942-87aa-a8ce50f216f9","ffcdb7e6-11c7-e942-87aa-a8ce50f216fa"],"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":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f3","type":"Block","tag":"div","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ada","a923ca5a-98d9-3854-5e3e-810ce7479add"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216f4","ffcdb7e6-11c7-e942-87aa-a8ce50f216f6"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f4","type":"Paragraph","tag":"p","classes":["52405b25-0d7a-1a7e-bec7-81ae66f4aaa4"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216f5"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f5","text":true,"v":"Welcome back."},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f6","type":"Paragraph","tag":"p","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ad6"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216f7"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f7","text":true,"v":"Sign in with your credentials below. This is actually a signup form, but for demo purposes it is creating a new account."},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f8","type":"FormTextInput","tag":"input","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ad9"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Email","data-name":"Email","placeholder":"Email","type":"email","id":"Email-2","disabled":false,"required":false},"form":{"name":"Email","type":"input","passwordPage":false},"xattr":[{"name":"data-ms-member","value":"email"}]}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f9","type":"FormTextInput","tag":"input","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ad9"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Password","data-name":"Password","placeholder":"Password","type":"password","id":"Password","disabled":false,"required":true},"form":{"name":"Password","type":"input","passwordPage":false},"xattr":[{"name":"data-ms-member","value":"password"}]}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216fa","type":"FormButton","tag":"input","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ad0"],"children":[],"data":{"attr":{"type":"submit","value":"Sign in","data-wait":"Please wait..."},"form":{"type":"button","wait":"Please wait..."}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f21709","type":"FormSuccessMessage","tag":"div","classes":[],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f2170a"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f2170a","type":"Block","tag":"div","classes":[],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f2170b"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f2170b","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f2170c","type":"FormErrorMessage","tag":"div","classes":[],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f2170d"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f2170d","type":"Block","tag":"div","classes":[],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f2170e"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f2170e","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479ada","fake":false,"type":"class","name":"label-wrap","namespace":"","comb":"","styleLess":"text-align: center;","variants":{},"children":["a923ca5a-98d9-3854-5e3e-810ce7479add","a923ca5a-98d9-3854-5e3e-810ce7479ae0"],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479acf","fake":false,"type":"class","name":"right-wrap","namespace":"","comb":"","styleLess":"display: flex; width: 100%; height: auto; max-width: 550px; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; flex-direction: column; justify-content: center; align-items: flex-start; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 100.00%, 0.15); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 100.00%, 0.15); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 100.00%, 0.15); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 100.00%, 0.15); border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: hsla(219.5121951219512, 0.00%, 9.33%, 1.00);","variants":{"tiny":{"styleLess":"padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; justify-content: space-between;"}},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479ad0","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"width: 100%; height: auto; margin-top: 15px; padding-top: 12px; padding-right: 20px; padding-bottom: 12px; padding-left: 20px; border-top-style: solid; border-top-width: 1px; border-top-color: #ffff01; border-right-style: solid; border-right-width: 1px; border-right-color: #ffff01; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ffff01; border-left-style: solid; border-left-width: 1px; border-left-color: #ffff01; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background-color: #ffff01; transition-property: color, background-color; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: hsla(0, 0.00%, 0.00%, 1.00); font-weight: 400;","variants":{"main_hover":{"styleLess":"border-top-color: hsla(219.5121951219512, 0.00%, 100.00%, 1.00); border-right-color: hsla(219.5121951219512, 0.00%, 100.00%, 1.00); border-bottom-color: hsla(219.5121951219512, 0.00%, 100.00%, 1.00); border-left-color: hsla(219.5121951219512, 0.00%, 100.00%, 1.00); background-color: hsla(219.5121951219512, 0.00%, 9.33%, 1.00); color: hsla(0, 0.00%, 100.00%, 1.00);"}},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479ad5","fake":false,"type":"class","name":"wrap","namespace":"","comb":"","styleLess":"display: flex; width: 100%; min-height: 100vh; padding-top: 60px; padding-right: 60px; padding-bottom: 60px; padding-left: 60px; justify-content: center; align-items: center; background-color: hsla(221.6326530612245, 2.04%, 13.07%, 0.55); backdrop-filter: blur(6px);","variants":{"medium":{"styleLess":"width: 100%; height: 100vh;"},"small":{"styleLess":"padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;"}},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479ad9","fake":false,"type":"class","name":"text-field","namespace":"","comb":"","styleLess":"height: 45px; margin-bottom: 15px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 0px; border-top-style: none; border-top-width: 1px; border-top-color: hsla(189.12, 0.00%, 100.00%, 0.15); border-right-style: none; border-right-width: 1px; border-right-color: hsla(189.12, 0.00%, 100.00%, 0.15); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(189.12, 0.00%, 100.00%, 0.15); border-left-style: none; border-left-width: 1px; border-left-color: hsla(189.12, 0.00%, 100.00%, 0.15); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-color: hsla(219.5121951219512, 0.00%, 9.33%, 1.00); transition-property: border-color; transition-duration: 200ms; transition-timing-function: ease; color: hsla(0, 0.00%, 100.00%, 1.00);","variants":{"main_placeholder":{"styleLess":"color: hsla(216.42857142857142, 0.00%, 100.00%, 0.75); font-size: 13px;"},"main_hover":{"styleLess":"border-top-color: hsla(189.12, 60.98%, 59.80%, 1.00); border-right-color: hsla(189.12, 60.98%, 59.80%, 1.00); border-bottom-color: hsla(189.12, 0.00%, 100.00%, 1.00); border-left-color: hsla(189.12, 60.98%, 59.80%, 1.00);"},"main_focus":{"styleLess":"border-top-color: hsla(189.12, 60.98%, 59.80%, 1.00); border-right-color: hsla(189.12, 60.98%, 59.80%, 1.00); border-bottom-color: hsla(189.12, 0.00%, 100.00%, 1.00); border-left-color: hsla(189.12, 60.98%, 59.80%, 1.00);"}},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479ad6","fake":false,"type":"class","name":"p-18","namespace":"","comb":"","styleLess":"color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 300; text-decoration: none;","variants":{},"children":["a923ca5a-98d9-3854-5e3e-810ce7479adb"],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479ace","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"margin-bottom: 10px;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479acc","fake":false,"type":"class","name":"form","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479add","fake":false,"type":"class","name":"top","namespace":"","comb":"&","styleLess":"margin-bottom: 25px; text-align: left;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479aca","fake":false,"type":"class","name":"logo-link","namespace":"","comb":"","styleLess":"margin-bottom: 40px; align-self: flex-start;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"52405b25-0d7a-1a7e-bec7-81ae66f4aaa4","fake":false,"type":"class","name":"welcome-txt","namespace":"","comb":"","styleLess":"font-size: 2.5rem; font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/64831a029b9fe070616e3b70/64831a029b9fe070616e3c0a_Createq-logo.svg","siteId":"64831a029b9fe070616e3b70","width":152,"isHD":false,"height":30,"fileName":"64831a029b9fe070616e3c0a_Createq-logo.svg","createdOn":"2022-06-14T12:45:33.522Z","origFileName":"Createq-logo.svg","fileHash":"a8db14cd97c14d06f80570c0aeaf12e3","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/64831a029b9fe070616e3b70/64831a029b9fe070616e3c0a_Createq-logo.svg","thumbUrl":"https://cdn.prod.website-files.com/64831a029b9fe070616e3b70/64831a029b9fe070616e3c0a_Createq-logo.svg","_id":"64831a029b9fe070616e3c0a","updatedOn":"2023-06-09T12:24:35.280Z","fileSize":2958}],"ix1":[],"ix2":{"interactions":[{"id":"i","interactionTypeId":"SCROLL_INTO_VIEW_INTERACTION","eventIds":["e","e-2"],"target":"64831a212d44ccfdb8885d5b|ffcdb7e6-11c7-e942-87aa-a8ce50f216ee","createdOn":1686314548588}],"events":[{"id":"e","name":"","animationType":"preset","eventTypeId":"SCROLL_INTO_VIEW","action":{"id":"","actionTypeId":"GROW_EFFECT","instant":false,"config":{"actionListId":"GROW_EFFECT","autoStopEventId":"e-2"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64831a212d44ccfdb8885d5b|ffcdb7e6-11c7-e942-87aa-a8ce50f216ee","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"64831a212d44ccfdb8885d5b|ffcdb7e6-11c7-e942-87aa-a8ce50f216ee","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":0,"scrollOffsetUnit":"%","delay":0,"direction":null,"effectIn":true},"createdOn":1686314548589},{"id":"e-2","name":"","animationType":"preset","eventTypeId":"SCROLL_OUT_OF_VIEW","action":null,"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64831a212d44ccfdb8885d5b|ffcdb7e6-11c7-e942-87aa-a8ce50f216ee","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"64831a212d44ccfdb8885d5b|ffcdb7e6-11c7-e942-87aa-a8ce50f216ee","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":0,"scrollOffsetUnit":"%","delay":null,"direction":null,"effectIn":null},"createdOn":1686314548589}],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216ed","type":"Block","tag":"div","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ad5"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216ee"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216ee","type":"Block","tag":"div","classes":["a923ca5a-98d9-3854-5e3e-810ce7479acf"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216ef","ffcdb7e6-11c7-e942-87aa-a8ce50f216f1"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216ef","type":"Link","tag":"a","classes":["a923ca5a-98d9-3854-5e3e-810ce7479aca"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216f0"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f0","type":"Image","tag":"img","classes":[],"children":[],"data":{"img":{"id":"64831a029b9fe070616e3c0a"},"attr":{"src":"https://cdn.prod.website-files.com/64831a029b9fe070616e3b70/64831a029b9fe070616e3c0a_Createq-logo.svg","loading":"lazy","width":"auto","height":"auto"}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f1","type":"FormWrapper","tag":"div","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ace"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216f2","ffcdb7e6-11c7-e942-87aa-a8ce50f21709","ffcdb7e6-11c7-e942-87aa-a8ce50f2170c"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f2","type":"FormForm","tag":"form","classes":["a923ca5a-98d9-3854-5e3e-810ce7479acc"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216f3","ffcdb7e6-11c7-e942-87aa-a8ce50f216f8","ffcdb7e6-11c7-e942-87aa-a8ce50f216f9","ffcdb7e6-11c7-e942-87aa-a8ce50f216fa"],"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":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f3","type":"Block","tag":"div","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ada","a923ca5a-98d9-3854-5e3e-810ce7479add"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216f4","ffcdb7e6-11c7-e942-87aa-a8ce50f216f6"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f4","type":"Paragraph","tag":"p","classes":["52405b25-0d7a-1a7e-bec7-81ae66f4aaa4"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216f5"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f5","text":true,"v":"Welcome back."},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f6","type":"Paragraph","tag":"p","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ad6"],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f216f7"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f7","text":true,"v":"Sign in with your credentials below. This is actually a signup form, but for demo purposes it is creating a new account."},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f8","type":"FormTextInput","tag":"input","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ad9"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Email","data-name":"Email","placeholder":"Email","type":"email","id":"Email-2","disabled":false,"required":false},"form":{"name":"Email","type":"input","passwordPage":false},"xattr":[{"name":"data-ms-member","value":"email"}]}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216f9","type":"FormTextInput","tag":"input","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ad9"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Password","data-name":"Password","placeholder":"Password","type":"password","id":"Password","disabled":false,"required":true},"form":{"name":"Password","type":"input","passwordPage":false},"xattr":[{"name":"data-ms-member","value":"password"}]}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f216fa","type":"FormButton","tag":"input","classes":["a923ca5a-98d9-3854-5e3e-810ce7479ad0"],"children":[],"data":{"attr":{"type":"submit","value":"Sign in","data-wait":"Please wait..."},"form":{"type":"button","wait":"Please wait..."}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f21709","type":"FormSuccessMessage","tag":"div","classes":[],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f2170a"],"data":{"form":{"type":"msg-done"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f2170a","type":"Block","tag":"div","classes":[],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f2170b"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f2170b","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f2170c","type":"FormErrorMessage","tag":"div","classes":[],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f2170d"],"data":{"form":{"type":"msg-fail"},"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f2170d","type":"Block","tag":"div","classes":[],"children":["ffcdb7e6-11c7-e942-87aa-a8ce50f2170e"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ffcdb7e6-11c7-e942-87aa-a8ce50f2170e","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479ada","fake":false,"type":"class","name":"label-wrap","namespace":"","comb":"","styleLess":"text-align: center;","variants":{},"children":["a923ca5a-98d9-3854-5e3e-810ce7479add","a923ca5a-98d9-3854-5e3e-810ce7479ae0"],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479acf","fake":false,"type":"class","name":"right-wrap","namespace":"","comb":"","styleLess":"display: flex; width: 100%; height: auto; max-width: 550px; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; flex-direction: column; justify-content: center; align-items: flex-start; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 100.00%, 0.15); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 100.00%, 0.15); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 100.00%, 0.15); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 100.00%, 0.15); border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: hsla(219.5121951219512, 0.00%, 9.33%, 1.00);","variants":{"tiny":{"styleLess":"padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; justify-content: space-between;"}},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479ad0","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"width: 100%; height: auto; margin-top: 15px; padding-top: 12px; padding-right: 20px; padding-bottom: 12px; padding-left: 20px; border-top-style: solid; border-top-width: 1px; border-top-color: #ffff01; border-right-style: solid; border-right-width: 1px; border-right-color: #ffff01; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ffff01; border-left-style: solid; border-left-width: 1px; border-left-color: #ffff01; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background-color: #ffff01; transition-property: color, background-color; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: hsla(0, 0.00%, 0.00%, 1.00); font-weight: 400;","variants":{"main_hover":{"styleLess":"border-top-color: hsla(219.5121951219512, 0.00%, 100.00%, 1.00); border-right-color: hsla(219.5121951219512, 0.00%, 100.00%, 1.00); border-bottom-color: hsla(219.5121951219512, 0.00%, 100.00%, 1.00); border-left-color: hsla(219.5121951219512, 0.00%, 100.00%, 1.00); background-color: hsla(219.5121951219512, 0.00%, 9.33%, 1.00); color: hsla(0, 0.00%, 100.00%, 1.00);"}},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479ad5","fake":false,"type":"class","name":"wrap","namespace":"","comb":"","styleLess":"display: flex; width: 100%; min-height: 100vh; padding-top: 60px; padding-right: 60px; padding-bottom: 60px; padding-left: 60px; justify-content: center; align-items: center; background-color: hsla(221.6326530612245, 2.04%, 13.07%, 0.55); backdrop-filter: blur(6px);","variants":{"medium":{"styleLess":"width: 100%; height: 100vh;"},"small":{"styleLess":"padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;"}},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479ad9","fake":false,"type":"class","name":"text-field","namespace":"","comb":"","styleLess":"height: 45px; margin-bottom: 15px; padding-top: 10px; padding-right: 20px; padding-bottom: 10px; padding-left: 0px; border-top-style: none; border-top-width: 1px; border-top-color: hsla(189.12, 0.00%, 100.00%, 0.15); border-right-style: none; border-right-width: 1px; border-right-color: hsla(189.12, 0.00%, 100.00%, 0.15); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(189.12, 0.00%, 100.00%, 0.15); border-left-style: none; border-left-width: 1px; border-left-color: hsla(189.12, 0.00%, 100.00%, 0.15); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-color: hsla(219.5121951219512, 0.00%, 9.33%, 1.00); transition-property: border-color; transition-duration: 200ms; transition-timing-function: ease; color: hsla(0, 0.00%, 100.00%, 1.00);","variants":{"main_placeholder":{"styleLess":"color: hsla(216.42857142857142, 0.00%, 100.00%, 0.75); font-size: 13px;"},"main_hover":{"styleLess":"border-top-color: hsla(189.12, 60.98%, 59.80%, 1.00); border-right-color: hsla(189.12, 60.98%, 59.80%, 1.00); border-bottom-color: hsla(189.12, 0.00%, 100.00%, 1.00); border-left-color: hsla(189.12, 60.98%, 59.80%, 1.00);"},"main_focus":{"styleLess":"border-top-color: hsla(189.12, 60.98%, 59.80%, 1.00); border-right-color: hsla(189.12, 60.98%, 59.80%, 1.00); border-bottom-color: hsla(189.12, 0.00%, 100.00%, 1.00); border-left-color: hsla(189.12, 60.98%, 59.80%, 1.00);"}},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479ad6","fake":false,"type":"class","name":"p-18","namespace":"","comb":"","styleLess":"color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 300; text-decoration: none;","variants":{},"children":["a923ca5a-98d9-3854-5e3e-810ce7479adb"],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479ace","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"margin-bottom: 10px;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479acc","fake":false,"type":"class","name":"form","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479add","fake":false,"type":"class","name":"top","namespace":"","comb":"&","styleLess":"margin-bottom: 25px; text-align: left;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"a923ca5a-98d9-3854-5e3e-810ce7479aca","fake":false,"type":"class","name":"logo-link","namespace":"","comb":"","styleLess":"margin-bottom: 40px; align-self: flex-start;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"52405b25-0d7a-1a7e-bec7-81ae66f4aaa4","fake":false,"type":"class","name":"welcome-txt","namespace":"","comb":"","styleLess":"font-size: 2.5rem; font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/64831a029b9fe070616e3b70/64831a029b9fe070616e3c0a_Createq-logo.svg","siteId":"64831a029b9fe070616e3b70","width":152,"isHD":false,"height":30,"fileName":"64831a029b9fe070616e3c0a_Createq-logo.svg","createdOn":"2022-06-14T12:45:33.522Z","origFileName":"Createq-logo.svg","fileHash":"a8db14cd97c14d06f80570c0aeaf12e3","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/64831a029b9fe070616e3b70/64831a029b9fe070616e3c0a_Createq-logo.svg","thumbUrl":"https://cdn.prod.website-files.com/64831a029b9fe070616e3b70/64831a029b9fe070616e3c0a_Createq-logo.svg","_id":"64831a029b9fe070616e3c0a","updatedOn":"2023-06-09T12:24:35.280Z","fileSize":2958}],"ix1":[],"ix2":{"interactions":[{"id":"i","interactionTypeId":"SCROLL_INTO_VIEW_INTERACTION","eventIds":["e","e-2"],"target":"64831a212d44ccfdb8885d5b|ffcdb7e6-11c7-e942-87aa-a8ce50f216ee","createdOn":1686314548588}],"events":[{"id":"e","name":"","animationType":"preset","eventTypeId":"SCROLL_INTO_VIEW","action":{"id":"","actionTypeId":"GROW_EFFECT","instant":false,"config":{"actionListId":"GROW_EFFECT","autoStopEventId":"e-2"}},"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64831a212d44ccfdb8885d5b|ffcdb7e6-11c7-e942-87aa-a8ce50f216ee","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"64831a212d44ccfdb8885d5b|ffcdb7e6-11c7-e942-87aa-a8ce50f216ee","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":0,"scrollOffsetUnit":"%","delay":0,"direction":null,"effectIn":true},"createdOn":1686314548589},{"id":"e-2","name":"","animationType":"preset","eventTypeId":"SCROLL_OUT_OF_VIEW","action":null,"mediaQueries":["main","medium","small","tiny"],"target":{"id":"64831a212d44ccfdb8885d5b|ffcdb7e6-11c7-e942-87aa-a8ce50f216ee","appliesTo":"ELEMENT","styleBlockIds":[]},"targets":[{"id":"64831a212d44ccfdb8885d5b|ffcdb7e6-11c7-e942-87aa-a8ce50f216ee","appliesTo":"ELEMENT","styleBlockIds":[]}],"config":{"loop":false,"playInReverse":false,"scrollOffsetValue":0,"scrollOffsetUnit":"%","delay":null,"direction":null,"effectIn":null},"createdOn":1686314548589}],"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 Back Blur Signup Modal is a visually appealing component designed for user sign-up, featuring a blurred background effect that enhances focus on the form elements.
Key Features:
- Responsive design suitable for various screen sizes
- Includes fields for email and password input
- Success and error messages for user feedback
- Customizable styles and animations
Design Elements:
- Blurred background effect for a modern look
- Centered layout with ample padding
- Rounded corners and subtle borders for a polished appearance
Potential Use Cases:
- E-commerce websites looking to enhance user registration
- SaaS platforms requiring user account creation
- Event registration pages needing a streamlined sign-up process
- Membership sites that want to attract new users
Conclusion: The Back Blur Signup Modal is a versatile and stylish component that effectively captures user attention while providing a seamless sign-up experience.
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.