{"content":[{"id":"ynmaft","name":"div","parent":"cgvtsk","children":["sjqbnk"],"settings":{"_display":"inline-block"}},{"id":"sjqbnk","name":"div","parent":"ynmaft","children":["sbskrh","hkercb"],"settings":{"_cssGlobalClasses":["cmrfcx"],"_attributes":[{"id":"kadzcz","name":"data-ms-auth-provider","value":"facebook"}],"tag":"a"}},{"id":"sbskrh","name":"code","parent":"sjqbnk","children":[],"settings":{"executeCode":true,"signature":"4ebaf362040337587dd4f5b6f0785716","user_id":1,"time":1739548015,"_width":"24px","_height":"24px","_margin":{"top":"1"},"code":"facebook-round-color"},"themeStyles":[]},{"id":"hkercb","name":"text-basic","parent":"sjqbnk","children":[],"settings":{"text":"Continue with Facebook","_typography":{"text-align":"right"},"_attributes":[{"id":"xsooko","name":"data-ms-auth-connected-text","value":"Disconnect from Facebook"}]}}],"source":"bricksCopiedElements","sourceUrl":"https://duncan1.local","version":"1.12.1","globalClasses":[{"id":"cmrfcx","name":"social-button","settings":{"_padding":{"bottom":".75em","top":".75em","left":"1.25em","right":"1.25em"},"_border":{"width":{"bottom":"1","top":"1","right":"1","left":"1"},"radius":{"top":"4px","right":"4px","bottom":"4px","left":"4px"},"color":{"hex":"#dadce0"},"style":"solid"},"_background":{"color":{"hex":"#ffffff"}},"_columnGap":"12px","_alignSelf":"center","_justifyContent":"flex-start","_alignItems":"center","_direction":"row","_display":"flex","_boxShadow":{"values":{"offsetY":"1","spread":"0","blur":"2"},"color":{"hex":"rgba(0,0,0,0.05)"}},"_border:hover":{"color":{"hex":"#d2e3fc"}},"_background:hover":{"color":{"hex":"#f8faff"}},"_boxShadow:hover":{"values":{"offsetY":"1","spread":"0","blur":"3"},"color":{"hex":"rgba(66,133,244,0.15)"}},"_cssTransition":"all 0.2s cubic-bezier(0.4, 0, 0.2, 1)","_margin":{"bottom":"1em"}},"modified":1739547206,"user_id":1}],"globalElements":[]}

Our notes on this component

If you want to add a Continue with Facebook button to your WordPress + Bricks Builder auth forms, this component is for you!

This particular Facebook Auth Button has a clean and simple UI which you’re probably quite used to seeing – and the good news is, your users probably will be, too!

This component works with the Memberstack WordPress Plugin.

This Facebook button isn’t made to be used with the native Memberstack login form – rather, this can be used with any HTML form which has Memberstack installed via attributes.

Similar components

Profile Picture
Julian Galluzzo

Simple Reset Password Form

