Profile Picture
Julian Galluzzo

Basic Memberstack Login Form

A simple & clean login form with Google auth taken from the Bricks Board website. Requires the Memberstack add on to work.
Copy component
{"content":[{"id":"lvrlsx","name":"container","parent":"flqkei","children":["vcwxnz"],"settings":{}},{"id":"vcwxnz","name":"div","parent":"lvrlsx","children":["jkmuwz","yqkrwr","tiahol","uvyvrf","wpasue"],"settings":{"_cssGlobalClasses":["kamyuk"]},"label":"Form Wrapper"},{"id":"jkmuwz","name":"heading","parent":"vcwxnz","children":[],"settings":{"text":"Log in","tag":"h1","_cssGlobalClasses":["irfylw"]}},{"id":"yqkrwr","name":"text-basic","parent":"vcwxnz","children":[],"settings":{"text":"Log in to your account to make, publish, and comment on Bricks components","_cssGlobalClasses":["cztiyp"]},"label":"Paragraph"},{"id":"tiahol","name":"ms-brcks-form","parent":"vcwxnz","children":[],"settings":{"formType":"login","planAction":"add","fields":[{"type":"email","label":"Email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":""},{"type":"password","label":"Password","placeholder":"Enter your password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":""}],"fieldsGap":"20","_cssGlobalClasses":["yljqrq"],"socialAuth":[{"id":"mmqaui","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"iconColor":{"raw":"var(--brand-blue)"},"border":{"radius":{"top":"8","right":"8","bottom":"8","left":"8"}},"padding":{"bottom":"15","top":"15","left":"20","right":"20"}}]},"themeStyles":[]},{"id":"uvyvrf","name":"div","parent":"vcwxnz","children":["qsotlt","ycndym"],"settings":{"_cssGlobalClasses":["zscjcv"]},"label":"Footer"},{"id":"qsotlt","name":"div","parent":"uvyvrf","children":["fdxlka"],"settings":[]},{"id":"fdxlka","name":"text-basic","parent":"qsotlt","children":[],"settings":{"text":"Don't have an account?"}},{"id":"ycndym","name":"div","parent":"uvyvrf","children":["ragrum"],"settings":[]},{"id":"ragrum","name":"text-link","parent":"ycndym","children":[],"settings":{"text":"Sign up","_cssGlobalClasses":["jehwzu"],"link":{"type":"internal","postId":"228"},"icon":{"library":""}},"themeStyles":[]},{"id":"wpasue","name":"div","parent":"vcwxnz","children":["vgooru","zzctlw"],"settings":{"_cssGlobalClasses":["zscjcv"]},"label":"Footer"},{"id":"vgooru","name":"div","parent":"wpasue","children":["udfmcz"],"settings":[]},{"id":"udfmcz","name":"text-basic","parent":"vgooru","children":[],"settings":{"text":"Forgot your password?"}},{"id":"zzctlw","name":"div","parent":"wpasue","children":["dzyhqo"],"settings":[]},{"id":"dzyhqo","name":"text-link","parent":"zzctlw","children":[],"settings":{"text":"Reset password","_cssGlobalClasses":["jehwzu"],"link":{"type":"internal","postId":"417"},"icon":{"library":""}},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://bricksboard.com","version":"1.12.1","globalClasses":[{"id":"kamyuk","name":"form__wrapper","settings":{"_width":"100%","_widthMax":"500","_padding":{"bottom":"30","top":"30","left":"30","right":"30"},"_margin":{"left":"auto","right":"auto"},"_border":{"width":{"bottom":"1","top":"1","left":"1","right":"1"},"style":"solid","color":{"raw":"var(--border-light)"},"radius":{"top":"8","right":"8","bottom":"8","left":"8"}},"_boxShadow":{"values":{"offsetY":"2","offsetX":"0","blur":"5"},"color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.05)","hsl":"hsla(0, 0%, 0%, 0.05)"}},"_background":{"color":{"id":"acss_import_white","name":"white","raw":"var(--white)"}}}},{"id":"irfylw","name":"h1--small","settings":{"_typography":{"font-size":"30"}}},{"id":"cztiyp","name":"paragraph","settings":{"_margin":{"bottom":"15","top":"5"},"_typography":{"color":{"hex":"#787878","raw":"var(--text-light)"}}}},{"id":"yljqrq","name":"memberstack-form","settings":{"fields":[{"type":"email","label":"Email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":""},{"type":"password","label":"Password","placeholder":"Enter your password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":""}],"formWidth":"100%","fieldsGap":"20","inputBorder":{"style":"solid","color":{"hex":"#e5e5e5"},"radius":{"top-left":4,"top-right":4,"bottom-right":4,"bottom-left":4,"top":"8","right":"8","bottom":"8","left":"8"}},"selectBorder":{"width":{"top":1,"right":1,"bottom":1,"left":1},"style":"solid","color":{"hex":"#e5e5e5"},"radius":{"top-left":4,"top-right":4,"bottom-right":4,"bottom-left":4}},"buttonWidth":"100%","buttonBackground":{"raw":"var(--brand-blue)"},"buttonTypography":{"font-size":"16px","font-weight":"700","color":{"hex":"#ffffff"},"transform":"none","font-style":"normal","line-height":"1.5","letter-spacing":"0","text-align":"center"},"buttonPadding":{"top":"10px","right":"15px","bottom":"10px","left":"15px"},"buttonMargin":{"top":"20px","right":"0","bottom":"0","left":"0"},"buttonBorder":{"style":"solid","color":{"hex":"#3898ec"},"radius":{"top":"8","right":"8","bottom":"8","left":"8"}},"fieldsLayout":"column","inputPadding":{"top":"8","right":"15","bottom":"8","left":"15"},"_margin":{"bottom":"20"}},"modified":1739460067,"user_id":1},{"id":"zscjcv","name":"form__footer","settings":{"_display":"flex","_direction":"row","_margin":{"top":"10"},"_width":"100%","_alignItems":"center","_justifyContent":"space-between","_typography":{"font-size":"14"}},"modified":1739460067,"user_id":1},{"id":"jehwzu","name":"link","settings":[],"modified":1739195946,"user_id":1}],"globalElements":[]}

Our notes on this component

Building a beautiful login form with Memberstack & Bricks Builder is really easy – and this is just one example of that.

Using the Bricks Builder add-on in the Memberstack plugin means Memberstack UI gets brought natively into Bricks Builder, and you can easily add new fields, change the styling, add social auth (like the Google button in this example), and more.

This component is a simple, but perfect way to see what’s possible with Memberstack + Bricks.

Similar components

Profile Picture
Vuyufambom Boris

International format number field

This script enhances phone input fields with auto-detected country codes, using the intl-tel-input library. It prevents users from modifying or deleting the country code, ensures consistent formatting, and supports dynamic country selection. GeoIP lookup sets the initial country code based on the user's location. Inspired by Julian Galluzzo
View now
Copy now
{"content":[{"id":"ujvndk","name":"form","parent":"asdejf","children":[],"settings":{"fields":[{"type":"tel","label":"Phone","placeholder":"Phone Number","id":"e69562","name":"phone","maxLength":"17"}],"submitButtonStyle":"primary","actions":["email"],"successMessage":"Message successfully sent. We will get back to you as soon as possible.","emailSubject":"Contact form request","emailTo":"admin_email","fromName":"PostPilot","emailErrorMessage":"Submission failed. Please reload the page and try to submit the form again.","htmlEmail":true,"mailchimpPendingMessage":"Please check your email to confirm your subscription.","mailchimpErrorMessage":"Sorry, but we could not subscribe you.","sendgridErrorMessage":"Sorry, but we could not subscribe you.","_margin":{"left":"auto","right":"auto"},"_width":"100%","_widthMax":"400","submitButtonWidth":"100%","submitButtonBackgroundColor":{"hex":"#6ab1f3","id":"vqhiae","name":"Color #1"},"submitButtonTypography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"submitButtonBorder":{"radius":{"top":"10","right":"10","bottom":"10","left":"10"}},"fieldMargin":{"bottom":"10"},"fieldBorder":{"radius":{"top":"10","right":"10","bottom":"10","left":"10"}},"emailContent":"{{all_fields}}"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://test.local","version":"1.12.3","globalClasses":[],"globalElements":[]}
Profile Picture
Julian Galluzzo

InvestKit Login Form

100% functional dark-mode login form for Bricks Builder, powered by the Memberstack plugin + Bricks addon!
View now
Copy now
{"content":[{"id":"twbyzg","name":"section","parent":0,"children":["jfexcu"],"settings":{"_cssGlobalClasses":["upnjxa"]}},{"id":"jfexcu","name":"container","parent":"twbyzg","children":["eeyljw"],"settings":[]},{"id":"eeyljw","name":"block","parent":"jfexcu","children":["mxusto","tmmkfn","oscaof"],"settings":{"_cssGlobalClasses":["dklljb"]},"label":"MS Form"},{"id":"mxusto","name":"heading","parent":"eeyljw","children":[],"settings":{"text":"Log in","_cssGlobalClasses":["nvamro"],"_margin":{"bottom":"30"}}},{"id":"tmmkfn","name":"ms-brcks-form","parent":"eeyljw","children":[],"settings":{"formType":"login","planAction":"add","fields":[{"type":"email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":"","id":"yvprag"},{"type":"password","placeholder":"Enter your password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":"","id":"vbummr"}],"fieldsGap":"20","_cssGlobalClasses":["sxoqzp"],"socialAuth":[{"id":"kjgcna","provider":"google","backgroundColor":{"color":{"hex":"#ffffff","rgb":"rgba(255, 255, 255, 0)","hsl":"hsla(0, 0%, 100%, 0)"}},"iconPosition":"left","padding":{"top":"15","bottom":"15","right":"20","left":"20"},"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"enabled":true,"iconSize":"15","border":{"radius":{"top":"7","right":"7","bottom":"7","left":"7"}}}]},"themeStyles":[]},{"id":"oscaof","name":"block","parent":"eeyljw","children":["rposwi","fiokfj"],"settings":{"_cssGlobalClasses":["bpdcxf"]},"label":"Under"},{"id":"rposwi","name":"text-basic","parent":"oscaof","children":[],"settings":{"text":"Forgot your password?"}},{"id":"fiokfj","name":"text-link","parent":"oscaof","children":[],"settings":{"text":"Reset password","_cssGlobalClasses":["mfxpnq"],"link":{"type":"external","url":"/forgot-password"}},"label":"Link"}],"source":"bricksCopiedElements","sourceUrl":"https://investkit-ui.local","version":"1.12.3","globalClasses":[{"id":"upnjxa","name":"section-default","settings":{"_background":{"color":{"hex":"#153236","id":"owxrer","name":"Color #1"}},"_typography":{"color":{"hex":"#ffffff","id":"xtezot","name":"Color #2"},"font-family":"Inter"},"_padding":{"bottom":"75","top":"75","left":"5%","right":"5%"}}},{"id":"dklljb","name":"msform","settings":{"_widthMax":"600","_margin":{"left":"auto","right":"auto"},"_padding":{"top":"75","right":"75","bottom":"75","left":"75"},"_background":{"color":{"hex":"#1a393e","id":"cvszxc","name":"Color #4"}},"_border":{"radius":{"top":"7","right":"7","bottom":"7","left":"7"}},"_padding:mobile_portrait":{"top":"40","right":"40","bottom":"40","left":"40"}},"modified":1742385998,"user_id":1},{"id":"nvamro","name":"h2","settings":{"_typography":{"font-family":"Bricolage Grotesque","font-size":"45","line-height":"50px","font-weight":"700"},"_typography:mobile_portrait":{"font-size":"40","line-height":"45px"}}},{"id":"sxoqzp","name":"msform__form","settings":{"_width":"100%","buttonWidth":"100% !important","buttonTypography":{"text-align":"center","font-family":"Bricolage Grotesque","color":{"hex":"#153236","id":"owxrer","name":"Color #1"}},"buttonBackground":{"hex":"#00fe4a","id":"darnpu","name":"Color #3"},"buttonPadding":{"top":"15","bottom":"15","right":"20","left":"20"},"buttonBorder":{"radius":{"top":"7","right":"7","bottom":"7","left":"7"}},"inputPadding":{"bottom":"7","top":"7","right":"20","left":"20"},"inputBackground":{"hex":"#ffffff","rgb":"rgba(255, 255, 255, 0.05)","hsl":"hsla(0, 0%, 100%, 0.05)"},"inputBorder":{"width":{"top":"1","bottom":"1","left":"1","right":"1"},"style":"solid","color":{"hex":"#ffffff","rgb":"rgba(255, 255, 255, 0.05)","hsl":"hsla(0, 0%, 100%, 0.05)"},"radius":{"top":"7","right":"7","bottom":"7","left":"7"}},"fieldsLayout":"column","fieldsGap":"5","buttonMargin":{"top":"20"},"_cssCustom":".social-login-separator span {\n background-color: #1a393e !important;\n}\n\n.social-login-separator:before {\n background-color: #ffffff26 !important;\n}"},"modified":1742387055,"user_id":1},{"id":"bpdcxf","name":"msform__under","settings":{"_margin":{"top":"20"},"_direction":"row","_justifyContent":"space-between","_alignItems":"center","_columnGap":"15","_rowGap":"15"},"modified":1742387497,"user_id":1},{"id":"mfxpnq","name":"msform__under-link","settings":{"_typography":{"font-family":"Bricolage Grotesque","font-weight":"500","color":{"hex":"#00fe4a","id":"darnpu","name":"Color #3"}},"_opacity:hover":"0.7","_cssTransition":"0.25s"},"modified":1742387497,"user_id":1}],"globalElements":[]}
Profile Picture
Julian Galluzzo

Basic Memberstack Signup Form

A nice simple white and blue signup form taken from the BricksBoard website!
View now
Copy now
{"content":[{"id":"qeyttc","name":"div","parent":"msncji","children":["qiengq","wvmqay","tegtqx","fnsdlc"],"settings":{"_cssGlobalClasses":["kamyuk"]},"label":"Form Wrapper"},{"id":"qiengq","name":"heading","parent":"qeyttc","children":[],"settings":{"text":"Create an account","tag":"h1","_cssGlobalClasses":["irfylw"]}},{"id":"wvmqay","name":"text-basic","parent":"qeyttc","children":[],"settings":{"text":"Create an account to create and publish your own Bricks components.","_cssGlobalClasses":["cztiyp"]},"label":"Paragraph"},{"id":"tegtqx","name":"ms-brcks-form","parent":"qeyttc","children":[],"settings":{"formType":"signup","planAction":"add","fields":[{"type":"email","label":"Email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":""},{"type":"password","label":"Password","placeholder":"Enter your password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":""}],"formWidth":"100%","fieldsGap":"20","inputBorder":{"style":"solid","color":{"hex":"#e5e5e5"},"radius":{"top-left":4,"top-right":4,"bottom-right":4,"bottom-left":4,"top":"8","right":"8","bottom":"8","left":"8"}},"selectBorder":{"width":{"top":1,"right":1,"bottom":1,"left":1},"style":"solid","color":{"hex":"#e5e5e5"},"radius":{"top-left":4,"top-right":4,"bottom-right":4,"bottom-left":4}},"buttonWidth":"100%","buttonBackground":{"raw":"var(--brand-blue)"},"buttonTypography":{"font-size":"16px","font-weight":"700","color":{"hex":"#ffffff"},"transform":"none","font-style":"normal","line-height":"1.5","letter-spacing":"0","text-align":"center"},"buttonPadding":{"top":"10px","right":"15px","bottom":"10px","left":"15px"},"buttonMargin":{"top":"20px","right":"0","bottom":"0","left":"0"},"buttonBorder":{"style":"solid","color":{"hex":"#3898ec"},"radius":{"top":"8","right":"8","bottom":"8","left":"8"}},"fieldsLayout":"column","inputPadding":{"top":"8","right":"15","bottom":"8","left":"15"},"_cssGlobalClasses":["yljqrq"],"socialAuth":[{"id":"jzypac","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"iconColor":{"raw":"var(--brand-blue)"},"border":{"radius":{"top":"8","right":"8","bottom":"8","left":"8"}},"padding":{"bottom":"15","top":"15","left":"20","right":"20"}}]}},{"id":"fnsdlc","name":"div","parent":"qeyttc","children":["wlztnm","drteyx"],"settings":{"_cssGlobalClasses":["zscjcv"]},"label":"Footer"},{"id":"wlztnm","name":"div","parent":"fnsdlc","children":["ewzpgh"],"settings":[]},{"id":"ewzpgh","name":"text-basic","parent":"wlztnm","children":[],"settings":{"text":"Have an account?"}},{"id":"drteyx","name":"div","parent":"fnsdlc","children":["hijepe"],"settings":[]},{"id":"hijepe","name":"text-link","parent":"drteyx","children":[],"settings":{"text":"Log in","_cssGlobalClasses":["jehwzu"],"link":{"type":"internal","postId":"161"}},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://bricksboard.com","version":"1.12.3","globalClasses":[{"id":"kamyuk","name":"form__wrapper","settings":{"_width":"100%","_widthMax":"500","_padding":{"bottom":"30","top":"30","left":"30","right":"30"},"_margin":{"left":"auto","right":"auto"},"_border":{"width":{"bottom":"1","top":"1","left":"1","right":"1"},"style":"solid","color":{"raw":"var(--border-light)"},"radius":{"top":"8","right":"8","bottom":"8","left":"8"}},"_boxShadow":{"values":{"offsetY":"2","offsetX":"0","blur":"5"},"color":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0.05)","hsl":"hsla(0, 0%, 0%, 0.05)"}},"_background":{"color":{"id":"acss_import_white","name":"white","raw":"var(--white)"}}}},{"id":"irfylw","name":"h1--small","settings":{"_typography":{"font-size":"30"}}},{"id":"cztiyp","name":"paragraph","settings":{"_margin":{"bottom":"15","top":"5"},"_typography":{"color":{"hex":"#787878","raw":"var(--text-light)"}}}},{"id":"yljqrq","name":"memberstack-form","settings":{"fields":[{"type":"email","label":"Email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":""},{"type":"password","label":"Password","placeholder":"Enter your password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":""}],"formWidth":"100%","fieldsGap":"20","inputBorder":{"style":"solid","color":{"hex":"#e5e5e5"},"radius":{"top-left":4,"top-right":4,"bottom-right":4,"bottom-left":4,"top":"8","right":"8","bottom":"8","left":"8"}},"selectBorder":{"width":{"top":1,"right":1,"bottom":1,"left":1},"style":"solid","color":{"hex":"#e5e5e5"},"radius":{"top-left":4,"top-right":4,"bottom-right":4,"bottom-left":4}},"buttonWidth":"100%","buttonBackground":{"raw":"var(--brand-blue)"},"buttonTypography":{"font-size":"16px","font-weight":"700","color":{"hex":"#ffffff"},"transform":"none","font-style":"normal","line-height":"1.5","letter-spacing":"0","text-align":"center"},"buttonPadding":{"top":"10px","right":"15px","bottom":"10px","left":"15px"},"buttonMargin":{"top":"20px","right":"0","bottom":"0","left":"0"},"buttonBorder":{"style":"solid","color":{"hex":"#3898ec"},"radius":{"top":"8","right":"8","bottom":"8","left":"8"}},"fieldsLayout":"column","inputPadding":{"top":"8","right":"15","bottom":"8","left":"15"},"_margin":{"bottom":"20"}},"modified":1739460067,"user_id":1},{"id":"zscjcv","name":"form__footer","settings":{"_display":"flex","_direction":"row","_margin":{"top":"10"},"_width":"100%","_alignItems":"center","_justifyContent":"space-between","_typography":{"font-size":"14"}},"modified":1739460067,"user_id":1},{"id":"jehwzu","name":"link","settings":[],"modified":1739195946,"user_id":1}],"globalElements":[]}