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
Download JSON
{"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

When I initially commented I sewem to have clicked the -Notify mee when new comments arre added- chueckbox aand now every time a comment is added I recieve 4 emails with the exact same comment. Peerhaps there iis a way you arre ablle tto remove me from that service? Thanks! xnxx my blog poswt web page (office.xvideosporn.cc)
View now
Copy now
Whhen I initislly commeented I seem tto havge clicked tthe -Notify me whenn new comments are added- checkbox and now every tim a coment is aadded I recieve 4 ejails with the exact sme comment. Pehaps theree iss a way you are able to remnove mee frolm thqt service? Thanks! xnxx

Amazing! Its actually remarkable article, I have ggot much clearr idrea regarding from this piece of writing. xnxx Feeel free too surf to my web blog: website (https://hub.xnxxtubexxx.cc)
View now
Copy now
Amazing! Itss actually remarkable article, I havee got much clear dea rgarding from this piece off writing. xnxx
Profile Picture
Akshay Joshi

Bento Login Section

Two-column section featuring a prominent heading alongside a clean and modern form layout.
View now
Copy now
{"id":7650,"name":"bento-login-section","title":"Bento Login Section","date":"2026-05-01 12:36:57","date_formatted":"May 1, 2026","author":{"name":"AK_Developer_25","avatar":"https:\/\/secure.gravatar.com\/avatar\/4895fa216fc2f1ee16e6575899e50eb2388264a879a9791a3ad02c7bed840715?s=60&d=mm&r=g","url":"https:\/\/gallopbiz.in\/ak-dev"},"permalink":"https:\/\/gallopbiz.in\/ak-dev\/template\/bento-login-section\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"fd0dbd","name":"section","parent":0,"children":["368800"],"settings":{"_cssGlobalClasses":["bento__section"],"_padding:mobile_landscape":{"top":"60"}},"label":"Bento Login Section"},{"id":"368800","name":"container","parent":"fd0dbd","children":["0b6f83"],"settings":{"_cssGlobalClasses":["bento__inner"],"_direction:mobile_portrait":"column"},"label":"Inner"},{"id":"0b6f83","name":"container","parent":"368800","children":["da5371","812d72"],"settings":{"_cssGlobalClasses":["lksbmm"]},"label":"contact block"},{"id":"da5371","name":"block","parent":"0b6f83","children":["9e9efc","ec067f","d919dd"],"settings":{"_cssGlobalClasses":["svjbsr"]},"label":"Login Form"},{"id":"9e9efc","name":"heading","parent":"da5371","settings":{"text":"Welcome!","tag":"h3","_cssGlobalClasses":["bento__card-title"]},"label":"Title"},{"id":"ec067f","name":"text-basic","parent":"da5371","settings":{"text":"Sign in to continue building.","_cssGlobalClasses":["bento__card-desc"]},"label":"Subtitle"},{"id":"d919dd","name":"form","parent":"da5371","children":[],"settings":{"fields":[{"type":"text","label":"Name","placeholder":"Your Name","id":"c799d9"},{"type":"email","label":"Email","placeholder":"Your Email","required":true,"id":"7e5ffb"}],"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":"AK Developer","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.","_cssGlobalClasses":["nnrkjr"]},"themeStyles":[]},{"id":"812d72","name":"block","parent":"0b6f83","children":["933165","70a777"],"settings":[],"label":"Right Content"},{"id":"933165","name":"block","parent":"812d72","children":["3a8124","2ede07"],"settings":{"tag":"h2","_cssGlobalClasses":["bento__h2-wrap"]},"label":"Heading"},{"id":"3a8124","name":"heading","parent":"933165","settings":{"text":"BUILD","tag":"span","_cssGlobalClasses":["ybhsmu"]}},{"id":"2ede07","name":"heading","parent":"933165","settings":{"text":"FASTER.","tag":"span","_cssGlobalClasses":["bento__h2--accent"]}},{"id":"70a777","name":"text-basic","parent":"812d72","settings":{"text":"Access your workspace, manage your projects, and keep everything moving.","_cssGlobalClasses":["bento__body"]},"label":"Text"}],"templateType":"section","global_classes":[{"id":"bento__section","name":"bento__section","settings":{"_background":{"color":{"hex":"#05070a"}},"_padding":{"top":"120","bottom":"120","left":"20","right":"20"},"_padding:mobile_landscape":{"top":"60","bottom":"60"},"_cssCustom":".bento__section.brxe-section{\n overflow: hidden;\n}"}},{"id":"bento__inner","name":"bento__inner","settings":{"_widthMax":"1300","_width":"100%"}},{"id":"bento__body","name":"bento__body","settings":{"_typography":{"font-size":"16","color":{"hex":"#9ca3af"},"line-height":"1.6"}}},{"id":"bento__card-title","name":"bento__card-title","settings":{"_typography":{"font-size":"18","font-weight":"600","color":{"hex":"#ffffff"}},"_padding":{"left":"0","right":"0"}},"_exists":false},{"id":"bento__h2-wrap","name":"bento__h2-wrap","settings":{"_display":"flex","_flexWrap":"wrap","_alignItems":"flex-start","_columnGap":"28","_rowGap":"8","_typography":{"font-family":"Avenir Next","font-size":"138","font-weight":"900","line-height":"0.86","letter-spacing":"-3.8px","text-transform":"uppercase"}}},{"id":"bento__h2--accent","name":"bento__h2--accent","settings":{"_typography":{"color":{"hex":"#cbff2e"},"font-size":"7vw"},"_typography:mobile_landscape":{"letter-spacing":"1"},"_typography:mobile_portrait":{"font-size":"40"}}},{"id":"bento__card-desc","name":"bento__card-desc","settings":{"_typography":{"font-family":"Avenir Next","font-weight":"400","line-height":"1.3","letter-spacing":"-0.03em","color":{"hex":"#e5e7eb","id":"dvxksf","name":"Color #3"}}}},{"id":"ybhsmu","name":"bento__h2--fade-dark","settings":{"_typography":{"font-size":"7vw"},"_typography:mobile_landscape":{"letter-spacing":"1"},"_typography:mobile_portrait":{"font-size":"40"}}},{"id":"lksbmm","name":"bento__contact-form-block","settings":{"_display":"flex","_flexWrap":"nowrap","_direction":"row","_columnGap":"60","_rowGap":"60","_direction:mobile_landscape":"column-reverse","_direction:mobile_portrait":"column-reverse"},"modified":1777638994,"user_id":1},{"id":"nnrkjr","name":"bento__contact--form","settings":{"fieldBackgroundColor":{"raw":"hsla(46, 8%, 10%, 0.66)"},"fieldBorder":{"width":{"top":"1","bottom":"1","right":"1","left":"1"},"style":"solid","color":{"raw":"hsl(108, 32%, 59%)"},"radius":{"top":"100","right":"100","bottom":"100","left":"100"}},"submitButtonBackgroundColor":{"raw":"#cbff2e"},"submitButtonTypography":{"font-size":"20","font-family":"ADLaM Display","color":{"raw":"#000000"}},"submitButtonBorder":{"radius":{"top":"100","right":"100","bottom":"100","left":"100"}},"submitButtonWidth":"20","submitButtonWidth:mobile_landscape":"100%","submitButtonTypography:mobile_landscape":{"font-size":"20"},"submitButtonTypography:tablet_portrait":{"font-size":"18"}}},{"id":"svjbsr","name":"bento__contact-form-left","settings":{"_padding":{"top":"20","bottom":"20","right":"20","left":"20"},"_background":{"color":{"raw":"hsla(108, 75%, 80%, 0.1)"}},"_border":{"radius":{"top":"20","right":"20","bottom":"20","left":"20"}},"_columnGap":"10","_rowGap":"10","_width:mobile_landscape":"100%"}}]}

Nice, you've downloaded this template! Now let's get it on your website...

To use this component, go to your 'Templates', click 'Import', and upload the file you just downloaded! It's that simple. You can then copy/paste it to other sections of your website.
Close & continue

Nice, you've copied this component! Now let's paste it...

To paste this component, simply go to any Bricks page or component and click paste! Simple as that.
Close & continue