Profile Picture
Joe Warren

Contact Form

Contact form with background icons
Copy component
Download JSON
{"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":[]}

Similar components

Profile Picture
Akshay Joshi

Metric kit – Contact Form

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

Metric Contact Form

Simple contact form
View now
Copy now
{"id":557,"name":"metric-cta-section-2","title":"Metric CTA Section 2","date":"2025-05-13 05:43:19","date_formatted":"May 13, 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\/metric-cta-section-2\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"34fe67","name":"section","parent":0,"children":["7f7564"],"settings":{"_cssGlobalClasses":["vneohb"]},"label":"CTA Section"},{"id":"7f7564","name":"container","parent":"34fe67","children":["796961","79f8cd"],"settings":{"_cssGlobalClasses":["qresdr","ckdesc"],"_direction":"row"}},{"id":"796961","name":"block","parent":"7f7564","children":["3cdd1d","a0138b"],"settings":{"_cssGlobalClasses":["rwcdbh"]},"label":"Left Column"},{"id":"3cdd1d","name":"block","parent":"796961","children":["ec3cda"],"settings":{"_cssGlobalClasses":["gvwtyk"]},"label":"Heading Block"},{"id":"ec3cda","name":"heading","parent":"3cdd1d","children":[],"settings":{"text":"Ready to transform your campaign strategy?","tag":"h2","_cssGlobalClasses":["jxomuc"]}},{"id":"a0138b","name":"block","parent":"796961","children":["96660b","d7ec46"],"settings":{"_cssGlobalClasses":["oxqkqj"],"_border:mobile_landscape":{"width":{"bottom":"0"}}}},{"id":"96660b","name":"block","parent":"a0138b","children":["cbeb50","9bc409"],"settings":{"_cssGlobalClasses":["pwidhq"]}},{"id":"cbeb50","name":"image","parent":"96660b","children":[],"settings":{"_cssGlobalClasses":["odtzmx"],"image":{"id":550,"filename":"Profile-Image-1.png","size":"full","full":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/05\/Profile-Image-1.png","url":"https:\/\/gallopbiz.in\/ak-dev\/wp-content\/uploads\/2025\/05\/Profile-Image-1.png"}},"themeStyles":[]},{"id":"9bc409","name":"heading","parent":"96660b","children":[],"settings":{"text":"Stewart Butterfield, CEO at Slack","_cssGlobalClasses":["xidqdh"],"tag":"custom","customTag":"span"},"label":"Title"},{"id":"d7ec46","name":"text-basic","parent":"a0138b","children":[],"settings":{"text":"Metric gets what enterprise buyers need to see. They helped us shift our message from team collaboration to enterprise-wide digital transformation. The results were exactly what we needed - more enterprise leads, shorter sales cycles, and better ROI on our marketing spend","_cssGlobalClasses":["pmslul"]},"label":"Description"},{"id":"79f8cd","name":"block","parent":"7f7564","children":["f18748"],"settings":{"_cssGlobalClasses":["wlbkbx"]},"label":"Right Column"},{"id":"f18748","name":"form","parent":"79f8cd","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":["tamhog"],"submitButtonText":"Book a strategy call"},"themeStyles":[]}],"templateType":"section","global_classes":[{"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"}},{"id":"jxomuc","name":"metric-h2-white","settings":{"_typography":{"color":{"hex":"#ffffff"},"font-size":"48","font-weight":"400"},"_typography:mobile_portrait":{"font-size":"32"},"_typography:tablet_portrait":{"font-size":"40"},"_typography:mobile_landscape":{"font-size":"40"}}},{"id":"oxqkqj","name":"metric-case-study__block","settings":{"_rowGap":"24","_border:mobile_landscape":{"width":{"bottom":"1"},"style":"solid","color":{"hex":"#414141"}},"_padding:mobile_landscape":{"bottom":"48","top":"48"},"_padding:mobile_portrait":{"bottom":"32","top":"32"},"_border:mobile_portrait":{"width":{"bottom":"0"}}}},{"id":"xidqdh","name":"metric-case-study__title","settings":{"_typography":{"color":{"hex":"#909090"},"font-size":"20","font-weight":"400"},"_typography:tablet_portrait":{"font-size":"16"},"_typography:mobile_landscape":{"font-size":"20"},"_typography:mobile_portrait":{"font-size":"16"}}},{"id":"pmslul","name":"metric-case-study__desc","settings":{"_typography":{"color":{"hex":"#ffffff"},"font-size":"20","font-weight":"400","line-height":"1.2"},"_typography:mobile_portrait":{"font-size":"16"}}},{"id":"pwidhq","name":"metric-case-study__inner-block","settings":{"_direction":"row","_flexWrap":"nowrap","_alignItems":"center","_columnGap":"15"}},{"id":"odtzmx","name":"metric-case-study__photo","settings":{"_width":"56","_border":{"radius":{"right":"50%","bottom":"50%","left":"50%","top":"50%"}}}},{"id":"ckdesc","name":"metric-cta-section__container","settings":{"_columnGap":"96","_background":{"color":{"hex":"#171717"}},"_padding":{"top":"6%","right":"6%","bottom":"6%","left":"6%"},"_padding:mobile_portrait":{"top":"5%","right":"5%","bottom":"5%","left":"5%"},"_alignItems":"stretch","_rowGap:mobile_landscape":"50"}},{"id":"gvwtyk","name":"metric-cta-section_list-block","settings":{"_rowGap":"64"}},{"id":"wlbkbx","name":"metric-cta-section_form-column","settings":[]},{"id":"tamhog","name":"metric-cta-section_form","settings":{"submitButtonBorder":{"radius":{"top":"100","right":"100","left":"100","bottom":"100"}},"fieldBackgroundColor":{"hex":"#171717"},"fieldBorder":{"width":{"top":"0","right":"0","left":"0","bottom":"1"},"style":"solid","color":{"hex":"#ffffff"}},"fieldPadding":{"bottom":"24"},"fieldTypography":{"font-size":"20","color":{"hex":"#ffffff"}},"placeholderTypography":{"color":{"hex":"#ffffff"}},"_cssCustom":".metric-cta-section_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.metric-cta-section_form span.justterm a {\n color: white;\n text-decoration: underline;\n} \n.metric-cta-section_form ul.options-wrapper {\n padding-bottom: 24px;\n border-bottom: 1px solid #fff;\n margin-bottom: 72px;\n}\n.metric-cta-section_form input {\n margin-bottom: 72px;\n}\n.metric-cta-section_form .justlabel {\n font-size: 20px;\n}\n.metric-cta-section_form ul.options-wrapper li {\n color: #909090;\n font-size: 17px;\n margin-bottom: 16px;\n}\n\n\/* Container UL Styling *\/\n\n\n\/* Hide the default checkbox *\/\n .metric-cta-section_form .options-wrapper input[type=\"checkbox\"] {\n display: none;\n}\n\n\/* Style the label as a block and align checkbox visually *\/\n .metric-cta-section_form .options-wrapper label {\n display: flex;\n align-items: center;\n gap: 16px;\n\n color: #999999;\n cursor: pointer;\n padding: 10px;\n}\n\n\/* Custom checkbox box *\/\n .metric-cta-section_form .options-wrapper input[type=\"checkbox\"] + label::before {\n content: \"\";\n display: inline-block;\n width: 24px;\n height: 25px;\n background-color: #ffffff;\n border-radius: 2px;\n flex-shrink: 0;\n position: relative;\n}\n\n\/* Checkmark when checked *\/\n .metric-cta-section_form .options-wrapper input[type=\"checkbox\"]:checked + label::before {\n content: \"\u2713\";\n font-size: 14px;\n color: black;\n text-align: center;\n line-height: 25px;\n}\n","_cssCustom:mobile_landscape":" .metric-cta-section_form ul.options-wrapper {\n\n margin-bottom: 56px;\n}\n.metric-cta-section_form input {\n margin-bottom: 56px;\n}","_cssCustom:mobile_portrait":" .metric-cta-section_form ul.options-wrapper {\n \n margin-bottom: 44px;\n}\n.metric-cta-section_form input {\n margin-bottom: 44px;\n}\n.metric-cta-section_form .justlabel {\n font-size: 16px;\n}\n.metric-cta-section_form .options-wrapper label {\n \n font-size: 16px;\n}","fieldTypography:mobile_portrait":{"font-size":"16"},"submitButtonTypography":{"font-size":"16","font-weight":"500"},"submitButtonBackgroundColor:hover":{"hex":"#ffffff","rgb":"rgba(255, 255, 255, 0.62)","hsl":"hsla(0, 0%, 100%, 0.62)"}},"modified":1745351607,"user_id":1},{"id":"rwcdbh","name":"metric-cta-section__col","settings":{"_justifyContent":"space-between"}}]}
Profile Picture
Vuyufambom Boris