Allow your members to reset their password with this simple and functional form. Requires the Memberstack plugin with the Bricks addon to work.
View now
Copy now
{"content":[{"id":"rqbgkz","name":"section","parent":0,"children":["ajgrvo"],"settings":{"_cssGlobalClasses":["jiaqax"]},"label":"MS Reset Password Form Section"},{"id":"ajgrvo","name":"container","parent":"rqbgkz","children":["kwlyzt"],"settings":{"_cssGlobalClasses":["itqvlm"]}},{"id":"kwlyzt","name":"block","parent":"ajgrvo","children":["uxdbuh"],"settings":{"_cssGlobalClasses":["zfxryi"]},"label":"Form Block"},{"id":"uxdbuh","name":"ms-brcks-form","parent":"kwlyzt","children":[],"settings":{"formType":"reset-password","planAction":"add","fields":[{"type":"password","label":"New Password","placeholder":"Enter a new password","customFieldId":"password","width":"full","maxLength":"","value":"","id":"mbdgqz","required":true},{"type":"number","placeholder":"Check your inbox and enter the code we sent you","required":true,"customFieldId":"token","width":"full","maxLength":"","value":"","id":"ntvtbj","label":"6 Digit Code"}],"fieldsGap":"20","_cssGlobalClasses":["bcxmmp"],"socialAuth":[{"id":"tetwok","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"iconPosition":"left","border":{"radius":{"top":"5","right":"5","bottom":"5","left":"5"}}}]},"themeStyles":{}}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.12.1","globalClasses":[{"id":"jiaqax","name":"section-padding","settings":{"_padding":{"top":"100","bottom":"100","left":"5%","right":"5%"}}},{"id":"itqvlm","name":"max-width-small","settings":{"_widthMax":"600"}},{"id":"zfxryi","name":"ms-form__block","settings":{"_padding":{"bottom":"25","top":"25","left":"30","right":"30"},"_border":{"width":{"bottom":"1","top":"1","left":"1","right":"1"},"style":"solid","color":{"hex":"#d9f0e9","id":"btrvhf","name":"Color #6"},"radius":{"top":"5","right":"5","bottom":"5","left":"5"}}}},{"id":"bcxmmp","name":"ms-form","settings":{"_width":"100%","fieldsLayout":"column-reverse","buttonWidth":"100%","buttonTypography":{"text-align":"center","font-weight":"600","color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"buttonPadding":{"bottom":"12.5","top":"12.5","left":"25","right":"25"},"buttonMargin":{"top":"30"},"buttonBackground":{"hex":"#110080"},"buttonBorder":{"radius":{"top":"5","right":"5","bottom":"5","left":"5"}},"inputBorder":{"radius":{"top":"5","right":"5","bottom":"5","left":"5"}}},"modified":1741013056,"user_id":1}],"globalElements":[]}
Profile Picture
Julian Galluzzo

Simple Forgot Password Form

Simple & functional form for members who forgot their password. Requires the Memberstack plugin + Bricks addon to work.
View now
Copy now
{"content":[{"id":"itgwvd","name":"section","parent":0,"children":["areswh"],"settings":{"_cssGlobalClasses":["jiaqax"]},"label":"MS Forgot Password Form Section"},{"id":"areswh","name":"container","parent":"itgwvd","children":["snjthy"],"settings":{"_cssGlobalClasses":["itqvlm"]}},{"id":"snjthy","name":"block","parent":"areswh","children":["bobrtb"],"settings":{"_cssGlobalClasses":["zfxryi"]},"label":"Form Block"},{"id":"bobrtb","name":"ms-brcks-form","parent":"snjthy","children":[],"settings":{"formType":"forgot-password","planAction":"add","fields":[{"type":"email","label":"Email","placeholder":"Enter your email","customFieldId":"email","width":"full","maxLength":"","value":"","id":"mbdgqz"}],"fieldsGap":"20","_cssGlobalClasses":["bcxmmp"],"socialAuth":[{"id":"tetwok","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"iconPosition":"left","border":{"radius":{"top":"5","right":"5","bottom":"5","left":"5"}}}]},"themeStyles":{}}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.12.1","globalClasses":[{"id":"jiaqax","name":"section-padding","settings":{"_padding":{"top":"100","bottom":"100","left":"5%","right":"5%"}}},{"id":"itqvlm","name":"max-width-small","settings":{"_widthMax":"600"}},{"id":"zfxryi","name":"ms-form__block","settings":{"_padding":{"bottom":"25","top":"25","left":"30","right":"30"},"_border":{"width":{"bottom":"1","top":"1","left":"1","right":"1"},"style":"solid","color":{"hex":"#d9f0e9","id":"btrvhf","name":"Color #6"},"radius":{"top":"5","right":"5","bottom":"5","left":"5"}}}},{"id":"bcxmmp","name":"ms-form","settings":{"_width":"100%","fieldsLayout":"column-reverse","buttonWidth":"100%","buttonTypography":{"text-align":"center","font-weight":"600","color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"buttonPadding":{"bottom":"12.5","top":"12.5","left":"25","right":"25"},"buttonMargin":{"top":"30"},"buttonBackground":{"hex":"#110080"},"buttonBorder":{"radius":{"top":"5","right":"5","bottom":"5","left":"5"}},"inputBorder":{"radius":{"top":"5","right":"5","bottom":"5","left":"5"}}},"modified":1741013056,"user_id":1}],"globalElements":[]}
Profile Picture
Julian Galluzzo

Simple Profile Form

Allow your members to edit their profile with this simple form. Requires the Memberstack plugin + Bricks addon to work. Will not be visible from the front end unless the member is logged in.
View now
Copy now
{"content":[{"id":"itgwvd","name":"section","parent":0,"children":["areswh"],"settings":{"_cssGlobalClasses":["jiaqax"]},"label":"MS Profile Form Section"},{"id":"areswh","name":"container","parent":"itgwvd","children":["snjthy"],"settings":{"_cssGlobalClasses":["itqvlm"]}},{"id":"snjthy","name":"block","parent":"areswh","children":["bobrtb"],"settings":{"_cssGlobalClasses":["zfxryi"]},"label":"Form Block"},{"id":"bobrtb","name":"ms-brcks-form","parent":"snjthy","children":[],"settings":{"formType":"profile","planAction":"add","fields":[{"type":"text","label":"Last name","placeholder":"Enter your last name","customFieldId":"last-name","width":"full","maxLength":"","value":"","id":"kapmwj"},{"type":"text","label":"First name","placeholder":"Enter your first name","customFieldId":"first-name","width":"full","maxLength":"","value":"","id":"hpqpwv"},{"type":"email","label":"Email","placeholder":"Enter your email","customFieldId":"email","width":"full","maxLength":"","value":"","id":"mbdgqz"}],"fieldsGap":"20","_cssGlobalClasses":["bcxmmp"],"socialAuth":[{"id":"tetwok","provider":"google","enabled":true,"icon":{"library":"fontawesomeBrands","icon":"fab fa-google"},"iconPosition":"left","border":{"radius":{"top":"5","right":"5","bottom":"5","left":"5"}}}]},"themeStyles":{}}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.12.1","globalClasses":[{"id":"jiaqax","name":"section-padding","settings":{"_padding":{"top":"100","bottom":"100","left":"5%","right":"5%"}}},{"id":"itqvlm","name":"max-width-small","settings":{"_widthMax":"600"}},{"id":"zfxryi","name":"ms-form__block","settings":{"_padding":{"bottom":"25","top":"25","left":"30","right":"30"},"_border":{"width":{"bottom":"1","top":"1","left":"1","right":"1"},"style":"solid","color":{"hex":"#d9f0e9","id":"btrvhf","name":"Color #6"},"radius":{"top":"5","right":"5","bottom":"5","left":"5"}}}},{"id":"bcxmmp","name":"ms-form","settings":{"_width":"100%","fieldsLayout":"column-reverse","buttonWidth":"100%","buttonTypography":{"text-align":"center","font-weight":"600","color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"buttonPadding":{"bottom":"12.5","top":"12.5","left":"25","right":"25"},"buttonMargin":{"top":"30"},"buttonBackground":{"hex":"#110080"},"buttonBorder":{"radius":{"top":"5","right":"5","bottom":"5","left":"5"}},"inputBorder":{"radius":{"top":"5","right":"5","bottom":"5","left":"5"}}},"modified":1741013056,"user_id":1}],"globalElements":[]}