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

Profile Picture
Joe Warren

Contact Form

Contact form with background icons
View now
Copy now
{"content":[{"id":"bxfslx","name":"section","parent":0,"children":["fkbrnc"],"settings":{"_cssGlobalClasses":["qbqcae"]}},{"id":"fkbrnc","name":"container","parent":"bxfslx","children":["dfblcn","kydlpa"],"settings":{"_cssGlobalClasses":["hqnmuq"]}},{"id":"dfblcn","name":"block","parent":"fkbrnc","children":["eikzhz"],"settings":{"_cssGlobalClasses":["chaykm"]},"label":"Image Wrapper"},{"id":"eikzhz","name":"image","parent":"dfblcn","children":[],"settings":{"_cssGlobalClasses":["ctvafg"],"image":{"id":419,"filename":"Rectangle-82.png","size":"large","full":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Rectangle-82.png","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Rectangle-82-535x1024.png"},"tag":"figure"},"themeStyles":{}},{"id":"kydlpa","name":"block","parent":"fkbrnc","children":["schrcl","qwqexg"],"settings":{"_cssGlobalClasses":["dyystb"]},"label":"Form Wrapper"},{"id":"schrcl","name":"block","parent":"kydlpa","children":["xdcygo"],"settings":{"_cssGlobalClasses":["otqlxo"],"_alignItems":"flex-start"},"label":"Heading Block"},{"id":"xdcygo","name":"heading","parent":"schrcl","children":[],"settings":{"text":"You may also fill out the form below and we will respond as quickly as possible.","_cssGlobalClasses":["nqfpij"],"tag":"h2","_typography":{"text-align":"left"},"_typography:mobile_landscape":{"text-align":"center","text-wrap":"balance"}}},{"id":"qwqexg","name":"form","parent":"kydlpa","children":[],"settings":{"fields":[{"type":"text","label":"Full Name","placeholder":"Full Name","id":"dd4428"},{"type":"email","label":"Email","placeholder":"Email","required":true,"id":"4077a0","width":"50","width:mobile_portrait":"100"},{"type":"tel","label":"Phone Number","placeholder":"Phone Number","required":true,"id":"yhqtui","width":"50","width:mobile_portrait":"100"},{"type":"textarea","label":"Message","placeholder":"Your Message","required":true,"id":"f741e2"}],"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":"darkturquoise-cormorant-212243.hostingersite.com","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":["umtdea"],"submitButtonText":"Submit","submitButtonIcon":{"library":"svg","svg":{"id":420,"filename":"Submit.svg","url":"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Submit.svg"}},"submitButtonIconPosition":"left"},"themeStyles":{}}],"source":"bricksCopiedElements","sourceUrl":"https://darkturquoise-cormorant-212243.hostingersite.com","version":"1.12.3","globalClasses":[{"id":"qbqcae","name":"section-padding-large","settings":{"_padding":{"top":"100","bottom":"100"},"_background":{"color":{"hex":"#fff9f6","id":"rmkfeg","name":"Color #3"}}}},{"id":"hqnmuq","name":"form__grid","settings":{"_display":"grid","_gridTemplateColumns":"1fr 2fr","_gridGap":"40","_gridTemplateColumns:mobile_landscape":"1fr","_gridGap:tablet_portrait":"30"}},{"id":"chaykm","name":"form__image-wrapper","settings":{"_display:mobile_landscape":"none"}},{"id":"ctvafg","name":"form__image","settings":{"_border":{"radius":{"bottom":"200"}},"_height":"100%","_objectFit":"cover","_height:mobile_landscape":"7rem","_width:mobile_landscape":"100%"}},{"id":"dyystb","name":"form__wrapper","settings":{"_order:mobile_landscape":"-1"}},{"id":"otqlxo","name":"heading__block","settings":{"_alignItems":"center","_rowGap":"20","_margin":{"bottom":"70"}},"modified":1748516252,"user_id":1},{"id":"nqfpij","name":"h2","settings":{"_typography":{"color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"},"font-size":"36","font-weight":"800","text-align":"center"},"_typography:mobile_portrait":{"font-size":"30"},"_typography:tablet_portrait":{"font-size":"36"}},"modified":1744569912,"user_id":1,"_exists":false},{"id":"umtdea","name":"form","settings":{"fieldMargin":{"right":"16"},"_cssCustom":".form input, textarea {\n background-size: 1em;\n background-repeat: no-repeat;\n background-position-x: .8em;\n background-position-y: center;\n padding-left: 2.5em;\n}\n\n.form input[type=\"text\"] {\n background-image: url(\"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Vector.svg\");\n\n}\n\n.form input[type=\"email\"] {\n background-image: url(\"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/envelope.svg\");\n\n}\n\n.form input[type=\"tel\"] {\n background-image: url(\"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Vector-2.svg\");\n\n}\n\n.form textarea {\n background-image: url(\"https://darkturquoise-cormorant-212243.hostingersite.com/wp-content/uploads/2025/05/Vector-1.svg\");\n\tbackground-position-y: 1.1em;\n min-height: 15em;\n}\n","fieldBackgroundColor":{"hex":"#fee0d9","id":"keotxb","name":"Color #6"},"fieldBorder":{"style":"none","radius":{"top":"20","right":"20","bottom":"20","left":"20"}},"fieldTypography":{"color":{"hex":"#512729","id":"edrsok","name":"Color #1"}},"placeholderTypography":{"color":{"hex":"#512729","rgb":"rgba(81, 39, 41, 0.59)","hsl":"hsla(357, 35%, 24%, 0.59)"}},"submitButtonBackgroundColor":{"hex":"#ff835a","id":"kgysyt","name":"Color #4"},"submitButtonWidth":"40","submitButtonBorder":{"radius":{"right":"20"}},"horizontalAlignFields:mobile_landscape":"center","submitButtonWidth:mobile_landscape":"50","fieldMargin:mobile_portrait":{"right":"0","left":"0"},"fieldMargin:mobile_landscape":{"right":"8","left":"8"}},"modified":1748517142,"user_id":1}],"globalElements":[]}
Profile Picture
Akshay Joshi

Metric kit – Contact Form

Two-column layout with contact form
View now
Copy now
{"id":706,"name":"contact-form-new","title":"Contact Form New","date":"2025-05-22 20:00:16","date_formatted":"May 22, 2025","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\/contact-form-new\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"b3a47a","name":"section","parent":0,"children":["1b537f"],"settings":{"_cssGlobalClasses":["vneohb"]},"label":"Contact Form New"},{"id":"1b537f","name":"container","parent":"b3a47a","children":["dde1f5","330c22"],"settings":{"_cssGlobalClasses":["qresdr","iealwn"],"_direction":"row"}},{"id":"dde1f5","name":"block","parent":"1b537f","children":["9b44b6","64b8d6"],"settings":{"_cssGlobalClasses":["yzkxlh"]},"label":"Column"},{"id":"9b44b6","name":"block","parent":"dde1f5","children":["e2b4d4","12ca8c"],"settings":{"_cssGlobalClasses":["imdzoq"]}},{"id":"e2b4d4","name":"heading","parent":"9b44b6","children":[],"settings":{"text":"Get in touch","_cssGlobalClasses":["veazgd"],"tag":"h1"}},{"id":"12ca8c","name":"text-basic","parent":"9b44b6","children":[],"settings":{"text":"If you're spending $25k+ monthly on paid social and want to see better results, this is the fastest way to get started.","_cssGlobalClasses":["sjfkow"]}},{"id":"64b8d6","name":"block","parent":"dde1f5","children":["a93623","280742"],"settings":{"_cssGlobalClasses":["imdzoq"]}},{"id":"a93623","name":"text-basic","parent":"64b8d6","children":[],"settings":{"text":"We power paid social growth for innovative companies","_cssGlobalClasses":["opglel"]}},{"id":"280742","name":"container","parent":"64b8d6","children":["9802d6","dd3b4f","028970","c11bd5","9706fa","829100"],"settings":{"_cssGlobalClasses":["ffswpe"]},"label":"Logo Container"},{"id":"9802d6","name":"image","parent":"280742","children":[],"settings":{"_cssGlobalClasses":["sonjbr"],"image":{"id":172,"filename":"Logo.svg.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg.svg"}},"themeStyles":[]},{"id":"dd3b4f","name":"image","parent":"280742","children":[],"settings":{"_cssGlobalClasses":["sonjbr"],"image":{"id":188,"filename":"Logo.svg-1.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg-1.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg-1.svg"}},"themeStyles":[]},{"id":"028970","name":"image","parent":"280742","children":[],"settings":{"_cssGlobalClasses":["sonjbr"],"image":{"id":186,"filename":"Logo.svg-2.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg-2.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg-2.svg"}},"themeStyles":[]},{"id":"c11bd5","name":"image","parent":"280742","children":[],"settings":{"_cssGlobalClasses":["sonjbr"],"image":{"id":185,"filename":"Logo.svg-3.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg-3.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Logo.svg-3.svg"}},"themeStyles":[]},{"id":"9706fa","name":"image","parent":"280742","children":[],"settings":{"_cssGlobalClasses":["sonjbr"],"image":{"id":187,"filename":"webflow_logo.svg.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/webflow_logo.svg.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/webflow_logo.svg.svg"}},"themeStyles":[]},{"id":"829100","name":"image","parent":"280742","children":[],"settings":{"_cssGlobalClasses":["sonjbr"],"image":{"id":189,"filename":"Group.svg","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Group.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/04\/Group.svg"}},"themeStyles":[]},{"id":"330c22","name":"block","parent":"1b537f","children":["b7bfd6"],"settings":{"_cssGlobalClasses":["yzkxlh"]},"label":"Column"},{"id":"b7bfd6","name":"form","parent":"330c22","children":[],"settings":{"fields":[{"type":"text","placeholder":"Full Name","id":"5126d0","label":"Name"},{"type":"email","placeholder":"Work Email","required":true,"id":"817e57","label":"Email"},{"type":"text","label":"Company","placeholder":"Company","id":"civnqm"},{"type":"textarea","label":"Message","placeholder":"Message","id":"nxoene"},{"type":"checkbox","label":"Term","id":"nmpdff","options":"I agree that Metric can store my submitted information as outlined in our Privacy Policy. I understand I can request deletion of my data at any time via support@metric.com."}],"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":["pcseqr"],"submitButtonText":"Send message"},"themeStyles":[]}],"templateType":"section","global_classes":[{"id":"veazgd","name":"metric-hero__heading","settings":{"_typography":{"font-size":"72","font-weight":"500","color":{"hex":"#171717"},"line-height":"1.2"},"_typography:mobile_landscape":{"font-size":"48"},"_typography:mobile_portrait":{"font-size":"40"}}},{"id":"opglel","name":"metric-hero__textarea","settings":{"_typography":{"font-size":"20","color":{"hex":"#4c4c4c"}},"_typography:mobile_landscape":{"font-size":"20"},"_typography:mobile_portrait":{"font-size":"16"}}},{"id":"vneohb","name":"metric-default-section","settings":{"_padding":{"top":"100","bottom":"100","left":"5%","right":"5%"},"_padding:mobile_landscape":{"top":"80","bottom":"80"},"_padding:mobile_portrait":{"top":"60","bottom":"60"}}},{"id":"qresdr","name":"metric-default-container","settings":{"_width":"1728","_rowGap":"45"}},{"id":"ffswpe","name":"metric-contact__logo-block","settings":{"_flexWrap":"wrap","_direction":"row","_display":"grid","_gridTemplateColumns":"repeat(4,1fr)","_gridGap":"24","_gridTemplateColumns:mobile_portrait":"repeat(3,1fr)"},"modified":1747898772,"user_id":1},{"id":"yzkxlh","name":"metric-contact__col","settings":{"_direction":"column","_rowGap":"62","_width":"50%","_width:mobile_landscape":"100%"}},{"id":"sjfkow","name":"metric-contact__col-text","settings":{"_typography":{"font-size":"32","line-height":"1.2"},"_typography:mobile_landscape":{"font-size":"28"},"_typography:mobile_portrait":{"font-size":"24"}}},{"id":"sonjbr","name":"metric-contact__logos","settings":[],"modified":1747898772,"user_id":1},{"id":"pcseqr","name":"metric-contact__form","settings":{"submitButtonBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"_cssCustom":".metric-contact__form button.bricks-button {\n padding-top: 8px;\n padding-right: 24px;\n padding-bottom: 8px;\n padding-left: 24px;\n min-height: 48px;\n border-radius: 50px;\n background-color: #fff;\n font-size: 16px;\n font-weight: 500;\n color: #171717;\n}\n\n.metric-contact__form span.justterm a {\n color: #171717;\n text-decoration: underline;\n} \n\n.metric-contact__form ul.options-wrapper {\n padding-bottom: 24px;\n border-bottom: 1px solid #fff;\n margin-bottom: 0px;\n}\n\n.metric-contact__form input {\n margin-bottom: 72px;\n background-color: #ffffff; \/* changed from black to white *\/\n color: #000000; \/* input text color *\/\n}\n\n.metric-contact__form input::placeholder {\n color: #000000; \/* placeholder color *\/\n}\n\n.metric-contact__form .justlabel {\n font-size: 20px;\n}\n\n.metric-contact__form ul.options-wrapper li {\n color: #909090;\n font-size: 17px;\n margin-bottom: 16px;\n}\n\n\/* Container UL Styling *\/\n\n\/* Hide the default checkbox *\/\n.metric-contact__form .options-wrapper input[type=\"checkbox\"] {\n display: none;\n}\n\n\/* Style the label as a block and align checkbox visually *\/\n.metric-contact__form .options-wrapper label {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n\n color: #999999;\n cursor: pointer;\n padding: 10px;\n\n}\n\n\/* Custom checkbox box *\/\n.metric-contact__form .options-wrapper input[type=\"checkbox\"] + label::before {\n content: \"\";\n display: inline-block;\n width: 24px;\n height: 25px;\n background-color: #000;\n border-radius: 2px;\n flex-shrink: 0;\n position: relative;\n margin-top:8px\n}\n\n\/* Checkmark when checked *\/\n.metric-contact__form .options-wrapper input[type=\"checkbox\"]:checked + label::before {\n content: \"\u2713\";\n font-size: 14px;\n color: white;\n text-align: center;\n line-height: 25px;\n}\n\n.metric-contact__form span.justterm {\n color: #4c4c4c;\n}\n\n\n.metric-contact__form textarea::placeholder {\n color: #171717;\n}\n.metric-contact__form textarea{\n margin-bottom: 72px;\n}","fieldBorder":{"width":{"bottom":"1","top":"0","right":"0","left":"0"},"style":"solid"},"fieldMargin":{"bottom":"0"},"submitButtonBackgroundColor":{"hex":"#000000"},"submitButtonTypography":{"color":{"hex":"#ffffff"}},"fieldTypography":{"font-size":"20","color":{"hex":"#171717"}},"fieldTypography:mobile_portrait":{"font-size":"16"},"fieldPadding":{"bottom":"10"}}},{"id":"iealwn","name":"metric-contact__container","settings":{"_columnGap":"90","_rowGap:mobile_landscape":"90"}},{"id":"imdzoq","name":"metric-contact__block","settings":{"_rowGap":"30"}}]}
Profile Picture
Julian Galluzzo

Log In Form (Red & Beige)

Memberstack-powered login form with working Google Auth from our 2025 Online Course Template.
View now
Copy now
{"content":[{"id":"ccfhme","name":"section","parent":0,"children":["xzuswg"],"settings":{},"label":"Auth"},{"id":"xzuswg","name":"container","parent":"ccfhme","children":["yelrtm"],"settings":{}},{"id":"yelrtm","name":"block","parent":"xzuswg","children":["pmijpp","bfgzkm","yqaihj"],"settings":{"_cssGlobalClasses":["lhfzbg"]}},{"id":"pmijpp","name":"heading","parent":"yelrtm","children":[],"settings":{"text":"Log in","_cssGlobalClasses":["ziixdz"]}},{"id":"bfgzkm","name":"text-basic","parent":"yelrtm","children":[],"settings":{"text":"If you don't have an account, you can click here to sign up. If you forgot your password, you can click here to reset your password.","_cssGlobalClasses":["lxltzy"]},"label":"Paragraph"},{"id":"yqaihj","name":"ms-brcks-form","parent":"yelrtm","children":[],"settings":{"formType":"login","planAction":"add","fields":[{"type":"email","placeholder":"Enter your email","required":true,"customFieldId":"email","width":"full","maxLength":"","value":"","id":"lqtjqj"},{"type":"password","placeholder":"Enter your password","required":true,"customFieldId":"password","width":"full","maxLength":"","value":"","id":"ehrbua"}],"_cssGlobalClasses":["idrdai"],"socialAuth":[{"id":"okkrso","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"padding":{"bottom":"17","top":"17","left":"20","right":"20"},"border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"style":"solid","width":{"top":"1","right":"1","bottom":"1","left":"1"},"color":{"raw":"var(--border-base)"}}}],"fieldsLayout":"column"},"themeStyles":[]}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"lhfzbg","name":"auth__block","settings":{"_width":"100%","_widthMax":"500","_margin":{"left":"auto","right":"auto"},"_background":{"color":{"hex":"#ffffff"}},"_padding":{"left":"30","right":"30","bottom":"20","top":"45"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"top":"40","right":"40","bottom":"40","left":"40"}},"_alignItems":"flex-start"}},{"id":"ziixdz","name":"auth__heading","settings":{"_margin":{"bottom":"20"},"_typography":{"font-size":"40","line-height":"1"}},"modified":1745235104,"user_id":1},{"id":"lxltzy","name":"auth__paragraph","settings":{"_margin":{"bottom":"40"},"_cssCustom":".link {\n text-decoration: underline;\n}","_typography":{"color":{"hex":"#696969"}}},"modified":1745235104,"user_id":1},{"id":"idrdai","name":"auth__form","settings":{"_width":"100%","buttonWidth":"100%","buttonTypography":{"text-align":"center","color":{"hex":"#ffffff"},"font-size":"18"},"buttonBackground":{"raw":"var(--brand-color)"},"buttonPadding":{"bottom":"16","top":"16","left":"20","right":"20"},"buttonMargin":{"top":"15"},"buttonBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}},"inputBorder":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid"},"inputPadding":{"left":"20","right":"20","bottom":"6","top":"6"},"fieldsLayout":"column","fieldsGap":"15"},"modified":1745235104,"user_id":1}],"globalElements":[]}