Component laden...

Laden

Meer onderdelen

Bekijk alles
Deel van

Webflow Log In Clone

Oeps! Er ging iets mis bij het verzenden van het formulier.
Webflow Log In Clone
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a7b","type":"FormWrapper","tag":"div","classes":[],"children":["a995e99e-0623-fac3-5094-7e152b0a9a7c","a995e99e-0623-fac3-5094-7e152b0a9aaf","a995e99e-0623-fac3-5094-7e152b0a9ab2"],"data":{"form":{"type":"wrapper"},"attr":{"id":""},"search":{"exclude":false},"visibility":{"conditions":[]},"xattr":[],"displayName":""}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a7c","type":"FormForm","tag":"form","classes":["508821e0-abc6-4616-99aa-060f62345385"],"children":["890c048c-b7d2-d371-4d9e-ade4d099d515","600bf36a-28b6-4dbd-075e-506c9d67b022","2b16e139-dbc2-6ad2-1eb1-3f0fdda4e9c4","ad553f9a-6cdc-c71c-a71b-77e9358859d4","a9ce0840-af5b-4848-2091-746d20cbe663","a995e99e-0623-fac3-5094-7e152b0a9aad","8fff3ce1-2a61-5a0b-ee6e-71f964c31e6c","ddaa447d-da66-09b4-4ec0-019030cf7997"],"data":{"form":{"type":"form","name":"signup"},"search":{"exclude":false},"xattr":[{"name":"data-ms-form","value":"login"}],"displayName":"","attr":{"id":"wf-form-signup","name":"wf-form-signup","data-name":"signup","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"890c048c-b7d2-d371-4d9e-ade4d099d515","type":"Link","tag":"a","classes":["1c3ea65b-1ab0-542b-716c-033feae0e4cc"],"children":["9f18a8cb-c938-a3b5-5b4b-f86311a0f7d0"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"9f18a8cb-c938-a3b5-5b4b-f86311a0f7d0","type":"Image","tag":"img","classes":[],"children":[],"data":{"attr":{"src":"https://cdn.prod.website-files.com/63612402c1de5bd94f2dab0a/63612402c1de5b0e5e2dab35_template%20logo%20black.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"63612402c1de5b0e5e2dab35"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"600bf36a-28b6-4dbd-075e-506c9d67b022","type":"Heading","tag":"h1","classes":["445aba0c-29c3-149d-410b-11994a7432b3"],"children":["600bf36a-28b6-4dbd-075e-506c9d67b023","62586df6-47fc-3e06-0563-d6405d7f105b"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"600bf36a-28b6-4dbd-075e-506c9d67b023","text":true,"v":"Log Into My Account"},{"_id":"62586df6-47fc-3e06-0563-d6405d7f105b","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"2b16e139-dbc2-6ad2-1eb1-3f0fdda4e9c4","type":"Block","tag":"div","classes":["5b70bfc8-f6f5-bc32-6f86-2c54c4f50242"],"children":["0c2dc900-78d6-04b5-d9d3-feeff9bec2b8","a12de5db-563c-42d4-e03d-13428fc573d7"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"0c2dc900-78d6-04b5-d9d3-feeff9bec2b8","type":"Link","tag":"a","classes":["4904d389-5dff-940d-f246-c5f57d187132"],"children":["0c2dc900-78d6-04b5-d9d3-feeff9bec2b9"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-auth-provider","value":"google"}],"block":"inline","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"0c2dc900-78d6-04b5-d9d3-feeff9bec2b9","type":"Block","tag":"div","classes":["4904d389-5dff-940d-f246-c5f57d187133"],"children":["0c2dc900-78d6-04b5-d9d3-feeff9bec2ba","0c2dc900-78d6-04b5-d9d3-feeff9bec2bb"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"0c2dc900-78d6-04b5-d9d3-feeff9bec2ba","type":"Image","tag":"img","classes":["4904d389-5dff-940d-f246-c5f57d187134"],"children":[],"data":{"displayName":"","attr":{"id":"","width":"auto","height":"auto","src":"https://cdn.prod.website-files.com/63612402c1de5bd94f2dab0a/63612402c1de5b7bb02dab47_google.svg","loading":"lazy"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"img":{"id":"63612402c1de5b7bb02dab47"}}},{"_id":"0c2dc900-78d6-04b5-d9d3-feeff9bec2bb","type":"Block","tag":"div","classes":[],"children":["0c2dc900-78d6-04b5-d9d3-feeff9bec2bc"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-auth-connected-text","value":"Disconnect Google"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"0c2dc900-78d6-04b5-d9d3-feeff9bec2bc","text":true,"v":"Sign in with Google"},{"_id":"a12de5db-563c-42d4-e03d-13428fc573d7","type":"Block","tag":"div","classes":[],"children":["a12de5db-563c-42d4-e03d-13428fc573d8"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a12de5db-563c-42d4-e03d-13428fc573d8","text":true,"v":"or"},{"_id":"ad553f9a-6cdc-c71c-a71b-77e9358859d4","type":"Block","tag":"div","classes":["508821e0-abc6-4616-99aa-060f6234538f"],"children":["ad553f9a-6cdc-c71c-a71b-77e9358859d7"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ad553f9a-6cdc-c71c-a71b-77e9358859d7","type":"FormTextInput","tag":"input","classes":["508821e0-abc6-4616-99aa-060f6234538d"],"children":[],"data":{"displayName":"","attr":{"id":"Email","name":"Email","maxlength":256,"data-name":"Email","placeholder":"Email","disabled":false,"type":"email","required":true,"autofocus":false},"xattr":[{"name":"data-ms-member","value":"email"}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"name":"Email","type":"input","passwordPage":false}}},{"_id":"a9ce0840-af5b-4848-2091-746d20cbe663","type":"Block","tag":"div","classes":["508821e0-abc6-4616-99aa-060f62345387"],"children":["a995e99e-0623-fac3-5094-7e152b0a9a81","a995e99e-0623-fac3-5094-7e152b0a9a85"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a81","type":"Block","tag":"div","classes":["508821e0-abc6-4616-99aa-060f6234538f"],"children":["a995e99e-0623-fac3-5094-7e152b0a9a84"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a84","type":"FormTextInput","tag":"input","classes":["508821e0-abc6-4616-99aa-060f6234538d"],"children":[],"data":{"displayName":"","attr":{"id":"Password","name":"Password","maxlength":256,"data-name":"Password","placeholder":"Password","disabled":false,"type":"password","required":true,"autofocus":false},"xattr":[{"name":"data-ms-member","value":"password"},{"name":"data-show","value":"true"},{"name":"minlength","value":"8"}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"name":"Password","type":"input","passwordPage":false}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a85","type":"TabsWrapper","tag":"div","classes":["508821e0-abc6-4616-99aa-060f62345389"],"children":["a995e99e-0623-fac3-5094-7e152b0a9a86","a995e99e-0623-fac3-5094-7e152b0a9a8f"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tabs":{"type":"wrapper","current":"Show","easing":"ease","fadeIn":300,"fadeOut":100}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a86","type":"TabsMenu","tag":"div","classes":[],"children":["a995e99e-0623-fac3-5094-7e152b0a9a87","a995e99e-0623-fac3-5094-7e152b0a9a8b"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-transform","value":"true"}],"displayName":"","attr":{"id":"transformButton"},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"menu"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a87","type":"TabsLink","tag":"a","classes":["508821e0-abc6-4616-99aa-060f62345384"],"children":["a995e99e-0623-fac3-5094-7e152b0a9a88"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":"","data-w-tab":"Show"},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a88","type":"HtmlEmbed","tag":"div","classes":["508821e0-abc6-4616-99aa-060f62345381"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false},"type":"html"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a8b","type":"TabsLink","tag":"a","classes":["508821e0-abc6-4616-99aa-060f62345384"],"children":["a995e99e-0623-fac3-5094-7e152b0a9a8c"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":"","data-w-tab":"Hide"},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a8c","type":"HtmlEmbed","tag":"div","classes":["508821e0-abc6-4616-99aa-060f62345381"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false},"type":"html"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a8f","type":"TabsContent","tag":"div","classes":["508821e0-abc6-4616-99aa-060f62345380"],"children":["a995e99e-0623-fac3-5094-7e152b0a9a90","a995e99e-0623-fac3-5094-7e152b0a9a91"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"content"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a90","type":"TabsPane","tag":"div","classes":[],"children":[],"data":{"displayName":"","attr":{"id":"","data-w-tab":"Show"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a91","type":"TabsPane","tag":"div","classes":[],"children":[],"data":{"displayName":"","attr":{"id":"","data-w-tab":"Hide"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9aad","type":"FormButton","tag":"input","classes":["508821e0-abc6-4616-99aa-060f62345386"],"children":[],"data":{"displayName":"","attr":{"id":"","type":"submit","value":"Log In","data-wait":"Please wait..."},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"button","wait":"Please wait..."}}},{"_id":"8fff3ce1-2a61-5a0b-ee6e-71f964c31e6c","type":"Block","tag":"div","classes":["508821e0-abc6-4616-99aa-060f62345387"],"children":["068d7cb0-f809-9ce0-3158-853d2bec4dcd","ccd8207b-2a0f-c0d6-8a7d-754675030302"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"068d7cb0-f809-9ce0-3158-853d2bec4dcd","type":"Link","tag":"a","classes":["faca59be-3347-deeb-18d3-f48dd2ea8ca1","90d149db-71e7-a667-4120-cbf096e54573"],"children":["068d7cb0-f809-9ce0-3158-853d2bec4dce"],"data":{"search":{"exclude":false},"xattr":[],"block":"","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"/"}}},{"_id":"068d7cb0-f809-9ce0-3158-853d2bec4dce","text":true,"v":"Don't have an account?"},{"_id":"ccd8207b-2a0f-c0d6-8a7d-754675030302","type":"Link","tag":"a","classes":["faca59be-3347-deeb-18d3-f48dd2ea8ca1","90d149db-71e7-a667-4120-cbf096e54573"],"children":["ccd8207b-2a0f-c0d6-8a7d-754675030303"],"data":{"search":{"exclude":false},"xattr":[],"block":"","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"/password/forgot"}}},{"_id":"ccd8207b-2a0f-c0d6-8a7d-754675030303","text":true,"v":"Forgot Password?"},{"_id":"ddaa447d-da66-09b4-4ec0-019030cf7997","type":"HtmlEmbed","tag":"div","classes":["fd2217fb-c44c-20bf-9333-3a68ed0f9e4f"],"children":[],"v":"<script>\n//Tutorial video \n//attach a click handler to the button to make it transform when clicked, via our transform() function below\n document.querySelector(\"[data-transform]\").addEventListener(\"click\", transform);\n //flag of whether or not it is a password field or text field\n var isPassword = true;\n //this function will toggle the input between being a password or a text input\n function transform() {\n //copy the element itself, its html source, and value text to a variable\n var myInput = document.querySelector(\"[data-show]\");\n var oldHtml = myInput.outerHTML;\n var text = myInput.value;\n if (isPassword)\n {\n //replace \"password\" with \"text\" in the html if it is a password field\n var newHtml = oldHtml.replace(/password/g, \"text\");\n }\n else\n {\n //replace \"text\" with \"password\" if it is a text field\n newHtml = oldHtml.replace(/text/g, \"password\");\n }\n //update the html\n myInput.outerHTML = newHtml;\n //restore the text value\n myInput = document.querySelector(\"[data-show]\");\n myInput.value = text;\n //toggle the isPassword flag\n isPassword = !isPassword;\n }\n</script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<script>\n//Tutorial video \n//attach a click handler to the button to make it transform when clicked, via our transform() function below\n document.querySelector(\"[data-transform]\").addEventListener(\"click\", transform);\n //flag of whether or not it is a password field or text field\n var isPassword = true;\n //this function will toggle the input between being a password or a text input\n function transform() {\n //copy the element itself, its html source, and value text to a variable\n var myInput = document.querySelector(\"[data-show]\");\n var oldHtml = myInput.outerHTML;\n var text = myInput.value;\n if (isPassword)\n {\n //replace \"password\" with \"text\" in the html if it is a password field\n var newHtml = oldHtml.replace(/password/g, \"text\");\n }\n else\n {\n //replace \"text\" with \"password\" if it is a text field\n newHtml = oldHtml.replace(/text/g, \"password\");\n }\n //update the html\n myInput.outerHTML = newHtml;\n //restore the text value\n myInput = document.querySelector(\"[data-show]\");\n myInput.value = text;\n //toggle the isPassword flag\n isPassword = !isPassword;\n }\n</script>","div":false,"iframe":false,"script":true,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"insideRTE":false}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9aaf","type":"FormSuccessMessage","tag":"div","classes":[],"children":["a995e99e-0623-fac3-5094-7e152b0a9ab0"],"data":{"form":{"type":"msg-done"},"attr":{"id":""},"search":{"exclude":false},"visibility":{"conditions":[]},"xattr":[],"displayName":""}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9ab0","type":"Block","tag":"div","classes":[],"children":["a995e99e-0623-fac3-5094-7e152b0a9ab1"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9ab1","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9ab2","type":"FormErrorMessage","tag":"div","classes":[],"children":["a995e99e-0623-fac3-5094-7e152b0a9ab3"],"data":{"form":{"type":"msg-fail"},"attr":{"id":""},"search":{"exclude":false},"visibility":{"conditions":[]},"xattr":[],"displayName":""}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9ab3","type":"Block","tag":"div","classes":[],"children":["a995e99e-0623-fac3-5094-7e152b0a9ab4"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9ab4","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"faca59be-3347-deeb-18d3-f48dd2ea8ca1","fake":false,"type":"class","name":"log-in__p","namespace":"","comb":"","styleLess":"margin-top: 15px; margin-bottom: 25px; color: #737373; font-size: 13px; line-height: 1.5;","variants":{},"children":["90d149db-71e7-a667-4120-cbf096e54573"],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"5b70bfc8-f6f5-bc32-6f86-2c54c4f50242","fake":false,"type":"class","name":"log-in__buttons","namespace":"","comb":"","styleLess":"padding-bottom: 15px; color: #737373; text-align: center;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"508821e0-abc6-4616-99aa-060f6234538d","fake":false,"type":"class","name":"form-field","namespace":"","comb":"","styleLess":"height: 50px; margin-bottom: 0px; padding-top: 9px; padding-right: 15px; padding-bottom: 8px; padding-left: 15px; border-top-style: none; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 86.67%, 1.00); border-right-style: none; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 86.67%, 1.00); border-bottom-style: none; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 86.67%, 1.00); border-left-style: none; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 86.67%, 1.00); background-color: hsla(0, 0.00%, 93.33%, 1.00);","variants":{"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 60.00%, 1.00);"},"main_hover":{"styleLess":"background-color: hsla(0, 0.00%, 86.67%, 1.00);"},"main_focus":{"styleLess":"border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; background-color: white;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345384","fake":false,"type":"class","name":"show-password","namespace":"","comb":"","styleLess":"bottom: -1px; display: flex; width: 48px; height: 48px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; justify-content: center; align-items: center; background-color: hsla(0, 0.00%, 93.33%, 1.00); color: #737373; font-size: 13.5px;","variants":{"main_current":{"styleLess":"display: none;"},"main_hover":{"styleLess":"background-color: hsla(0, 0.00%, 86.67%, 1.00); color: hsla(0, 0.00%, 20.00%, 1.00);"}},"children":[],"selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345387","fake":false,"type":"class","name":"flex-row-outer","namespace":"","comb":"","styleLess":"display: flex; width: 100%; justify-content: space-between; align-items: flex-start;","variants":{},"children":[],"selector":null},{"_id":"445aba0c-29c3-149d-410b-11994a7432b3","fake":false,"type":"class","name":"log-in__h","namespace":"","comb":"","styleLess":"margin-bottom: 30px; color: hsla(0, 0.00%, 20.00%, 1.00); font-size: 34px; font-weight: 500;","variants":{"small":{"styleLess":"font-size: 30px;"},"tiny":{"styleLess":"font-size: 28px;"}},"children":["61ef66a6-6913-ebba-0ea4-abe5b7ce7212"],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345386","fake":false,"type":"class","name":"form-button","namespace":"","comb":"","styleLess":"width: 100%; padding-top: 0.8em; padding-right: 2em; padding-bottom: 0.8em; padding-left: 2em; align-self: flex-end; background-color: hsla(234.6031746031746, 100.00%, 62.94%, 1.00); transition-property: all; transition-duration: 200ms; transition-timing-function: ease; font-weight: 500;","variants":{"main_hover":{"styleLess":"background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1));"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"1c3ea65b-1ab0-542b-716c-033feae0e4cc","fake":false,"type":"class","name":"login-logo","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: auto; bottom: auto; max-width: 95px; margin-left: 33px; padding-top: 42px;","variants":{"medium":{"styleLess":"position: relative; margin-bottom: 20px; margin-left: 0px; padding-top: 0px;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"4904d389-5dff-940d-f246-c5f57d187133","fake":false,"type":"class","name":"Social Content","namespace":"","comb":"","styleLess":"display: flex; justify-content: center; align-items: center; grid-column-gap: 12px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345385","fake":false,"type":"class","name":"form-container","namespace":"","comb":"","styleLess":"width: 475px; max-width: 475px; margin-bottom: 15px; padding-top: 10px; text-align: left;","variants":{},"children":[],"selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345380","fake":false,"type":"class","name":"hide","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345381","fake":false,"type":"class","name":"Eye SVG","namespace":"","comb":"","styleLess":"display: flex; width: 16px; justify-content: center; align-items: center;","variants":{},"children":[],"selector":null},{"_id":"4904d389-5dff-940d-f246-c5f57d187132","fake":false,"type":"class","name":"Social Btn","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; height: 50px; margin-bottom: 15px; justify-content: center; align-items: center; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 86.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 86.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 86.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 86.67%, 1.00); background-color: white; transition-property: background-color; transition-duration: 200ms; transition-timing-function: ease; color: hsla(0, 0.00%, 20.00%, 1.00); text-decoration: none;","variants":{"main_focus":{"styleLess":"border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 0.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 0.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 0.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 0.00%, 1.00);"},"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 43.33%, 1.00);"},"main_hover":{"styleLess":"background-color: hsla(0, 0.00%, 94.12%, 1.00);"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"508821e0-abc6-4616-99aa-060f6234538f","fake":false,"type":"class","name":"input-wrapper","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; margin-bottom: 10px; flex-direction: column; align-items: flex-start;","variants":{},"children":["84f965f1-7e5a-6445-f3e9-3f294a8973e2","55f4817d-f45c-82f1-5cf1-20100f4ffabe"],"selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345389","fake":false,"type":"class","name":"Show Password Wrap","namespace":"","comb":"","styleLess":"z-index: 4; width: 48px; height: 48px; margin-bottom: 12px; margin-left: 10px; background-color: hsla(0, 0.00%, 94.12%, 1.00);","variants":{},"children":[],"selector":null},{"_id":"fd2217fb-c44c-20bf-9333-3a68ed0f9e4f","fake":false,"type":"class","name":"👋 Show and Hide Password JS","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"4904d389-5dff-940d-f246-c5f57d187134","fake":false,"type":"class","name":"social-image","namespace":"","comb":"","styleLess":"width: 20px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"90d149db-71e7-a667-4120-cbf096e54573","fake":false,"type":"class","name":"link","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/63612402c1de5bd94f2dab0a/63612402c1de5b0e5e2dab35_template%20logo%20black.svg","siteId":"63612402c1de5bd94f2dab0a","isHD":false,"fileName":"63612402c1de5b0e5e2dab35_template logo black.svg","createdOn":"2022-10-26T17:42:28.568Z","origFileName":"template logo black.svg","fileHash":"010c67ae4729ed764a538303c44613d9","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/63612402c1de5bd94f2dab0a/63612402c1de5b0e5e2dab35_template%20logo%20black.svg","thumbUrl":"https://cdn.prod.website-files.com/63612402c1de5bd94f2dab0a/63612402c1de5b0e5e2dab35_template%20logo%20black.svg","_id":"63612402c1de5b0e5e2dab35","updatedOn":"2022-11-01T13:49:55.331Z","markedAsDeleted":true,"fileSize":9650},{"cdnUrl":"https://cdn.prod.website-files.com/63612402c1de5bd94f2dab0a/63612402c1de5b7bb02dab47_google.svg","siteId":"63612402c1de5bd94f2dab0a","width":24,"isHD":false,"height":24,"fileName":"63612402c1de5b7bb02dab47_google.svg","createdOn":"2022-10-28T09:22:54.527Z","origFileName":"google.svg","fileHash":"b7727941c0e8a117b6cfd8f06a1cb7ed","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/63612402c1de5bd94f2dab0a/63612402c1de5b7bb02dab47_google.svg","thumbUrl":"https://cdn.prod.website-files.com/63612402c1de5bd94f2dab0a/63612402c1de5b7bb02dab47_google.svg","_id":"63612402c1de5b7bb02dab47","updatedOn":"2022-11-01T13:49:55.280Z","markedAsDeleted":true,"fileSize":1307}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":1,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Klonen in Webflow
Kopieer component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a7b","type":"FormWrapper","tag":"div","classes":[],"children":["a995e99e-0623-fac3-5094-7e152b0a9a7c","a995e99e-0623-fac3-5094-7e152b0a9aaf","a995e99e-0623-fac3-5094-7e152b0a9ab2"],"data":{"form":{"type":"wrapper"},"attr":{"id":""},"search":{"exclude":false},"visibility":{"conditions":[]},"xattr":[],"displayName":""}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a7c","type":"FormForm","tag":"form","classes":["508821e0-abc6-4616-99aa-060f62345385"],"children":["890c048c-b7d2-d371-4d9e-ade4d099d515","600bf36a-28b6-4dbd-075e-506c9d67b022","2b16e139-dbc2-6ad2-1eb1-3f0fdda4e9c4","ad553f9a-6cdc-c71c-a71b-77e9358859d4","a9ce0840-af5b-4848-2091-746d20cbe663","a995e99e-0623-fac3-5094-7e152b0a9aad","8fff3ce1-2a61-5a0b-ee6e-71f964c31e6c","ddaa447d-da66-09b4-4ec0-019030cf7997"],"data":{"form":{"type":"form","name":"signup"},"search":{"exclude":false},"xattr":[{"name":"data-ms-form","value":"login"}],"displayName":"","attr":{"id":"wf-form-signup","name":"wf-form-signup","data-name":"signup","redirect":"","data-redirect":"","action":"","method":"get"},"visibility":{"conditions":[]},"Source":{"tag":"Default form","val":{}}}},{"_id":"890c048c-b7d2-d371-4d9e-ade4d099d515","type":"Link","tag":"a","classes":["1c3ea65b-1ab0-542b-716c-033feae0e4cc"],"children":["9f18a8cb-c938-a3b5-5b4b-f86311a0f7d0"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"9f18a8cb-c938-a3b5-5b4b-f86311a0f7d0","type":"Image","tag":"img","classes":[],"children":[],"data":{"attr":{"src":"https://cdn.prod.website-files.com/63612402c1de5bd94f2dab0a/63612402c1de5b0e5e2dab35_template%20logo%20black.svg","loading":"lazy","width":"auto","height":"auto","id":""},"img":{"id":"63612402c1de5b0e5e2dab35"},"displayName":"","xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]}}},{"_id":"600bf36a-28b6-4dbd-075e-506c9d67b022","type":"Heading","tag":"h1","classes":["445aba0c-29c3-149d-410b-11994a7432b3"],"children":["600bf36a-28b6-4dbd-075e-506c9d67b023","62586df6-47fc-3e06-0563-d6405d7f105b"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"600bf36a-28b6-4dbd-075e-506c9d67b023","text":true,"v":"Log Into My Account"},{"_id":"62586df6-47fc-3e06-0563-d6405d7f105b","type":"LineBreak","tag":"br","classes":[],"children":[],"data":{"sym":{"inst":"LineBreak"}}},{"_id":"2b16e139-dbc2-6ad2-1eb1-3f0fdda4e9c4","type":"Block","tag":"div","classes":["5b70bfc8-f6f5-bc32-6f86-2c54c4f50242"],"children":["0c2dc900-78d6-04b5-d9d3-feeff9bec2b8","a12de5db-563c-42d4-e03d-13428fc573d7"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"0c2dc900-78d6-04b5-d9d3-feeff9bec2b8","type":"Link","tag":"a","classes":["4904d389-5dff-940d-f246-c5f57d187132"],"children":["0c2dc900-78d6-04b5-d9d3-feeff9bec2b9"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-auth-provider","value":"google"}],"block":"inline","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"#"}}},{"_id":"0c2dc900-78d6-04b5-d9d3-feeff9bec2b9","type":"Block","tag":"div","classes":["4904d389-5dff-940d-f246-c5f57d187133"],"children":["0c2dc900-78d6-04b5-d9d3-feeff9bec2ba","0c2dc900-78d6-04b5-d9d3-feeff9bec2bb"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"0c2dc900-78d6-04b5-d9d3-feeff9bec2ba","type":"Image","tag":"img","classes":["4904d389-5dff-940d-f246-c5f57d187134"],"children":[],"data":{"displayName":"","attr":{"id":"","width":"auto","height":"auto","src":"https://cdn.prod.website-files.com/63612402c1de5bd94f2dab0a/63612402c1de5b7bb02dab47_google.svg","loading":"lazy"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"img":{"id":"63612402c1de5b7bb02dab47"}}},{"_id":"0c2dc900-78d6-04b5-d9d3-feeff9bec2bb","type":"Block","tag":"div","classes":[],"children":["0c2dc900-78d6-04b5-d9d3-feeff9bec2bc"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-ms-auth-connected-text","value":"Disconnect Google"}],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"0c2dc900-78d6-04b5-d9d3-feeff9bec2bc","text":true,"v":"Sign in with Google"},{"_id":"a12de5db-563c-42d4-e03d-13428fc573d7","type":"Block","tag":"div","classes":[],"children":["a12de5db-563c-42d4-e03d-13428fc573d8"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a12de5db-563c-42d4-e03d-13428fc573d8","text":true,"v":"or"},{"_id":"ad553f9a-6cdc-c71c-a71b-77e9358859d4","type":"Block","tag":"div","classes":["508821e0-abc6-4616-99aa-060f6234538f"],"children":["ad553f9a-6cdc-c71c-a71b-77e9358859d7"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"ad553f9a-6cdc-c71c-a71b-77e9358859d7","type":"FormTextInput","tag":"input","classes":["508821e0-abc6-4616-99aa-060f6234538d"],"children":[],"data":{"displayName":"","attr":{"id":"Email","name":"Email","maxlength":256,"data-name":"Email","placeholder":"Email","disabled":false,"type":"email","required":true,"autofocus":false},"xattr":[{"name":"data-ms-member","value":"email"}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"name":"Email","type":"input","passwordPage":false}}},{"_id":"a9ce0840-af5b-4848-2091-746d20cbe663","type":"Block","tag":"div","classes":["508821e0-abc6-4616-99aa-060f62345387"],"children":["a995e99e-0623-fac3-5094-7e152b0a9a81","a995e99e-0623-fac3-5094-7e152b0a9a85"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a81","type":"Block","tag":"div","classes":["508821e0-abc6-4616-99aa-060f6234538f"],"children":["a995e99e-0623-fac3-5094-7e152b0a9a84"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a84","type":"FormTextInput","tag":"input","classes":["508821e0-abc6-4616-99aa-060f6234538d"],"children":[],"data":{"displayName":"","attr":{"id":"Password","name":"Password","maxlength":256,"data-name":"Password","placeholder":"Password","disabled":false,"type":"password","required":true,"autofocus":false},"xattr":[{"name":"data-ms-member","value":"password"},{"name":"data-show","value":"true"},{"name":"minlength","value":"8"}],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"name":"Password","type":"input","passwordPage":false}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a85","type":"TabsWrapper","tag":"div","classes":["508821e0-abc6-4616-99aa-060f62345389"],"children":["a995e99e-0623-fac3-5094-7e152b0a9a86","a995e99e-0623-fac3-5094-7e152b0a9a8f"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tabs":{"type":"wrapper","current":"Show","easing":"ease","fadeIn":300,"fadeOut":100}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a86","type":"TabsMenu","tag":"div","classes":[],"children":["a995e99e-0623-fac3-5094-7e152b0a9a87","a995e99e-0623-fac3-5094-7e152b0a9a8b"],"data":{"search":{"exclude":false},"xattr":[{"name":"data-transform","value":"true"}],"displayName":"","attr":{"id":"transformButton"},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"menu"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a87","type":"TabsLink","tag":"a","classes":["508821e0-abc6-4616-99aa-060f62345384"],"children":["a995e99e-0623-fac3-5094-7e152b0a9a88"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":"","data-w-tab":"Show"},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a88","type":"HtmlEmbed","tag":"div","classes":["508821e0-abc6-4616-99aa-060f62345381"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24zM2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0zM12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5zm2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64l2.64 2.64z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false},"type":"html"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a8b","type":"TabsLink","tag":"a","classes":["508821e0-abc6-4616-99aa-060f62345384"],"children":["a995e99e-0623-fac3-5094-7e152b0a9a8c"],"data":{"search":{"exclude":false},"xattr":[],"block":"inline","displayName":"","attr":{"id":"","data-w-tab":"Hide"},"visibility":{"conditions":[]},"tabs":{"type":"link"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a8c","type":"HtmlEmbed","tag":"div","classes":["508821e0-abc6-4616-99aa-060f62345381"],"children":[],"v":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>","data":{"insideRTE":false,"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"embed":{"meta":{"html":"<svg xmlns=\"http://www.w3.org/2000/svg\" enable-background=\"new 0 0 24 24\" height=\"24px\" viewBox=\"0 0 24 24\" width=\"24px\" fill=\"currentColor\">\n<rect fill=\"none\" height=\"24\" width=\"24\"/>\n\n<path d=\"M0 0h24v24H0V0z\" fill=\"none\"/><path d=\"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z\"/></svg>","div":false,"iframe":false,"script":false,"compilable":false},"type":"html"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a8f","type":"TabsContent","tag":"div","classes":["508821e0-abc6-4616-99aa-060f62345380"],"children":["a995e99e-0623-fac3-5094-7e152b0a9a90","a995e99e-0623-fac3-5094-7e152b0a9a91"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"content"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a90","type":"TabsPane","tag":"div","classes":[],"children":[],"data":{"displayName":"","attr":{"id":"","data-w-tab":"Show"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9a91","type":"TabsPane","tag":"div","classes":[],"children":[],"data":{"displayName":"","attr":{"id":"","data-w-tab":"Hide"},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"tag":"div","tabs":{"type":"pane"}}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9aad","type":"FormButton","tag":"input","classes":["508821e0-abc6-4616-99aa-060f62345386"],"children":[],"data":{"displayName":"","attr":{"id":"","type":"submit","value":"Log In","data-wait":"Please wait..."},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"form":{"type":"button","wait":"Please wait..."}}},{"_id":"8fff3ce1-2a61-5a0b-ee6e-71f964c31e6c","type":"Block","tag":"div","classes":["508821e0-abc6-4616-99aa-060f62345387"],"children":["068d7cb0-f809-9ce0-3158-853d2bec4dcd","ccd8207b-2a0f-c0d6-8a7d-754675030302"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"068d7cb0-f809-9ce0-3158-853d2bec4dcd","type":"Link","tag":"a","classes":["faca59be-3347-deeb-18d3-f48dd2ea8ca1","90d149db-71e7-a667-4120-cbf096e54573"],"children":["068d7cb0-f809-9ce0-3158-853d2bec4dce"],"data":{"search":{"exclude":false},"xattr":[],"block":"","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"/"}}},{"_id":"068d7cb0-f809-9ce0-3158-853d2bec4dce","text":true,"v":"Don't have an account?"},{"_id":"ccd8207b-2a0f-c0d6-8a7d-754675030302","type":"Link","tag":"a","classes":["faca59be-3347-deeb-18d3-f48dd2ea8ca1","90d149db-71e7-a667-4120-cbf096e54573"],"children":["ccd8207b-2a0f-c0d6-8a7d-754675030303"],"data":{"search":{"exclude":false},"xattr":[],"block":"","displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"button":false,"link":{"mode":"external","url":"/password/forgot"}}},{"_id":"ccd8207b-2a0f-c0d6-8a7d-754675030303","text":true,"v":"Forgot Password?"},{"_id":"ddaa447d-da66-09b4-4ec0-019030cf7997","type":"HtmlEmbed","tag":"div","classes":["fd2217fb-c44c-20bf-9333-3a68ed0f9e4f"],"children":[],"v":"<script>\n//Tutorial video \n//attach a click handler to the button to make it transform when clicked, via our transform() function below\n document.querySelector(\"[data-transform]\").addEventListener(\"click\", transform);\n //flag of whether or not it is a password field or text field\n var isPassword = true;\n //this function will toggle the input between being a password or a text input\n function transform() {\n //copy the element itself, its html source, and value text to a variable\n var myInput = document.querySelector(\"[data-show]\");\n var oldHtml = myInput.outerHTML;\n var text = myInput.value;\n if (isPassword)\n {\n //replace \"password\" with \"text\" in the html if it is a password field\n var newHtml = oldHtml.replace(/password/g, \"text\");\n }\n else\n {\n //replace \"text\" with \"password\" if it is a text field\n newHtml = oldHtml.replace(/text/g, \"password\");\n }\n //update the html\n myInput.outerHTML = newHtml;\n //restore the text value\n myInput = document.querySelector(\"[data-show]\");\n myInput.value = text;\n //toggle the isPassword flag\n isPassword = !isPassword;\n }\n</script>","data":{"search":{"exclude":true},"embed":{"type":"html","meta":{"html":"<script>\n//Tutorial video \n//attach a click handler to the button to make it transform when clicked, via our transform() function below\n document.querySelector(\"[data-transform]\").addEventListener(\"click\", transform);\n //flag of whether or not it is a password field or text field\n var isPassword = true;\n //this function will toggle the input between being a password or a text input\n function transform() {\n //copy the element itself, its html source, and value text to a variable\n var myInput = document.querySelector(\"[data-show]\");\n var oldHtml = myInput.outerHTML;\n var text = myInput.value;\n if (isPassword)\n {\n //replace \"password\" with \"text\" in the html if it is a password field\n var newHtml = oldHtml.replace(/password/g, \"text\");\n }\n else\n {\n //replace \"text\" with \"password\" if it is a text field\n newHtml = oldHtml.replace(/text/g, \"password\");\n }\n //update the html\n myInput.outerHTML = newHtml;\n //restore the text value\n myInput = document.querySelector(\"[data-show]\");\n myInput.value = text;\n //toggle the isPassword flag\n isPassword = !isPassword;\n }\n</script>","div":false,"iframe":false,"script":true,"compilable":false}},"displayName":"","attr":{"id":""},"xattr":[],"visibility":{"conditions":[]},"insideRTE":false}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9aaf","type":"FormSuccessMessage","tag":"div","classes":[],"children":["a995e99e-0623-fac3-5094-7e152b0a9ab0"],"data":{"form":{"type":"msg-done"},"attr":{"id":""},"search":{"exclude":false},"visibility":{"conditions":[]},"xattr":[],"displayName":""}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9ab0","type":"Block","tag":"div","classes":[],"children":["a995e99e-0623-fac3-5094-7e152b0a9ab1"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9ab1","text":true,"v":"Thank you! Your submission has been received!"},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9ab2","type":"FormErrorMessage","tag":"div","classes":[],"children":["a995e99e-0623-fac3-5094-7e152b0a9ab3"],"data":{"form":{"type":"msg-fail"},"attr":{"id":""},"search":{"exclude":false},"visibility":{"conditions":[]},"xattr":[],"displayName":""}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9ab3","type":"Block","tag":"div","classes":[],"children":["a995e99e-0623-fac3-5094-7e152b0a9ab4"],"data":{"search":{"exclude":false},"xattr":[],"text":true,"displayName":"","attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"a995e99e-0623-fac3-5094-7e152b0a9ab4","text":true,"v":"Oops! Something went wrong while submitting the form."}],"styles":[{"_id":"faca59be-3347-deeb-18d3-f48dd2ea8ca1","fake":false,"type":"class","name":"log-in__p","namespace":"","comb":"","styleLess":"margin-top: 15px; margin-bottom: 25px; color: #737373; font-size: 13px; line-height: 1.5;","variants":{},"children":["90d149db-71e7-a667-4120-cbf096e54573"],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"5b70bfc8-f6f5-bc32-6f86-2c54c4f50242","fake":false,"type":"class","name":"log-in__buttons","namespace":"","comb":"","styleLess":"padding-bottom: 15px; color: #737373; text-align: center;","variants":{},"children":[],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"508821e0-abc6-4616-99aa-060f6234538d","fake":false,"type":"class","name":"form-field","namespace":"","comb":"","styleLess":"height: 50px; margin-bottom: 0px; padding-top: 9px; padding-right: 15px; padding-bottom: 8px; padding-left: 15px; border-top-style: none; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 86.67%, 1.00); border-right-style: none; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 86.67%, 1.00); border-bottom-style: none; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 86.67%, 1.00); border-left-style: none; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 86.67%, 1.00); background-color: hsla(0, 0.00%, 93.33%, 1.00);","variants":{"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 60.00%, 1.00);"},"main_hover":{"styleLess":"background-color: hsla(0, 0.00%, 86.67%, 1.00);"},"main_focus":{"styleLess":"border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; background-color: white;"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345384","fake":false,"type":"class","name":"show-password","namespace":"","comb":"","styleLess":"bottom: -1px; display: flex; width: 48px; height: 48px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; justify-content: center; align-items: center; background-color: hsla(0, 0.00%, 93.33%, 1.00); color: #737373; font-size: 13.5px;","variants":{"main_current":{"styleLess":"display: none;"},"main_hover":{"styleLess":"background-color: hsla(0, 0.00%, 86.67%, 1.00); color: hsla(0, 0.00%, 20.00%, 1.00);"}},"children":[],"selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345387","fake":false,"type":"class","name":"flex-row-outer","namespace":"","comb":"","styleLess":"display: flex; width: 100%; justify-content: space-between; align-items: flex-start;","variants":{},"children":[],"selector":null},{"_id":"445aba0c-29c3-149d-410b-11994a7432b3","fake":false,"type":"class","name":"log-in__h","namespace":"","comb":"","styleLess":"margin-bottom: 30px; color: hsla(0, 0.00%, 20.00%, 1.00); font-size: 34px; font-weight: 500;","variants":{"small":{"styleLess":"font-size: 30px;"},"tiny":{"styleLess":"font-size: 28px;"}},"children":["61ef66a6-6913-ebba-0ea4-abe5b7ce7212"],"createdBy":"6356aadb7f30bc008e62587f","selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345386","fake":false,"type":"class","name":"form-button","namespace":"","comb":"","styleLess":"width: 100%; padding-top: 0.8em; padding-right: 2em; padding-bottom: 0.8em; padding-left: 2em; align-self: flex-end; background-color: hsla(234.6031746031746, 100.00%, 62.94%, 1.00); transition-property: all; transition-duration: 200ms; transition-timing-function: ease; font-weight: 500;","variants":{"main_hover":{"styleLess":"background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.1));"}},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"1c3ea65b-1ab0-542b-716c-033feae0e4cc","fake":false,"type":"class","name":"login-logo","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: auto; bottom: auto; max-width: 95px; margin-left: 33px; padding-top: 42px;","variants":{"medium":{"styleLess":"position: relative; margin-bottom: 20px; margin-left: 0px; padding-top: 0px;"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"4904d389-5dff-940d-f246-c5f57d187133","fake":false,"type":"class","name":"Social Content","namespace":"","comb":"","styleLess":"display: flex; justify-content: center; align-items: center; grid-column-gap: 12px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345385","fake":false,"type":"class","name":"form-container","namespace":"","comb":"","styleLess":"width: 475px; max-width: 475px; margin-bottom: 15px; padding-top: 10px; text-align: left;","variants":{},"children":[],"selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345380","fake":false,"type":"class","name":"hide","namespace":"","comb":"","styleLess":"display: none;","variants":{},"children":[],"selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345381","fake":false,"type":"class","name":"Eye SVG","namespace":"","comb":"","styleLess":"display: flex; width: 16px; justify-content: center; align-items: center;","variants":{},"children":[],"selector":null},{"_id":"4904d389-5dff-940d-f246-c5f57d187132","fake":false,"type":"class","name":"Social Btn","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; height: 50px; margin-bottom: 15px; justify-content: center; align-items: center; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 86.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 86.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 86.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 86.67%, 1.00); background-color: white; transition-property: background-color; transition-duration: 200ms; transition-timing-function: ease; color: hsla(0, 0.00%, 20.00%, 1.00); text-decoration: none;","variants":{"main_focus":{"styleLess":"border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 0.00%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 0.00%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 0.00%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 0.00%, 1.00);"},"main_placeholder":{"styleLess":"color: hsla(0, 0.00%, 43.33%, 1.00);"},"main_hover":{"styleLess":"background-color: hsla(0, 0.00%, 94.12%, 1.00);"}},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"508821e0-abc6-4616-99aa-060f6234538f","fake":false,"type":"class","name":"input-wrapper","namespace":"","comb":"","styleLess":"position: relative; display: flex; width: 100%; margin-bottom: 10px; flex-direction: column; align-items: flex-start;","variants":{},"children":["84f965f1-7e5a-6445-f3e9-3f294a8973e2","55f4817d-f45c-82f1-5cf1-20100f4ffabe"],"selector":null},{"_id":"508821e0-abc6-4616-99aa-060f62345389","fake":false,"type":"class","name":"Show Password Wrap","namespace":"","comb":"","styleLess":"z-index: 4; width: 48px; height: 48px; margin-bottom: 12px; margin-left: 10px; background-color: hsla(0, 0.00%, 94.12%, 1.00);","variants":{},"children":[],"selector":null},{"_id":"fd2217fb-c44c-20bf-9333-3a68ed0f9e4f","fake":false,"type":"class","name":"👋 Show and Hide Password JS","namespace":"","comb":"","styleLess":"","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"4904d389-5dff-940d-f246-c5f57d187134","fake":false,"type":"class","name":"social-image","namespace":"","comb":"","styleLess":"width: 20px;","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null},{"_id":"90d149db-71e7-a667-4120-cbf096e54573","fake":false,"type":"class","name":"link","namespace":"","comb":"&","styleLess":"","variants":{},"children":[],"createdBy":"572e16b6f586648f39f82496","selector":null}],"assets":[{"cdnUrl":"https://cdn.prod.website-files.com/63612402c1de5bd94f2dab0a/63612402c1de5b0e5e2dab35_template%20logo%20black.svg","siteId":"63612402c1de5bd94f2dab0a","isHD":false,"fileName":"63612402c1de5b0e5e2dab35_template logo black.svg","createdOn":"2022-10-26T17:42:28.568Z","origFileName":"template logo black.svg","fileHash":"010c67ae4729ed764a538303c44613d9","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/63612402c1de5bd94f2dab0a/63612402c1de5b0e5e2dab35_template%20logo%20black.svg","thumbUrl":"https://cdn.prod.website-files.com/63612402c1de5bd94f2dab0a/63612402c1de5b0e5e2dab35_template%20logo%20black.svg","_id":"63612402c1de5b0e5e2dab35","updatedOn":"2022-11-01T13:49:55.331Z","markedAsDeleted":true,"fileSize":9650},{"cdnUrl":"https://cdn.prod.website-files.com/63612402c1de5bd94f2dab0a/63612402c1de5b7bb02dab47_google.svg","siteId":"63612402c1de5bd94f2dab0a","width":24,"isHD":false,"height":24,"fileName":"63612402c1de5b7bb02dab47_google.svg","createdOn":"2022-10-28T09:22:54.527Z","origFileName":"google.svg","fileHash":"b7727941c0e8a117b6cfd8f06a1cb7ed","variants":[],"mimeType":"image/svg+xml","s3Url":"https://s3.amazonaws.com/webflow-prod-assets/63612402c1de5bd94f2dab0a/63612402c1de5b7bb02dab47_google.svg","thumbUrl":"https://cdn.prod.website-files.com/63612402c1de5bd94f2dab0a/63612402c1de5b7bb02dab47_google.svg","_id":"63612402c1de5b7bb02dab47","updatedOn":"2022-11-01T13:49:55.280Z","markedAsDeleted":true,"fileSize":1307}],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":1,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser niet ondersteund. Gebruik
CC Chrome of SS Safari.

Over dit onderdeel

AI-gegenereerd

Beschrijving van onderdeel (gegenereerd door AI)

The Webflow Log In Clone is a user interface component that replicates Webflow's signup, login, and forgot password functionalities. It integrates social login and account creation through Memberstack, with custom code for form validation and password visibility toggling.

Belangrijkste kenmerken:

  • Includes signup, login, and forgot password forms
  • Social login options via Google
  • Custom form validation and password visibility toggle
  • Responsive design suitable for various devices

Ontwerpelementen:

  • Strakke en moderne lay-out
  • Color scheme featuring soft grays, blues and whites
  • Use of icons for social login options

Potentiële gebruikssituaties:

  • Startups needing a quick login solution
  • E-commerce websites requiring user accounts
  • Blogs or content platforms with member access
  • SaaS applications looking for user authentication
  • Portfolio sites that want to showcase projects with user login

Conclusion: The Webflow Log In Clone is a versatile and visually appealing component that simplifies user authentication processes, making it an excellent choice for various web applications.

Bouwen

Begin met het bouwen van je dromen

Memberstack is 100% gratis totdat u klaar bent om te lanceren - dus waar wacht u nog op? Maak je eerste app en begin vandaag nog.