Loading Component...

Loading

More Components

View All
Part of

Webflow Login Form With Google Auth

Oops! Something went wrong while submitting the form.
Webflow Login Form With Google Auth
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"678871c6-b245-772a-3d25-e1b5dad777f9","type":"Block","tag":"div","classes":["85e5e7f6-5d04-b84a-bc59-77e90d59308c"],"children":["b15c3e8c-f1d7-c295-8da4-53748dab4442"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"b15c3e8c-f1d7-c295-8da4-53748dab4442","type":"Block","tag":"div","classes":["ef3bb409-c1e7-ddea-1a6f-3cdbcfed6139"],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d89852","2c6276ca-26e0-c4e8-518e-38d4607f693e"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d89852","type":"FormWrapper","tag":"div","classes":["81a65b87-be86-c95c-90a9-5d7b5ad67463"],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d89853","7eb8c65e-282b-6c7f-d64e-2d1a05d8985b","7eb8c65e-282b-6c7f-d64e-2d1a05d8985e"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d89853","type":"FormForm","tag":"form","classes":["31a41c66-fa54-c173-5eae-37733241e980"],"children":["a0859475-caac-1fa2-68f5-70d2d20eec82","78f73a4e-8206-fb19-e4e4-2540c9735f92","84add7c6-4b5d-a0fb-18b9-940878603555","e4c0f906-a58f-e3f9-efca-5ab9f8a57aaa","1fa57106-368d-1c88-12c9-556337d818cd","7eb8c65e-282b-6c7f-d64e-2d1a05d8985a","ab92df14-a701-1f7c-b2b3-aac132bb0d16"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[{"name":"data-ms-form","value":"login"}],"displayName":"","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":"a0859475-caac-1fa2-68f5-70d2d20eec82","type":"Heading","tag":"h1","classes":["53da5867-cafa-2653-d542-782320107b29"],"children":["a0859475-caac-1fa2-68f5-70d2d20eec83"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"a0859475-caac-1fa2-68f5-70d2d20eec83","text":true,"v":"Welcome back"},{"_id":"78f73a4e-8206-fb19-e4e4-2540c9735f92","type":"Paragraph","tag":"p","classes":["94c86792-6cd4-81f1-0869-c4b431253b26"],"children":["78f73a4e-8206-fb19-e4e4-2540c9735f93"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"78f73a4e-8206-fb19-e4e4-2540c9735f93","text":true,"v":"Welcome back! Please enter your details."},{"_id":"84add7c6-4b5d-a0fb-18b9-940878603555","type":"Block","tag":"div","classes":["ea273fd8-e3b0-99c1-2da8-a231d6b95b6b"],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d89854","7eb8c65e-282b-6c7f-d64e-2d1a05d89856"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d89854","type":"FormBlockLabel","tag":"label","classes":["b6fc6396-2e5d-73d7-a67c-82922d2e9e17"],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d89855"],"data":{"form":{"type":"label"},"search":{"exclude":false},"users":{"field":""},"xattr":[],"displayName":"","attr":{"for":"Email","id":""},"visibility":{"conditions":[]}}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d89855","text":true,"v":"Email"},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d89856","type":"FormTextInput","tag":"input","classes":["4081d93f-cc8f-492f-0cc5-c13421618390"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Email","data-name":"Email","placeholder":"Enter your email","type":"email","id":"Email","disabled":false,"required":false},"form":{"name":"Email","type":"input","passwordPage":false},"xattr":[{"name":"data-ms-member","value":"email"}],"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"e4c0f906-a58f-e3f9-efca-5ab9f8a57aaa","type":"Block","tag":"div","classes":["ea273fd8-e3b0-99c1-2da8-a231d6b95b6b"],"children":["e4c0f906-a58f-e3f9-efca-5ab9f8a57aab","e4c0f906-a58f-e3f9-efca-5ab9f8a57aad"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e4c0f906-a58f-e3f9-efca-5ab9f8a57aab","type":"FormBlockLabel","tag":"label","classes":["b6fc6396-2e5d-73d7-a67c-82922d2e9e17"],"children":["e4c0f906-a58f-e3f9-efca-5ab9f8a57aac"],"data":{"form":{"type":"label"},"search":{"exclude":false},"users":{"field":""},"xattr":[],"displayName":"","attr":{"for":"Password","id":""},"visibility":{"conditions":[]}}},{"_id":"e4c0f906-a58f-e3f9-efca-5ab9f8a57aac","text":true,"v":"Password"},{"_id":"e4c0f906-a58f-e3f9-efca-5ab9f8a57aad","type":"FormTextInput","tag":"input","classes":["4081d93f-cc8f-492f-0cc5-c13421618390"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Password","data-name":"Password","placeholder":"Password","type":"password","id":"Password","disabled":false,"required":false},"form":{"name":"Password","type":"input","passwordPage":false},"xattr":[{"name":"data-ms-member","value":"password"}],"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"1fa57106-368d-1c88-12c9-556337d818cd","type":"Block","tag":"div","classes":["c1552763-f35f-d9e0-3986-f44cee397962"],"children":["23a0df3f-cb34-21b0-5df7-f534d5ce01bc"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"23a0df3f-cb34-21b0-5df7-f534d5ce01bc","type":"Link","tag":"a","classes":["37eebcfc-c388-44d0-bbbd-9a8fea9002a6"],"children":["23a0df3f-cb34-21b0-5df7-f534d5ce01bd"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-modal","value":"forgot-password"}],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"23a0df3f-cb34-21b0-5df7-f534d5ce01bd","text":true,"v":"Forgot password"},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d8985a","type":"FormButton","tag":"input","classes":["c956db8a-bf78-0456-c606-77d5f3f2051a"],"children":[],"data":{"attr":{"type":"submit","value":"Login","data-wait":"Please wait...","id":""},"form":{"type":"button","wait":"Please wait..."},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ab92df14-a701-1f7c-b2b3-aac132bb0d16","type":"Link","tag":"a","classes":["c956db8a-bf78-0456-c606-77d5f3f2051a","55e0e41e-8dca-5762-c14b-a5201b17f1d5"],"children":["6d23cd2b-3633-8ef9-e88b-a727d3b31052","e997dbcc-1c0a-8815-6564-a2ba90f8c38f"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-auth-provider","value":"google"}],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"6d23cd2b-3633-8ef9-e88b-a727d3b31052","type":"Image","tag":"img","classes":[],"children":[],"data":{"attr":{"src":"https://cdn.prod.website-files.com/63922e1332daff31732c18f6/639235394bd30274b6edc9a1_google.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"639235394bd30274b6edc9a1"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e997dbcc-1c0a-8815-6564-a2ba90f8c38f","type":"Paragraph","tag":"p","classes":[],"children":["e997dbcc-1c0a-8815-6564-a2ba90f8c390"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e997dbcc-1c0a-8815-6564-a2ba90f8c390","text":true,"v":"Sign in with Google"},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d8985b","type":"FormSuccessMessage","tag":"div","classes":[],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d8985c"],"data":{"form":{"type":"msg-done"},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d8985c","type":"Block","tag":"div","classes":[],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d8985d"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d8985d","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d8985e","type":"FormErrorMessage","tag":"div","classes":[],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d8985f"],"data":{"form":{"type":"msg-fail"},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d8985f","type":"Block","tag":"div","classes":[],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d89860"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d89860","text":true,"v":"Oops! Something went wrong while submitting the form."},{"_id":"2c6276ca-26e0-c4e8-518e-38d4607f693e","type":"Paragraph","tag":"p","classes":["427ac93e-7ecc-5bf3-2d6e-4ae6b479d779"],"children":["2c6276ca-26e0-c4e8-518e-38d4607f693f","b3f66fa2-5ce1-bd45-5f41-68396597b3b1"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2c6276ca-26e0-c4e8-518e-38d4607f693f","text":true,"v":"Don’t have an account? "},{"_id":"b3f66fa2-5ce1-bd45-5f41-68396597b3b1","type":"Link","tag":"a","classes":["fc87452b-4576-2b87-2c04-2a01878b0c49"],"children":["ec391ba4-97b5-16ef-4fb8-b71ba9744fe7"],"data":{"search":{"exclude":false},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"href":"#","id":""},"visibility":{"conditions":[]},"button":false,"link":{"url":"#","mode":"external"}}},{"_id":"ec391ba4-97b5-16ef-4fb8-b71ba9744fe7","text":true,"v":"Sign up for free"}],"styles":[{"_id":"94c86792-6cd4-81f1-0869-c4b431253b26","fake":false,"type":"class","name":"p-light","namespace":"","comb":"","styleLess":"margin-bottom: 35px; font-weight: 300;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"53da5867-cafa-2653-d542-782320107b29","fake":false,"type":"class","name":"mb-20","namespace":"","comb":"","styleLess":"margin-bottom: 20px;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"37eebcfc-c388-44d0-bbbd-9a8fea9002a6","fake":false,"type":"class","name":"link","namespace":"","comb":"","styleLess":"color: hsla(221.53846153846155, 24.53%, 10.39%, 1.00); font-size: 14px; font-weight: 600; text-decoration: none;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"ea273fd8-e3b0-99c1-2da8-a231d6b95b6b","fake":false,"type":"class","name":"form-field","namespace":"","comb":"","styleLess":"margin-bottom: 25px;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"31a41c66-fa54-c173-5eae-37733241e980","fake":false,"type":"class","name":"form","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"55e0e41e-8dca-5762-c14b-a5201b17f1d5","fake":false,"type":"class","name":"outline","namespace":"","comb":"&","styleLess":"display: flex; margin-top: 15px; margin-bottom: 35px; justify-content: center; align-items: center; grid-column-gap: 13px; border-top-style: solid; border-top-width: 1.5px; border-top-color: #d3d4d8; border-right-style: solid; border-right-width: 1.5px; border-right-color: #d3d4d8; border-bottom-style: solid; border-bottom-width: 1.5px; border-bottom-color: #d3d4d8; border-left-style: solid; border-left-width: 1.5px; border-left-color: #d3d4d8; background-color: transparent; transition-property: transform, box-shadow; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: #39404a;","variants":{"main_hover":{"styleLess":"box-shadow: 2px 2px 10px 0 hsla(0, 0.00%, 0.00%, 0.20); transform: translate(-3px, -3px);"}},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"427ac93e-7ecc-5bf3-2d6e-4ae6b479d779","fake":false,"type":"class","name":"p-label","namespace":"","comb":"","styleLess":"font-size: 14px; font-weight: 300; text-align: center;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"85e5e7f6-5d04-b84a-bc59-77e90d59308c","fake":false,"type":"class","name":"left","namespace":"","comb":"","styleLess":"display: flex; width: 50%; padding-right: 20px; padding-left: 20px; justify-content: center; align-items: center;","variants":{"medium":{"styleLess":"width: 100%;"}},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"b6fc6396-2e5d-73d7-a67c-82922d2e9e17","fake":false,"type":"class","name":"label","namespace":"","comb":"","styleLess":"margin-bottom: 7px; color: #363f50; font-size: 15px; font-weight: 500;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"4081d93f-cc8f-492f-0cc5-c13421618390","fake":false,"type":"class","name":"field","namespace":"","comb":"","styleLess":"height: 45px; margin-bottom: 0px; padding-top: 8px; padding-right: 15px; padding-bottom: 8px; padding-left: 15px; border-top-style: solid; border-top-width: 1.5px; border-top-color: #d4d5d9; border-right-style: solid; border-right-width: 1.5px; border-right-color: #d4d5d9; border-bottom-style: solid; border-bottom-width: 1.5px; border-bottom-color: #d4d5d9; border-left-style: solid; border-left-width: 1.5px; border-left-color: #d4d5d9; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"fc87452b-4576-2b87-2c04-2a01878b0c49","fake":false,"type":"class","name":"span-link","namespace":"","comb":"","styleLess":"color: hsla(221.7391304347826, 38.98%, 11.57%, 1.00); font-weight: 600; text-decoration: none;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"c1552763-f35f-d9e0-3986-f44cee397962","fake":false,"type":"class","name":"form-flex","namespace":"","comb":"","styleLess":"display: flex; margin-bottom: 25px; justify-content: space-between; align-items: center;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"81a65b87-be86-c95c-90a9-5d7b5ad67463","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"margin-top: 40px; margin-bottom: 0px;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"ef3bb409-c1e7-ddea-1a6f-3cdbcfed6139","fake":false,"type":"class","name":"left-wrap","namespace":"","comb":"","styleLess":"width: 100%; max-width: 360px;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"c956db8a-bf78-0456-c606-77d5f3f2051a","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"width: 100%; height: 45px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #101727; transition-property: background-color; transition-duration: 200ms; transition-timing-function: ease; font-size: 16px; font-weight: 600; text-decoration: none;","variants":{"main_hover":{"styleLess":"background-color: hsla(221.7391304347826, 41.82%, 10.78%, 0.80);"}},"children":["55e0e41e-8dca-5762-c14b-a5201b17f1d5"],"createdBy":"6356aadb7f30bc008e62587f","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/63922e1332daff31732c18f6/639235394bd30274b6edc9a1_google.svg","siteId":"63922e1332daff31732c18f6","width":25,"isHD":false,"height":25,"fileName":"639235394bd30274b6edc9a1_google.svg","createdOn":"2022-12-08T19:04:25.984Z","origFileName":"google.svg","fileHash":"91ee5a9327706079f6f40eda7b2a7509","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/63922e1332daff31732c18f6/639235394bd30274b6edc9a1_google.svg","thumbUrl":"https://cdn.prod.website-files.com/63922e1332daff31732c18f6/639235394bd30274b6edc9a1_google.svg","_id":"639235394bd30274b6edc9a1","updatedOn":"2023-02-02T11:11:59.250Z","fileSize":1190}],"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":"678871c6-b245-772a-3d25-e1b5dad777f9","type":"Block","tag":"div","classes":["85e5e7f6-5d04-b84a-bc59-77e90d59308c"],"children":["b15c3e8c-f1d7-c295-8da4-53748dab4442"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"b15c3e8c-f1d7-c295-8da4-53748dab4442","type":"Block","tag":"div","classes":["ef3bb409-c1e7-ddea-1a6f-3cdbcfed6139"],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d89852","2c6276ca-26e0-c4e8-518e-38d4607f693e"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d89852","type":"FormWrapper","tag":"div","classes":["81a65b87-be86-c95c-90a9-5d7b5ad67463"],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d89853","7eb8c65e-282b-6c7f-d64e-2d1a05d8985b","7eb8c65e-282b-6c7f-d64e-2d1a05d8985e"],"data":{"form":{"type":"wrapper"},"search":{"exclude":true},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]}}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d89853","type":"FormForm","tag":"form","classes":["31a41c66-fa54-c173-5eae-37733241e980"],"children":["a0859475-caac-1fa2-68f5-70d2d20eec82","78f73a4e-8206-fb19-e4e4-2540c9735f92","84add7c6-4b5d-a0fb-18b9-940878603555","e4c0f906-a58f-e3f9-efca-5ab9f8a57aaa","1fa57106-368d-1c88-12c9-556337d818cd","7eb8c65e-282b-6c7f-d64e-2d1a05d8985a","ab92df14-a701-1f7c-b2b3-aac132bb0d16"],"data":{"form":{"type":"form","name":"Email Form"},"search":{"exclude":false},"xattr":[{"name":"data-ms-form","value":"login"}],"displayName":"","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":"a0859475-caac-1fa2-68f5-70d2d20eec82","type":"Heading","tag":"h1","classes":["53da5867-cafa-2653-d542-782320107b29"],"children":["a0859475-caac-1fa2-68f5-70d2d20eec83"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"a0859475-caac-1fa2-68f5-70d2d20eec83","text":true,"v":"Welcome back"},{"_id":"78f73a4e-8206-fb19-e4e4-2540c9735f92","type":"Paragraph","tag":"p","classes":["94c86792-6cd4-81f1-0869-c4b431253b26"],"children":["78f73a4e-8206-fb19-e4e4-2540c9735f93"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"78f73a4e-8206-fb19-e4e4-2540c9735f93","text":true,"v":"Welcome back! Please enter your details."},{"_id":"84add7c6-4b5d-a0fb-18b9-940878603555","type":"Block","tag":"div","classes":["ea273fd8-e3b0-99c1-2da8-a231d6b95b6b"],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d89854","7eb8c65e-282b-6c7f-d64e-2d1a05d89856"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d89854","type":"FormBlockLabel","tag":"label","classes":["b6fc6396-2e5d-73d7-a67c-82922d2e9e17"],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d89855"],"data":{"form":{"type":"label"},"search":{"exclude":false},"users":{"field":""},"xattr":[],"displayName":"","attr":{"for":"Email","id":""},"visibility":{"conditions":[]}}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d89855","text":true,"v":"Email"},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d89856","type":"FormTextInput","tag":"input","classes":["4081d93f-cc8f-492f-0cc5-c13421618390"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Email","data-name":"Email","placeholder":"Enter your email","type":"email","id":"Email","disabled":false,"required":false},"form":{"name":"Email","type":"input","passwordPage":false},"xattr":[{"name":"data-ms-member","value":"email"}],"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"e4c0f906-a58f-e3f9-efca-5ab9f8a57aaa","type":"Block","tag":"div","classes":["ea273fd8-e3b0-99c1-2da8-a231d6b95b6b"],"children":["e4c0f906-a58f-e3f9-efca-5ab9f8a57aab","e4c0f906-a58f-e3f9-efca-5ab9f8a57aad"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e4c0f906-a58f-e3f9-efca-5ab9f8a57aab","type":"FormBlockLabel","tag":"label","classes":["b6fc6396-2e5d-73d7-a67c-82922d2e9e17"],"children":["e4c0f906-a58f-e3f9-efca-5ab9f8a57aac"],"data":{"form":{"type":"label"},"search":{"exclude":false},"users":{"field":""},"xattr":[],"displayName":"","attr":{"for":"Password","id":""},"visibility":{"conditions":[]}}},{"_id":"e4c0f906-a58f-e3f9-efca-5ab9f8a57aac","text":true,"v":"Password"},{"_id":"e4c0f906-a58f-e3f9-efca-5ab9f8a57aad","type":"FormTextInput","tag":"input","classes":["4081d93f-cc8f-492f-0cc5-c13421618390"],"children":[],"data":{"attr":{"autofocus":false,"maxlength":256,"name":"Password","data-name":"Password","placeholder":"Password","type":"password","id":"Password","disabled":false,"required":false},"form":{"name":"Password","type":"input","passwordPage":false},"xattr":[{"name":"data-ms-member","value":"password"}],"displayName":"","search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"1fa57106-368d-1c88-12c9-556337d818cd","type":"Block","tag":"div","classes":["c1552763-f35f-d9e0-3986-f44cee397962"],"children":["23a0df3f-cb34-21b0-5df7-f534d5ce01bc"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"23a0df3f-cb34-21b0-5df7-f534d5ce01bc","type":"Link","tag":"a","classes":["37eebcfc-c388-44d0-bbbd-9a8fea9002a6"],"children":["23a0df3f-cb34-21b0-5df7-f534d5ce01bd"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-modal","value":"forgot-password"}],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"23a0df3f-cb34-21b0-5df7-f534d5ce01bd","text":true,"v":"Forgot password"},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d8985a","type":"FormButton","tag":"input","classes":["c956db8a-bf78-0456-c606-77d5f3f2051a"],"children":[],"data":{"attr":{"type":"submit","value":"Login","data-wait":"Please wait...","id":""},"form":{"type":"button","wait":"Please wait..."},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"ab92df14-a701-1f7c-b2b3-aac132bb0d16","type":"Link","tag":"a","classes":["c956db8a-bf78-0456-c606-77d5f3f2051a","55e0e41e-8dca-5762-c14b-a5201b17f1d5"],"children":["6d23cd2b-3633-8ef9-e88b-a727d3b31052","e997dbcc-1c0a-8815-6564-a2ba90f8c38f"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-auth-provider","value":"google"}],"block":"inline","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"6d23cd2b-3633-8ef9-e88b-a727d3b31052","type":"Image","tag":"img","classes":[],"children":[],"data":{"attr":{"src":"https://cdn.prod.website-files.com/63922e1332daff31732c18f6/639235394bd30274b6edc9a1_google.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"639235394bd30274b6edc9a1"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e997dbcc-1c0a-8815-6564-a2ba90f8c38f","type":"Paragraph","tag":"p","classes":[],"children":["e997dbcc-1c0a-8815-6564-a2ba90f8c390"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"e997dbcc-1c0a-8815-6564-a2ba90f8c390","text":true,"v":"Sign in with Google"},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d8985b","type":"FormSuccessMessage","tag":"div","classes":[],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d8985c"],"data":{"form":{"type":"msg-done"},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d8985c","type":"Block","tag":"div","classes":[],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d8985d"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d8985d","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d8985e","type":"FormErrorMessage","tag":"div","classes":[],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d8985f"],"data":{"form":{"type":"msg-fail"},"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d8985f","type":"Block","tag":"div","classes":[],"children":["7eb8c65e-282b-6c7f-d64e-2d1a05d89860"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"7eb8c65e-282b-6c7f-d64e-2d1a05d89860","text":true,"v":"Oops! Something went wrong while submitting the form."},{"_id":"2c6276ca-26e0-c4e8-518e-38d4607f693e","type":"Paragraph","tag":"p","classes":["427ac93e-7ecc-5bf3-2d6e-4ae6b479d779"],"children":["2c6276ca-26e0-c4e8-518e-38d4607f693f","b3f66fa2-5ce1-bd45-5f41-68396597b3b1"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"2c6276ca-26e0-c4e8-518e-38d4607f693f","text":true,"v":"Don’t have an account? "},{"_id":"b3f66fa2-5ce1-bd45-5f41-68396597b3b1","type":"Link","tag":"a","classes":["fc87452b-4576-2b87-2c04-2a01878b0c49"],"children":["ec391ba4-97b5-16ef-4fb8-b71ba9744fe7"],"data":{"search":{"exclude":false},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"href":"#","id":""},"visibility":{"conditions":[]},"button":false,"link":{"url":"#","mode":"external"}}},{"_id":"ec391ba4-97b5-16ef-4fb8-b71ba9744fe7","text":true,"v":"Sign up for free"}],"styles":[{"_id":"94c86792-6cd4-81f1-0869-c4b431253b26","fake":false,"type":"class","name":"p-light","namespace":"","comb":"","styleLess":"margin-bottom: 35px; font-weight: 300;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"53da5867-cafa-2653-d542-782320107b29","fake":false,"type":"class","name":"mb-20","namespace":"","comb":"","styleLess":"margin-bottom: 20px;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"37eebcfc-c388-44d0-bbbd-9a8fea9002a6","fake":false,"type":"class","name":"link","namespace":"","comb":"","styleLess":"color: hsla(221.53846153846155, 24.53%, 10.39%, 1.00); font-size: 14px; font-weight: 600; text-decoration: none;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"ea273fd8-e3b0-99c1-2da8-a231d6b95b6b","fake":false,"type":"class","name":"form-field","namespace":"","comb":"","styleLess":"margin-bottom: 25px;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"31a41c66-fa54-c173-5eae-37733241e980","fake":false,"type":"class","name":"form","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"55e0e41e-8dca-5762-c14b-a5201b17f1d5","fake":false,"type":"class","name":"outline","namespace":"","comb":"&","styleLess":"display: flex; margin-top: 15px; margin-bottom: 35px; justify-content: center; align-items: center; grid-column-gap: 13px; border-top-style: solid; border-top-width: 1.5px; border-top-color: #d3d4d8; border-right-style: solid; border-right-width: 1.5px; border-right-color: #d3d4d8; border-bottom-style: solid; border-bottom-width: 1.5px; border-bottom-color: #d3d4d8; border-left-style: solid; border-left-width: 1.5px; border-left-color: #d3d4d8; background-color: transparent; transition-property: transform, box-shadow; transition-duration: 200ms, 200ms; transition-timing-function: ease, ease; color: #39404a;","variants":{"main_hover":{"styleLess":"box-shadow: 2px 2px 10px 0 hsla(0, 0.00%, 0.00%, 0.20); transform: translate(-3px, -3px);"}},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"427ac93e-7ecc-5bf3-2d6e-4ae6b479d779","fake":false,"type":"class","name":"p-label","namespace":"","comb":"","styleLess":"font-size: 14px; font-weight: 300; text-align: center;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"85e5e7f6-5d04-b84a-bc59-77e90d59308c","fake":false,"type":"class","name":"left","namespace":"","comb":"","styleLess":"display: flex; width: 50%; padding-right: 20px; padding-left: 20px; justify-content: center; align-items: center;","variants":{"medium":{"styleLess":"width: 100%;"}},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"b6fc6396-2e5d-73d7-a67c-82922d2e9e17","fake":false,"type":"class","name":"label","namespace":"","comb":"","styleLess":"margin-bottom: 7px; color: #363f50; font-size: 15px; font-weight: 500;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"4081d93f-cc8f-492f-0cc5-c13421618390","fake":false,"type":"class","name":"field","namespace":"","comb":"","styleLess":"height: 45px; margin-bottom: 0px; padding-top: 8px; padding-right: 15px; padding-bottom: 8px; padding-left: 15px; border-top-style: solid; border-top-width: 1.5px; border-top-color: #d4d5d9; border-right-style: solid; border-right-width: 1.5px; border-right-color: #d4d5d9; border-bottom-style: solid; border-bottom-width: 1.5px; border-bottom-color: #d4d5d9; border-left-style: solid; border-left-width: 1.5px; border-left-color: #d4d5d9; border-top-left-radius: 7px; border-top-right-radius: 7px; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"fc87452b-4576-2b87-2c04-2a01878b0c49","fake":false,"type":"class","name":"span-link","namespace":"","comb":"","styleLess":"color: hsla(221.7391304347826, 38.98%, 11.57%, 1.00); font-weight: 600; text-decoration: none;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"c1552763-f35f-d9e0-3986-f44cee397962","fake":false,"type":"class","name":"form-flex","namespace":"","comb":"","styleLess":"display: flex; margin-bottom: 25px; justify-content: space-between; align-items: center;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"81a65b87-be86-c95c-90a9-5d7b5ad67463","fake":false,"type":"class","name":"form-block","namespace":"","comb":"","styleLess":"margin-top: 40px; margin-bottom: 0px;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"ef3bb409-c1e7-ddea-1a6f-3cdbcfed6139","fake":false,"type":"class","name":"left-wrap","namespace":"","comb":"","styleLess":"width: 100%; max-width: 360px;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"c956db8a-bf78-0456-c606-77d5f3f2051a","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"width: 100%; height: 45px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background-color: #101727; transition-property: background-color; transition-duration: 200ms; transition-timing-function: ease; font-size: 16px; font-weight: 600; text-decoration: none;","variants":{"main_hover":{"styleLess":"background-color: hsla(221.7391304347826, 41.82%, 10.78%, 0.80);"}},"children":["55e0e41e-8dca-5762-c14b-a5201b17f1d5"],"createdBy":"6356aadb7f30bc008e62587f","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/63922e1332daff31732c18f6/639235394bd30274b6edc9a1_google.svg","siteId":"63922e1332daff31732c18f6","width":25,"isHD":false,"height":25,"fileName":"639235394bd30274b6edc9a1_google.svg","createdOn":"2022-12-08T19:04:25.984Z","origFileName":"google.svg","fileHash":"91ee5a9327706079f6f40eda7b2a7509","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/63922e1332daff31732c18f6/639235394bd30274b6edc9a1_google.svg","thumbUrl":"https://cdn.prod.website-files.com/63922e1332daff31732c18f6/639235394bd30274b6edc9a1_google.svg","_id":"639235394bd30274b6edc9a1","updatedOn":"2023-02-02T11:11:59.250Z","fileSize":1190}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser not supported. Use
CC Chrome or SS Safari.

About this component

AI Generated

Component Description (Generated by AI)

This is a free Webflow login form that integrates with Memberstack and Google Auth, providing a seamless authentication experience for users.

Key Features:

  • Integration with Google Auth for easy login
  • Built with Memberstack for user management
  • Responsive design suitable for various devices
  • Includes success and error messages for user feedback
  • Customizable fields for email and password

Design Elements:

  • Modern and clean layout
  • Use of rounded input fields and buttons
  • Flexbox layout for responsive design

Potential Use Cases:

  • Web applications requiring user authentication
  • E-commerce sites needing secure login options
  • Membership-based websites for exclusive content access
  • Blogs or platforms that require user accounts
  • SaaS products that require user sign-in

Conclusion: The Webflow Login Form With Google Auth is a versatile and user-friendly component that enhances user experience through easy login options, making it ideal for various online platforms.