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
Akshay Joshi

Estatein kit – Form 2

Multi-field form section
View now
Copy now
{"id":2259,"name":"estatein-kit-form-section","title":"Estatein kit - Form section","date":"2025-07-14 20:08:06","date_formatted":"July 14, 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\/estatein-kit-form-section\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"f55174","name":"section","parent":0,"children":["09ab85","8351c1"],"settings":{"_cssGlobalClasses":["qcvyzw","qntgjc"]},"label":"Form section"},{"id":"09ab85","name":"container","parent":"f55174","children":["c8b78d"],"settings":{"_cssGlobalClasses":["wglmeq"]}},{"id":"c8b78d","name":"block","parent":"09ab85","children":["1a1e14","dce988","cb36b3"],"settings":{"_cssGlobalClasses":["mcgbpw"]}},{"id":"1a1e14","name":"svg","parent":"c8b78d","children":[],"settings":{"file":{"id":1018,"filename":"Abstract-Design.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/05\/Abstract-Design.svg"}},"themeStyles":[]},{"id":"dce988","name":"heading","parent":"c8b78d","children":[],"settings":{"text":"Let's Make it Happen","tag":"h2","_cssGlobalClasses":["mvihif"]}},{"id":"cb36b3","name":"text-basic","parent":"c8b78d","children":[],"settings":{"text":"Ready to take the first step toward your dream property? Fill out the form below, and our real estate wizards will work their magic to find your perfect match. Don't wait; let's embark on this exciting journey together.","_cssGlobalClasses":["sfstmx"]}},{"id":"8351c1","name":"container","parent":"f55174","children":["ae0152","b55f95"],"settings":{"_cssGlobalClasses":["wglmeq","bbuhmh"]}},{"id":"ae0152","name":"form","parent":"8351c1","children":[],"settings":{"fields":[{"type":"text","label":"First Name","placeholder":"First Name","id":"117be5","width":"25","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"text","label":"Last Name","placeholder":"Last Name","id":"hqkbor","width":"25","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"email","label":"Email","placeholder":"Email","id":"xfbwkg","width":"25","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"text","label":"Phone","placeholder":"Phone","id":"hhdqqt","width":"25","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"select","label":"Prefered Location","placeholder":"Select Location","id":"idbvuv","options":"Example 1\nExample 2\nExample 3","width":"25","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"select","label":"Property Type","placeholder":"Select Property Type","id":"geqmvt","options":"Example 1\nExample 2\nExample 3","width":"25","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"select","label":"No. of Bathrooms","placeholder":"Select no. of Bathrooms","id":"slqkrp","options":"Example 1\nExample 2\nExample 3","width":"25","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"select","label":"No. of Bedrooms","placeholder":"Select no. of Bedrooms","id":"tkbahw","options":"Example 1\nExample 2\nExample 3","width":"25","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"select","label":"Budget","placeholder":"Select Budget","id":"dkuhmc","options":"Example 1\nExample 2\nExample 3","width":"50","width:mobile_landscape":"100","width:tablet_portrait":"100"},{"type":"text","label":"Preferred Contact Method","placeholder":"Phone","id":"toxbkh","width":"25","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"email","placeholder":"Email","id":"qrqkug","width":"25","width:mobile_landscape":"100","label":" Your Email","width:tablet_portrait":"50"},{"type":"textarea","label":"Message","placeholder":"Enter your Message here..","id":"dbcane"},{"type":"checkbox","id":"jkclfy","options":"I agree with Terms of Use and Privacy Policy","width":"80","width:mobile_landscape":"100"}],"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":["rmudwr"],"showLabels":true,"submitButtonText":"Send Your Message"},"themeStyles":[]},{"id":"b55f95","name":"code","parent":"8351c1","children":[],"settings":{"javascriptCode":"\/\/ Phone input\nconst phoneInput = document.querySelector('input[name=\"form-field-toxbkh\"]');\nif (phoneInput) {\n phoneInput.parentElement.classList.add('input-phone-icon');\n}\n\n\/\/ Email input\nconst emailInput = document.querySelector('input[name=\"form-field-qrqkug\"]');\nif (emailInput) {\n emailInput.parentElement.classList.add('input-email-icon');\n}\n\n\/\/ Checkbox input\nconst checkboxInput = document.querySelector('input[name=\"form-field-jkclfy[]\"]');\nif (checkboxInput) {\n checkboxInput.parentElement.classList.add('input-checkbox-icon');\n}\n","executeCode":true,"cssCode":".input-phone-icon input {\n background: url(https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/07\/Icon-5.svg) no-repeat left center !important;\n background-size: 20px !important;\n padding-left: 40px;\n background-repeat: no-repeat !important;\n background-position-x: 10px !important;\n background-color: #000000 !important;\n}\n\/************email icon***********\/\n\n.input-email-icon input {\n background: url(https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/07\/Icon-6.svg) no-repeat left center !important;\n background-size: 20px !important;\n padding-left: 40px;\n background-repeat: no-repeat !important;\n background-position-x: 10px !important;\n background-color: #000000 !important;\n}"},"label":"Js code to add class on input ","themeStyles":[]}],"templateType":"section","global_classes":[{"id":"qcvyzw","name":"estatein-default-section","settings":{"_padding":{"top":"100","bottom":"100","left":"8%","right":"8%"},"_padding:tablet_portrait":{"top":"75","bottom":"75","left":"5%","right":"5%"},"_background":{"color":{"hex":"#141414"}}},"modified":1749740692,"user_id":1},{"id":"wglmeq","name":"estatein-default-container","settings":{"_direction:mobile_landscape":"row","_width":"1596"},"modified":1749711177,"user_id":1},{"id":"mvihif","name":"estatein-h2-whte","settings":{"_typography":{"color":{"hex":"#ffffff"},"font-size":"48","font-weight":"600"},"_typography:mobile_landscape":{"font-size":"28"}},"modified":1748526561,"user_id":1},{"id":"sfstmx","name":"estatein__body-text","settings":{"_typography":{"color":{"hex":"#999999"},"font-size":"clamp(16px, calc(16px + (4 * ((100vw - 1440px) \/ 480))), 18px);"},"_typography:mobile_landscape":{"font-size":"14"},"_typography:tablet_portrait":{"font-size":"16"}}},{"id":"mcgbpw","name":"estatein_gap-xs","settings":{"_rowGap":"clamp(10px, calc(10px + 4 * ((100vw - 1440px) \/ 480)), 14px);"}},{"id":"rmudwr","name":"estatein-property__form","settings":{"fieldBackgroundColor":{"hex":"#000000"},"fieldBorder":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#262626"},"radius":{"top":"8","right":"8","bottom":"8","left":"8"}},"labelTypography":{"color":{"hex":"#ffffff"},"font-size":"clamp(15px, calc(15px + 5 * ((100vw - 1440px) \/ 480)), 20px);","text-transform":"none"},"placeholderTypography":{"color":{"hex":"#666666"},"font-size":"clamp(14px, calc(14px + 4 * ((100vw - 1440px) \/ 480)), 18px);"},"submitButtonBackgroundColor":{"hex":"#703bf7"},"submitButtonTypography":{"color":{"hex":"#ffffff"}},"labelTypography:mobile_landscape":{"font-size":"16"},"placeholderTypography:mobile_landscape":{"font-size":"14"},"fieldPadding":{"top":"5","bottom":"5"},"fieldMargin":{"left":"clamp(15px, calc(15px + 15 * ((100vw - 992px) \/ 928)), 30px);","right":"clamp(15px, calc(15px + 15 * ((100vw - 992px) \/ 928)), 30px);","bottom":"40"},"_cssCustom":".estatein-property__form button.bricks-button.bricks-background-primary {\n min-width: 191px;\n min-height: 51px;\n margin-right: clamp(15px, calc(15px + 15 * ((100vw - 992px) \/ 928)), 30px);\n}\n.form-group.submit-button-wrapper {\n width: 20%;\n display: flex;\n align-items: flex-end;\n}\nli.input-checkbox-icon label {\n display: flex;\n flex-direction: row;\n gap: 5px !important;\n flex-wrap: wrap;\n}\n\/* Hide the default checkbox *\/\n.estatein-property__form .options-wrapper input[type=\"checkbox\"] {\n display: none;\n}\n\n\/* Style the label as a block and align checkbox visually *\/\n.estatein-property__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\n\/* Custom checkbox box *\/\n.estatein-property__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:4px\n}\n\n\/* Checkmark when checked *\/\n.estatein-property__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}","submitButtonBorder":{"radius":{"right":"6","top":"6","bottom":"6","left":"6"}},"_cssCustom:mobile_landscape":".estatein-property__form button.bricks-button.bricks-background-primary {\n font-size:14px;\n}\n.estatein-property__form .form-group.submit-button-wrapper {\n width: 100%;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n margin-left: 20px;\n}\n.estatein-property__form button.bricks-button.bricks-background-primary {\n\n margin-right: 0;\n}","fieldMargin:mobile_landscape":{"bottom":"20"},"fieldMargin:mobile_portrait":{"bottom":"15"}},"modified":1751628802,"user_id":1},{"id":"bbuhmh","name":"estatein-property__form-container","settings":{"_padding":{"top":"clamp(20px, calc(20px + (30 * ((100vw - 992px) \/ 928))), 50px);","right":"clamp(20px, calc(20px + (30 * ((100vw - 992px) \/ 928))), 50px);","bottom":"clamp(20px, calc(20px + (30 * ((100vw - 992px) \/ 928))), 50px);","left":"clamp(20px, calc(20px + (30 * ((100vw - 992px) \/ 928))), 50px);"},"_border":{"radius":{"top":"12","right":"12","bottom":"12","left":"12"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#262626"}},"_padding:mobile_landscape":{"top":"20","right":"0","bottom":"20","left":"0"}}},{"id":"qntgjc","name":"estatein-property__inquiry-section","settings":{"_rowGap":"70","_columnGap":"70"},"modified":1751550673,"user_id":1}]}
Profile Picture
Akshay Joshi

Estatein Kit – Contact form

Two-column contact form
View now
Copy now
{"id":2255,"name":"estatein-property-inquire-form","title":"Estatein - Property Inquire form","date":"2025-07-14 19:49:05","date_formatted":"July 14, 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\/estatein-property-inquire-form\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"3007a1","name":"section","parent":0,"children":["0110ea"],"settings":{"_cssGlobalClasses":["qcvyzw"],"_background":{"color":{"hex":"#141414"}}},"label":"Inquire"},{"id":"0110ea","name":"container","parent":"3007a1","children":["b6a96d","6907dd"],"settings":{"_cssGlobalClasses":["wglmeq","xsaurk","dfutoe","utznij"]}},{"id":"b6a96d","name":"block","parent":"0110ea","children":["7f57f0"],"settings":{"_width":"33%","_width:tablet_portrait":"100%"},"label":"Column"},{"id":"7f57f0","name":"block","parent":"b6a96d","children":["050105","883fb3","135c3e"],"settings":{"_cssGlobalClasses":["mcgbpw"]}},{"id":"050105","name":"svg","parent":"7f57f0","children":[],"settings":{"file":{"id":1018,"filename":"Abstract-Design.svg","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/05\/Abstract-Design.svg"}},"themeStyles":[]},{"id":"883fb3","name":"heading","parent":"7f57f0","children":[],"settings":{"text":"Inquire About Seaside Serenity Villa","tag":"h2","_cssGlobalClasses":["mvihif"]}},{"id":"135c3e","name":"text-basic","parent":"7f57f0","children":[],"settings":{"text":"Interested in this property? Fill out the form below, and our real estate experts will get back to you with more details, including scheduling a viewing and answering any questions you may have.","_cssGlobalClasses":["sfstmx"]}},{"id":"6907dd","name":"block","parent":"0110ea","children":["84807d"],"settings":{"_cssGlobalClasses":["bqevjr"]}},{"id":"84807d","name":"container","parent":"6907dd","children":["c2afae","3e4cbe"],"settings":{"_cssGlobalClasses":["bbuhmh"]}},{"id":"c2afae","name":"form","parent":"84807d","children":[],"settings":{"fields":[{"type":"text","label":"First Name","placeholder":"First Name","id":"117be5","width":"50","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"text","label":"Last Name","placeholder":"Last Name","id":"hqkbor","width":"50","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"email","label":"Email","placeholder":"Email","id":"xfbwkg","width":"50","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"text","label":"Phone","placeholder":"Phone","id":"hhdqqt","width":"50","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"select","label":"Selected Property","placeholder":"Select","id":"toxbkh","width":"100","width:mobile_landscape":"100","width:tablet_portrait":"50","options":"Seaside Serenity Villa, Malibu, California\nOption 2"},{"type":"textarea","label":"Message","placeholder":"Enter your Message here..","id":"dbcane"},{"type":"checkbox","id":"jkclfy","options":"I agree with Terms of Use and Privacy Policy","width":"60","width:mobile_landscape":"100"}],"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":["rmudwr"],"showLabels":true,"submitButtonText":"Send Your Message","_cssCustom":"ul.options-wrapper label {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 5px !important;\n}","submitButtonWidth":"40"},"themeStyles":[]},{"id":"3e4cbe","name":"code","parent":"84807d","children":[],"settings":{"javascriptCode":"\/\/ Target the field and add a custom class to the parent\nconst selectproInput = document.querySelector('select[name=\"form-field-toxbkh\"]');\nif (selectproInput) {\n selectproInput.parentElement.classList.add('input-select-property-icon');\n}\n","executeCode":true,"cssCode":".input-select-property-icon select {\n background: url('https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/07\/Subtract.svg') no-repeat right 10px center;\n background-size: 16px;\n padding-right: 40px;\n\n appearance: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n\n background-color: #000;\n color: #fff;\n border: 1px solid #333;\n border-radius: 8px;\n}\n"},"label":"Js code to add class on input ","themeStyles":[]}],"templateType":"section","global_classes":[{"id":"qcvyzw","name":"estatein-default-section","settings":{"_padding":{"top":"100","bottom":"100","left":"8%","right":"8%"},"_padding:tablet_portrait":{"top":"75","bottom":"75","left":"5%","right":"5%"},"_background":{"color":{"hex":"#141414"}}},"modified":1749740692,"user_id":1},{"id":"wglmeq","name":"estatein-default-container","settings":{"_direction:mobile_landscape":"row","_width":"1596"},"modified":1749711177,"user_id":1},{"id":"mvihif","name":"estatein-h2-whte","settings":{"_typography":{"color":{"hex":"#ffffff"},"font-size":"48","font-weight":"600"},"_typography:mobile_landscape":{"font-size":"28"}},"modified":1748526561,"user_id":1},{"id":"sfstmx","name":"estatein__body-text","settings":{"_typography":{"color":{"hex":"#999999"},"font-size":"clamp(16px, calc(16px + (4 * ((100vw - 1440px) \/ 480))), 18px);"},"_typography:mobile_landscape":{"font-size":"14"},"_typography:tablet_portrait":{"font-size":"16"}}},{"id":"xsaurk","name":"estatein_col-gap-m","settings":{"_columnGap":"clamp(20px, calc(20px + (30 * ((100vw - 992px) \/ 928))), 50px);"},"modified":1750401348,"user_id":1},{"id":"mcgbpw","name":"estatein_gap-xs","settings":{"_rowGap":"clamp(10px, calc(10px + 4 * ((100vw - 1440px) \/ 480)), 14px);"}},{"id":"dfutoe","name":"estatein_about-values--container","settings":{"_direction:tablet_portrait":"column","_direction":"row","_rowGap:tablet_portrait":"50"}},{"id":"rmudwr","name":"estatein-property__form","settings":{"fieldBackgroundColor":{"hex":"#000000"},"fieldBorder":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#262626"},"radius":{"top":"8","right":"8","bottom":"8","left":"8"}},"labelTypography":{"color":{"hex":"#ffffff"},"font-size":"clamp(15px, calc(15px + 5 * ((100vw - 1440px) \/ 480)), 20px);","text-transform":"none"},"placeholderTypography":{"color":{"hex":"#666666"},"font-size":"clamp(14px, calc(14px + 4 * ((100vw - 1440px) \/ 480)), 18px);"},"submitButtonBackgroundColor":{"hex":"#703bf7"},"submitButtonTypography":{"color":{"hex":"#ffffff"}},"labelTypography:mobile_landscape":{"font-size":"16"},"placeholderTypography:mobile_landscape":{"font-size":"14"},"fieldPadding":{"top":"5","bottom":"5"},"fieldMargin":{"left":"clamp(15px, calc(15px + 15 * ((100vw - 992px) \/ 928)), 30px);","right":"clamp(15px, calc(15px + 15 * ((100vw - 992px) \/ 928)), 30px);","bottom":"40"},"_cssCustom":".estatein-property__form button.bricks-button.bricks-background-primary {\n min-width: 191px;\n min-height: 51px;\n margin-right: clamp(15px, calc(15px + 15 * ((100vw - 992px) \/ 928)), 30px);\n}\n.form-group.submit-button-wrapper {\n width: 20%;\n display: flex;\n align-items: flex-end;\n}\nli.input-checkbox-icon label {\n display: flex;\n flex-direction: row;\n gap: 5px !important;\n flex-wrap: wrap;\n}\n\/* Hide the default checkbox *\/\n.estatein-property__form .options-wrapper input[type=\"checkbox\"] {\n display: none;\n}\n\n\/* Style the label as a block and align checkbox visually *\/\n.estatein-property__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\n\/* Custom checkbox box *\/\n.estatein-property__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:4px\n}\n\n\/* Checkmark when checked *\/\n.estatein-property__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}","submitButtonBorder":{"radius":{"right":"6","top":"6","bottom":"6","left":"6"}},"_cssCustom:mobile_landscape":".estatein-property__form button.bricks-button.bricks-background-primary {\n font-size:14px;\n}\n.estatein-property__form .form-group.submit-button-wrapper {\n width: 100%;\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n margin-left: 20px;\n}\n.estatein-property__form button.bricks-button.bricks-background-primary {\n\n margin-right: 0;\n}","fieldMargin:mobile_landscape":{"bottom":"20"},"fieldMargin:mobile_portrait":{"bottom":"15"}},"modified":1751628802,"user_id":1},{"id":"bbuhmh","name":"estatein-property__form-container","settings":{"_padding":{"top":"clamp(20px, calc(20px + (30 * ((100vw - 992px) \/ 928))), 50px);","right":"clamp(20px, calc(20px + (30 * ((100vw - 992px) \/ 928))), 50px);","bottom":"clamp(20px, calc(20px + (30 * ((100vw - 992px) \/ 928))), 50px);","left":"clamp(20px, calc(20px + (30 * ((100vw - 992px) \/ 928))), 50px);"},"_border":{"radius":{"top":"12","right":"12","bottom":"12","left":"12"},"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"hex":"#262626"}},"_padding:mobile_landscape":{"top":"20","right":"0","bottom":"20","left":"0"}}},{"id":"bqevjr","name":"estatein-property-details__form-block","settings":{"_width":"67%","_width:tablet_portrait":"100%"}},{"id":"utznij","name":"estatein-property-details__form-cintainer","settings":[],"modified":1751640260,"user_id":1}]}
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":[]}

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