Profile Picture
Akshay Joshi

Estatein kit – Form 2

Multi-field form section
Copy component
Download JSON
{"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}]}

Similar components

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":[]}
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"}}]}

Categories

Forms

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