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 – Property Form

Section with bricks form using some js code for design
View now
Copy now
{"id":2590,"name":"property-form","title":"Property form","date":"2025-07-24 20:11:55","date_formatted":"July 24, 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\/property-form\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"639cd3","name":"section","parent":0,"children":["fa1d58"],"settings":{"_cssGlobalClasses":["qcvyzw"]},"label":"Property form "},{"id":"fa1d58","name":"container","parent":"639cd3","children":["17eb7a","5d73c5"],"settings":{"_cssGlobalClasses":["vcwyzs","wglmeq"],"_direction":"column"}},{"id":"17eb7a","name":"form","parent":"fa1d58","children":[],"settings":{"fields":[{"type":"text","id":"razyza","placeholder":"Search For Property"},{"type":"select","placeholder":"Location","id":"idbvuv","options":"Example 1\nExample 2\nExample 3","width:mobile_landscape":"100","width:tablet_portrait":"50","width":"20"},{"type":"select","placeholder":"Property Type","id":"geqmvt","options":"Example 1\nExample 2\nExample 3","width":"20","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"select","placeholder":"Pricing Range","id":"slqkrp","options":"Example 1\nExample 2\nExample 3","width:mobile_landscape":"100","width:tablet_portrait":"50","width":"20"},{"type":"select","placeholder":"Property Size","id":"tkbahw","options":"Example 1\nExample 2\nExample 3","width":"20","width:mobile_landscape":"100","width:tablet_portrait":"50"},{"type":"select","placeholder":"Build Year","id":"pqqjhr","options":"Example 1\nExample 2\nExample 3","width":"20","width:mobile_landscape":"100","width:tablet_portrait":"50"}],"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","bszcpc"],"showLabels":true,"submitButtonText":"Send Your Message","submitButtonMargin":{"left":"-15","top":"16.5"},"_flexDirection":"row","submitButtonWidth":"100"},"themeStyles":[]},{"id":"5d73c5","name":"code","parent":"fa1d58","children":[],"settings":{"javascriptCode":"\/\/ Search input\nconst searchInput = document.querySelector('input[name=\"form-field-razyza\"]');\nif (searchInput) {\n searchInput.parentElement.classList.add('cust_property-input-search-icon');\n}\n\n\/\/ Location select\nconst locationSelect = document.querySelector('select[name=\"form-field-idbvuv\"]');\nif (locationSelect) {\n locationSelect.parentElement.classList.add('cust_property-input-location-icon');\n}\n\n\/\/ Property Type select\nconst propertyTypeSelect = document.querySelector('select[name=\"form-field-geqmvt\"]');\nif (propertyTypeSelect) {\n propertyTypeSelect.parentElement.classList.add('cust_property-input-property-type-icon');\n}\n\n\/\/ Pricing Range select\nconst pricingRangeSelect = document.querySelector('select[name=\"form-field-slqkrp\"]');\nif (pricingRangeSelect) {\n pricingRangeSelect.parentElement.classList.add('cust_property-input-pricing-range-icon');\n}\n\n\/\/ Property Size select\nconst propertySizeSelect = document.querySelector('select[name=\"form-field-tkbahw\"]');\nif (propertySizeSelect) {\n propertySizeSelect.parentElement.classList.add('cust_property-input-property-size-icon');\n}\n\n\/\/ Build Year select\nconst buildYearSelect = document.querySelector('select[name=\"form-field-pqqjhr\"]');\nif (buildYearSelect) {\n buildYearSelect.parentElement.classList.add('cust_property-input-build-year-icon');\n}","executeCode":true,"cssCode":"\/* Search input icon *\/\n.cust_property-input-search-icon input {\n background: url(https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/07\/Icon-1.svg) no-repeat left center !important;\n background-size: 20px !important;\n \n background-repeat: no-repeat !important;\n background-position-x: 10px !important;\n background-color: #000000 !important;\n}\n\n\/* Location select icon *\/\n.cust_property-input-location-icon select {\n background: url(https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/07\/Icon-7-1.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\n\/* Property Type select icon *\/\n.cust_property-input-property-type-icon select {\n background: url(https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/07\/Icon-8.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\n\/* Pricing Range select icon *\/\n.cust_property-input-pricing-range-icon select {\n background: url(https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/07\/Icon-9.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\n\/* Property Size select icon *\/\n.cust_property-input-property-size-icon select {\n background: url(https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/07\/Icon-10.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\n\/* Build Year select icon *\/\n.cust_property-input-build-year-icon select {\n background: url(https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/07\/Icon-11.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\n\/************\/\n\/**submit**\/\n.estatein-poperty-search__form .form-group.submit-button-wrapper {\n position: absolute;\n width: max-content !important;\n top: 18px;\n right: calc(11% + 20px);\n}\n.estatein-poperty-search__form .form-group.submit-button-wrapper button.bricks-button {\n line-height: 36px;\n}\n\/* Search input form group background *\/\n\n.form-group.cust_property-input-search-icon input {\n width: 80%;\n border: 10px solid #1a1a1a !important;\n margin-bottom: -10px;\n border-radius: 20px 20px 0 0 !important;\n padding-top: 20px !important;\n padding-bottom: 20px !important;\n}\n\n.form-group.cust_property-input-search-icon {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\/* Location select form group background *\/\n.form-group.cust_property-input-location-icon {\n background: #1a1a1a;\n border-radius: 20px 0 0 20px;\n}\n\n\n\/* Property Type select form group background *\/\n.form-group.cust_property-input-property-type-icon {\n background: #1a1a1a;\n}\n\n\/* Pricing Range select form group background *\/\n.form-group.cust_property-input-pricing-range-icon {\n background: #1a1a1a;\n}\n\n\/* Property Size select form group background *\/\n.form-group.cust_property-input-property-size-icon {\n background: #1a1a1a;\n}\n\n\/* Build Year select form group background *\/\n.form-group.cust_property-input-build-year-icon {\n background: #1a1a1a;\n border-radius: 0 20px 20px 0;\n}\nCopilot said: Ah, I understand! You want the search\nAh, I understand! You want the search icon to be visible on all screen sizes (both mobile and desktop). Here's the corrected CSS:\n\nCSS\n\/* Show both icon and text on all screen sizes for submit button *\/\n.estatein-poperty-search__form .form-group.submit-button-wrapper button {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.estatein-poperty-search__form .form-group.submit-button-wrapper button::before {\n content: \"\";\n background: url(https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/07\/Icon-12.svg) no-repeat center center;\n background-size: 20px 20px;\n width: 20px;\n height: 20px;\n display: inline-block;\n}\n\n.estatein-poperty-search__form .form-group.submit-button-wrapper button .text {\n display: inline-block;\n}\n@media only screen and (max-width:767px){\n.form-group.cust_property-input-search-icon input {\n width: 100%;\n border: 3px solid #1a1a1a !important;\n margin-bottom: -10px;\n border-radius: 20px!important;\n}\n .estatein-poperty-search__form .form-group.submit-button-wrapper {\n right: calc(0% + 20px);\n top:2px;\n}\n .form-group.cust_property-input-search-icon {\n margin-bottom: 30px;\n padding: 0 !important;\n} \n .form-group.cust_property-input-location-icon {\n \n border-radius: 20px 20px 0 0px;\n}\n .form-group.cust_property-input-build-year-icon {\n \n border-radius: 0 0px 20px 20px;\n }\n \/***btn***\/\n .estatein-poperty-search__form .form-group.submit-button-wrapper button .text {\n display: none;\n }\n \n .estatein-poperty-search__form .form-group.submit-button-wrapper button {\n position: relative;\n }\n \n .estatein-poperty-search__form .form-group.submit-button-wrapper button::before {\n content: \"\";\n background: url(https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/07\/Icon-12.svg) no-repeat center center;\n background-size: 20px 20px;\n width: 20px;\n height: 20px;\n display: inline-block;\n vertical-align: middle;\n }\n .estatein-poperty-search__form .form-group.submit-button-wrapper button.bricks-button {\n min-height: 51px;\n min-width: 56px;\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":"vcwyzs","name":"statein-property-banner__other-filters","settings":[],"modified":1753360173,"user_id":1},{"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"},"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":1752828436,"user_id":1},{"id":"bszcpc","name":"estatein-poperty-search__form","settings":{"fieldMargin":{"left":"10","right":"10","bottom":"10","top":"10"},"fieldPadding":{"top":"10","bottom":"10"},"_position":"relative"}}]}
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}]}

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