International format number field

This script enhances phone input fields with auto-detected country codes, using the intl-tel-input library. It prevents users from modifying or deleting the country code, ensures consistent formatting, and supports dynamic country selection. GeoIP lookup sets the initial country code based on the user's location. Inspired by Julian Galluzzo Use this in the code
View now
Copy now
{"content":[{"id":"gqftio","name":"container","parent":"joaxnz","children":["ddkupy","lgtrme"],"settings":{}},{"id":"ddkupy","name":"form","parent":"gqftio","children":[],"settings":{"fields":[{"type":"tel","label":"Phone","id":"e69562","name":"phone","maxLength":"17","required":true}],"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":"PostPilot","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.","_margin":{"left":"auto","right":"auto"},"submitButtonWidth":"100%","submitButtonBackgroundColor":{"hex":"#6ab1f3","id":"vqhiae","name":"Color #1"},"submitButtonTypography":{"color":{"hex":"#ffffff","id":"edddcc","name":"Color #2"}},"submitButtonBorder":{"radius":{"top":"10","right":"10","bottom":"10","left":"10"}},"fieldMargin":{"bottom":"10"},"fieldBorder":{"radius":{"top":"10","right":"10","bottom":"10","left":"10"}},"emailContent":"{{all_fields}}","_width":"40%","_width:mobile_landscape":"100%"},"themeStyles":{}},{"id":"lgtrme","name":"code","parent":"gqftio","children":[],"settings":{"signature":"95551922ba9ade8b065c0a870b544572","user_id":4,"time":1747475847,"parseDynamicData":true,"noRoot":true,"executeCode":true,"code":"\n\n\n\n\n\n\n\n\n","javascriptCode":"document.addEventListener(\"DOMContentLoaded\", function () {\n const phoneInputField = document.querySelector('input[name=\"phone\"]');\n if (!phoneInputField) return;\n\n const phoneInput = window.intlTelInput(phoneInputField, {\n initialCountry: \"auto\",\n geoIpLookup: function (callback) {\n fetch(\"https://ipapi.co/json/ \")\n .then((res) => res.json())\n .then((data) => callback(data.country_code || \"us\"))\n .catch(() => callback(\"us\"));\n },\n utilsScript: \"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js \",\n showSelectedDialCode: true,\n dropdownContainer: document.body,\n });\n\n function applyInputMask() {\n const placeholder = phoneInputField.getAttribute(\"placeholder\") || \"\";\n const selectedCountryData = phoneInput.getSelectedCountryData();\n const dialCode = selectedCountryData?.dialCode ? `+${selectedCountryData.dialCode}` : \"\";\n const digitCount = placeholder.replace(/[^0-9]/g, \"\").length;\n const dynamicMask = dialCode + \" \" + \"9\".repeat(digitCount);\n const formattedMask = dialCode + \" \" + placeholder.replace(/[0-9]/g, \"9\").replace(/[^0-9()\\s\\-]/g, \"\");\n\n $(phoneInputField).inputmask({\n mask: [dynamicMask, formattedMask],\n jitMasking: true,\n placeholder: \"\",\n showMaskOnHover: false,\n showMaskOnFocus: false,\n clearIncomplete: true,\n keepStatic: true,\n });\n }\n\n function setInitialDialCode() {\n const currentVal = phoneInputField.value.trim();\n // Only reset if input is empty or contains only the dial code\n if (!currentVal || /^\\+\\d+$/.test(currentVal)) {\n phoneInput.setNumber(\"\"); // Clear to avoid duplicate dial code\n }\n }\n\n // Initial setup\n applyInputMask();\n setInitialDialCode();\n\n // On country change\n phoneInputField.addEventListener(\"countrychange\", function () {\n $(phoneInputField).inputmask(\"remove\");\n applyInputMask();\n setInitialDialCode();\n });\n\n // Form handling for hidden full number\n const form = phoneInputField.closest(\"form\");\n if (form) {\n let hiddenInput = form.querySelector('input[name=\"phone_full\"]');\n if (!hiddenInput) {\n hiddenInput = document.createElement(\"input\");\n hiddenInput.type = \"hidden\";\n hiddenInput.name = \"phone_full\";\n form.appendChild(hiddenInput);\n }\n\n form.addEventListener(\"submit\", () => {\n const phoneNumber = phoneInput.getNumber();\n hiddenInput.value = phoneNumber;\n console.log(\"Full Phone Number:\", phoneNumber);\n });\n }\n\n // Modify country list: show country name and dial code\n const observer = new MutationObserver(() => {\n const countryItems = document.querySelectorAll(\".iti__country-list .iti__country\");\n countryItems.forEach((item) => {\n const dialCode = item.getAttribute(\"data-dial-code\");\n const nameSpan = item.querySelector(\".iti__country-name\");\n if (nameSpan && !nameSpan.textContent.includes(`(+${dialCode})`)) {\n nameSpan.textContent = `${nameSpan.textContent} (+${dialCode})`;\n }\n });\n });\n\n observer.observe(document.body, { childList: true, subtree: true });\n});"},"themeStyles":{}}],"source":"bricksCopiedElements","sourceUrl":"https://nsourc.com","version":"1.12.3","globalClasses":[],"globalElements":[]}

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