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
Copy component
Download JSON
{"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":[]}

Similar components

Profile Picture
Akshay Joshi

Construction kit – Newsletter

Newsletter form for footer
View now
Copy now
{"id":3605,"name":"construction-kit-newsletter","title":"Construction kit - Newsletter","date":"2025-09-05 06:44:24","date_formatted":"September 5, 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\/construction-kit-newsletter\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"9a4a0a","name":"section","parent":0,"children":["bd22ea"],"settings":{"_cssGlobalClasses":["ecvdox","rocynw"]},"label":"Newsletter"},{"id":"bd22ea","name":"container","parent":"9a4a0a","children":["f31a9f","775c7d"],"settings":{"_cssGlobalClasses":["imymyf","kzdlvy","jgaman"]}},{"id":"f31a9f","name":"block","parent":"bd22ea","children":["7b1ffc","e2e3b0"],"settings":{"_cssGlobalClasses":["qpsnnz"]},"label":"Column"},{"id":"7b1ffc","name":"div","parent":"f31a9f","children":["05e3fa","52b25e"],"settings":{"_cssGlobalClasses":["ziecxf"]}},{"id":"05e3fa","name":"heading","parent":"7b1ffc","children":[],"settings":{"text":"Join Our Newsletter","tag":"h2","_cssGlobalClasses":["jxypep"]}},{"id":"52b25e","name":"divider","parent":"7b1ffc","children":[],"settings":{"_cssGlobalClasses":["yfabgg"]}},{"id":"e2e3b0","name":"form","parent":"f31a9f","children":[],"settings":{"fields":[{"type":"text","label":"Name","placeholder":"Your Name","id":"a7afd5","width":"100"},{"type":"text","label":"Surname","placeholder":"Surname","id":"vzocqb"},{"type":"email","label":"Email","placeholder":"Email","required":true,"id":"c444db","width":"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":["duphfv","zglcqr"],"submitButtonText":"Send Message","submitButtonSize":"xl","submitButtonWidth:mobile_portrait":"100"},"themeStyles":[]},{"id":"775c7d","name":"block","parent":"bd22ea","children":["6890c9","3a2168"],"settings":{"_cssGlobalClasses":["nnayuz"]},"label":"Column"},{"id":"6890c9","name":"block","parent":"775c7d","children":["807aa8"],"settings":{"_cssGlobalClasses":["zvptzf"]}},{"id":"807aa8","name":"social-icons","parent":"6890c9","children":[],"settings":{"_padding":{"top":15,"right":15,"bottom":15,"left":15},"_typography":{"color":{"hex":"#ffffff"}},"icons":[{"icon":{"library":"fontawesomeBrands","icon":"fab fa-twitter"},"id":"zffmjd"},{"icon":{"library":"fontawesomeBrands","icon":"fab fa-facebook-f"},"id":"nlkypw"},{"icon":{"library":"fontawesomeBrands","icon":"fab fa-linkedin-in"},"id":"zebvsm"}],"_cssGlobalClasses":["obkgat"]},"themeStyles":[]},{"id":"3a2168","name":"block","parent":"775c7d","children":["b77d8d"],"settings":{"_cssGlobalClasses":["ixspio"]}},{"id":"b77d8d","name":"list","parent":"3a2168","children":[],"settings":{"items":[{"title":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","id":"fhcjth","icon":{"library":"fontawesomeSolid","icon":"fas fa-location-dot"}},{"title":"+00 123 456 78","id":"eeziya","icon":{"library":"fontawesomeSolid","icon":"fas fa-phone"}},{"title":"constractioninc@gmail.com","id":"wdkpuo","icon":{"library":"fontawesomeSolid","icon":"fas fa-envelope"}}],"_cssGlobalClasses":["vkacws"]},"themeStyles":[]}],"templateType":"section","global_classes":[{"id":"ecvdox","name":"construction-default-section","settings":{"_padding":{"top":"100","bottom":"100","right":"8%","left":"8%"},"_padding:tablet_portrait":{"top":"75","bottom":"75","right":"5%","left":"5%"}}},{"id":"imymyf","name":"construction-default-container","settings":{"_rowGap":"20px"}},{"id":"kzdlvy","name":"construction-full-width-container","settings":{"_width":"100%","_direction":"row","_alignItems":"stretch"}},{"id":"rocynw","name":"construction-fullwidth-section","settings":{"_padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},{"id":"jxypep","name":"construction-h2","settings":{"_typography:tablet_portrait":{"font-size":"32"},"_typography":{"font-size":"40","font-family":"Rubik","color":{"hex":"#2a2a2a"}},"_typography:mobile_landscape":{"font-size":"28"}}},{"id":"jgaman","name":"construction-contact-container","settings":{"_width":"100%","_rowGap:mobile_portrait":"0","_rowGap:mobile_landscape":"0"},"modified":1754910590,"user_id":1},{"id":"qpsnnz","name":"construction-contact-left-col","settings":{"_background":{"color":{"hex":"#ffb401"}},"_padding":{"top":"6.5%","right":"5%","bottom":"6.5%","left":"5%"},"_columnGap":"50","_rowGap":"50"}},{"id":"nnayuz","name":"construction-contact-right-col","settings":[]},{"id":"zvptzf","name":"construction-contact-social-icon-block","settings":{"_background":{"color":{"hex":"#2a2a2a"}},"_alignItems":"center"}},{"id":"obkgat","name":"construction-contact-social-icon-list","settings":{"iconSize":"20","gap":"20","iconColor:hover":{"hex":"#ffb401"}},"modified":1755711977,"user_id":1},{"id":"vkacws","name":"construction-contact_contact-list","settings":{"separatorDisable":true,"titleMargin":{"left":"10","right":"0"},"titleTypography":{"font-weight":"600"},"itemJustifyContent":"flex-start","_widthMax":"430","itemMargin":{"bottom":"15"},"_typography":{"font-family":"Rubik","font-size":"15","font-weight":"500"}},"modified":1755084753,"user_id":1},{"id":"ixspio","name":"construction-contact_contact-block","settings":{"_padding":{"top":"50","right":"50","bottom":"50","left":"50"},"_justifyContent":"center","_alignItems":"center","_alignSelf":"center"},"modified":1754579315,"user_id":1},{"id":"duphfv","name":"construction_form-simple","settings":{"submitButtonWidth":"40","submitButtonBackgroundColor":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0)","hsl":"hsla(0, 0%, 0%, 0)"},"submitButtonBorder":{"width":{"top":"5","right":"5","bottom":"5","left":"5"},"style":"solid","color":{"hex":"#ffffff"}},"submitButtonTypography":{"color":{"hex":"#ffffff"},"font-weight":"500","text-transform":"uppercase","font-family":"Rubik","font-size":"14"},"placeholderTypography":{"color":{"hex":"#8e8e93"}},"horizontalAlignFields":"flex-end","fieldMargin":{"right":"20"},"submitButtonMargin":{"right":"20"},"fieldPadding":{"top":"8","bottom":"8"},"fieldMargin:mobile_landscape":{"right":"0"},"submitButtonWidth:mobile_landscape":"100","submitButtonMargin:mobile_landscape":{"right":"0"}},"modified":1755688593,"user_id":1},{"id":"yfabgg","name":"construction-contact-left-col_divider","settings":{"height":"5","width":"22%"}},{"id":"ziecxf","name":"construction-contact-section_heading-div","settings":{"_display":"flex","_direction":"column","_columnGap":"20","_rowGap":"20"}},{"id":"zglcqr","name":"construntion_form-full","settings":{"submitButtonWidth":"100"}}]}
Profile Picture
Akshay Joshi

Construction kit – Form FAQ Map

Contact form with FAQ and map
View now
Copy now
{"id":3572,"name":"construction-kit-form-faq-map","title":"Construction kit - Form FAQ Map","date":"2025-09-01 17:56:55","date_formatted":"September 1, 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\/construction-kit-form-faq-map\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"ebbe13","name":"section","parent":0,"children":["cc657c","69b676"],"settings":{"_cssGlobalClasses":["hiisct"]},"label":"Form and FAQ"},{"id":"cc657c","name":"container","parent":"ebbe13","children":["98b3ea","af3eba"],"settings":{"_direction":"row","_cssGlobalClasses":["yyxnlp","kzdlvy"]}},{"id":"98b3ea","name":"block","parent":"cc657c","children":["06b63b","7267d8","92bd02"],"settings":{"_cssGlobalClasses":["eupyhy"]},"label":"Column"},{"id":"06b63b","name":"heading","parent":"98b3ea","children":[],"settings":{"text":"Get In Touch","tag":"h2","_cssGlobalClasses":["jxypep"]}},{"id":"7267d8","name":"divider","parent":"98b3ea","children":[],"settings":{"_cssGlobalClasses":["moeqkt"]},"themeStyles":[]},{"id":"92bd02","name":"form","parent":"98b3ea","children":[],"settings":{"fields":[{"type":"text","label":"Name","placeholder":"Your Name","id":"a7afd5","width":"100"},{"type":"email","label":"Email","placeholder":"Your Email","required":true,"id":"c444db","width":"100"},{"type":"textarea","label":"Message","placeholder":"Your Message","required":true,"id":"2b9955"}],"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":["duphfv"],"submitButtonText":"Send Message","submitButtonSize":"xl","submitButtonBorder":{"color":{"hex":"#2a2a2a"}},"submitButtonTypography":{"color":{"hex":"#2a2a2a"}}},"themeStyles":[]},{"id":"af3eba","name":"block","parent":"cc657c","children":["58f30c"],"settings":{"_cssGlobalClasses":["gudzxt"]},"label":"Column"},{"id":"58f30c","name":"accordion-nested","parent":"af3eba","children":["a818a4","119212","e96ba9","0366ca","0ccec0","b88135","aafe99","062112","97b202"],"settings":{"titleHeight":"50px","contentPadding":{"top":15,"right":0,"bottom":15,"left":0},"_cssGlobalClasses":["ozmzkq"],"_cssCustom":" .construction-faq-open-icon {\n display: none;\n}\n.construction-faq-close-icon {\n display: block;\n}\n.brx-open .construction-faq-close-icon {\n display: none;\n}\n.brx-open .construction-faq-open-icon {\n display: block;\n}"},"themeStyles":[]},{"id":"a818a4","name":"block","parent":"58f30c","children":["b4e539","f7fcc5"],"settings":{"_cssGlobalClasses":["czgmni"]},"label":"Item"},{"id":"b4e539","name":"block","parent":"a818a4","children":["e1a2d4","93f0ed","9791bf"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["npfcet"]},"label":"Title"},{"id":"e1a2d4","name":"heading","parent":"b4e539","children":[],"settings":{"text":"Donec rutrum congue leo eget malesuada?","tag":"h5","_cssGlobalClasses":["bieqya"]}},{"id":"93f0ed","name":"icon","parent":"b4e539","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle-minus"},"_cssGlobalClasses":["kuxzhx","thisej"]}},{"id":"9791bf","name":"icon","parent":"b4e539","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle-plus"},"_cssGlobalClasses":["kuxzhx","lyuqzg"]}},{"id":"f7fcc5","name":"block","parent":"a818a4","children":["86cc21"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"}},"label":"Content"},{"id":"86cc21","name":"text","parent":"f7fcc5","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["ejiadu"]}},{"id":"119212","name":"divider","parent":"58f30c","children":[],"settings":{"_cssGlobalClasses":["asuukm"]}},{"id":"e96ba9","name":"block","parent":"58f30c","children":["71fb6d","4ffb95"],"settings":{"_cssGlobalClasses":["czgmni"]},"label":"Item"},{"id":"71fb6d","name":"block","parent":"e96ba9","children":["c2c215","a34c3d","3d74b6"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"}},"label":"Title"},{"id":"c2c215","name":"heading","parent":"71fb6d","children":[],"settings":{"text":"Vivamus suscipit tortor eget felis porttitor volutpat?","tag":"h5","_cssGlobalClasses":["bieqya"]}},{"id":"a34c3d","name":"icon","parent":"71fb6d","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle-minus"},"_cssGlobalClasses":["kuxzhx","thisej"]}},{"id":"3d74b6","name":"icon","parent":"71fb6d","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle-plus"},"_cssGlobalClasses":["kuxzhx","lyuqzg"]}},{"id":"4ffb95","name":"block","parent":"e96ba9","children":["ca6866"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"}},"label":"Content"},{"id":"ca6866","name":"text","parent":"4ffb95","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["ejiadu"]}},{"id":"0366ca","name":"divider","parent":"58f30c","children":[],"settings":{"_cssGlobalClasses":["asuukm"]}},{"id":"0ccec0","name":"block","parent":"58f30c","children":["b422e2","64a4bc"],"settings":{"_cssGlobalClasses":["czgmni"]},"label":"Item"},{"id":"b422e2","name":"block","parent":"0ccec0","children":["de9c7e","6c1023","7eddcc"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"}},"label":"Title"},{"id":"de9c7e","name":"heading","parent":"b422e2","children":[],"settings":{"text":"Curabitur non nulla sit amet nisl tempus?","tag":"h5","_cssGlobalClasses":["bieqya"]}},{"id":"6c1023","name":"icon","parent":"b422e2","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle-minus"},"_cssGlobalClasses":["kuxzhx","thisej"]}},{"id":"7eddcc","name":"icon","parent":"b422e2","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle-plus"},"_cssGlobalClasses":["kuxzhx","lyuqzg"]}},{"id":"64a4bc","name":"block","parent":"0ccec0","children":["eb42b6"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"}},"label":"Content"},{"id":"eb42b6","name":"text","parent":"64a4bc","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["ejiadu"]}},{"id":"b88135","name":"divider","parent":"58f30c","children":[],"settings":{"_cssGlobalClasses":["asuukm"]}},{"id":"aafe99","name":"block","parent":"58f30c","children":["6f2af9","fbef3b"],"settings":{"_cssGlobalClasses":["czgmni"]},"label":"Item"},{"id":"6f2af9","name":"block","parent":"aafe99","children":["fff50b","a763ee","b636d0"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"}},"label":"Title"},{"id":"fff50b","name":"heading","parent":"6f2af9","children":[],"settings":{"text":"Pellentesque in ipsum id orci porta dapibus?","tag":"h5","_cssGlobalClasses":["bieqya"]}},{"id":"a763ee","name":"icon","parent":"6f2af9","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle-minus"},"_cssGlobalClasses":["kuxzhx","thisej"]}},{"id":"b636d0","name":"icon","parent":"6f2af9","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle-plus"},"_cssGlobalClasses":["kuxzhx","lyuqzg"]}},{"id":"fbef3b","name":"block","parent":"aafe99","children":["c8c040"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"}},"label":"Content"},{"id":"c8c040","name":"text","parent":"fbef3b","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["ejiadu"]}},{"id":"062112","name":"divider","parent":"58f30c","children":[],"settings":{"_cssGlobalClasses":["asuukm"]}},{"id":"97b202","name":"block","parent":"58f30c","children":["4b800a","fc4048"],"settings":{"_cssGlobalClasses":["czgmni"]},"label":"Item"},{"id":"4b800a","name":"block","parent":"97b202","children":["31fdd3","8f8718","5da859"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"}},"label":"Title"},{"id":"31fdd3","name":"heading","parent":"4b800a","children":[],"settings":{"text":"Curabitur non nulla sit amet nisl?","tag":"h5","_cssGlobalClasses":["bieqya"]}},{"id":"8f8718","name":"icon","parent":"4b800a","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle-minus"},"_cssGlobalClasses":["kuxzhx","thisej"]}},{"id":"5da859","name":"icon","parent":"4b800a","children":[],"settings":{"icon":{"library":"fontawesomeSolid","icon":"fas fa-circle-plus"},"_cssGlobalClasses":["kuxzhx","lyuqzg"]}},{"id":"fc4048","name":"block","parent":"97b202","children":["7e34f8"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"}},"label":"Content"},{"id":"7e34f8","name":"text","parent":"fc4048","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["ejiadu"]}},{"id":"69b676","name":"container","parent":"ebbe13","children":["c7b95c"],"settings":{"_cssGlobalClasses":["bcvhag"]}},{"id":"c7b95c","name":"map","parent":"69b676","children":[],"settings":{"addresses":[{"latitude":"52.5164154966524","longitude":"13.377643715349544"}],"scrollwheel":true,"draggable":true,"streetViewControl":true,"zoomControl":true,"_cssGlobalClasses":["kjiobc"]},"themeStyles":[]}],"templateType":"section","global_classes":[{"id":"kzdlvy","name":"construction-full-width-container","settings":{"_width":"100%","_direction":"row","_alignItems":"stretch"}},{"id":"jxypep","name":"construction-h2","settings":{"_typography:tablet_portrait":{"font-size":"32"},"_typography":{"font-size":"40","font-family":"Rubik","color":{"hex":"#2a2a2a"}},"_typography:mobile_landscape":{"font-size":"28"}}},{"id":"ejiadu","name":"construction_grey-text","settings":{"_typography":{"color":{"hex":"#666666"},"font-size":"17"}},"modified":1756713051,"user_id":1},{"id":"moeqkt","name":"construction-yellow-divider","settings":{"width":"10%","height":"5","color":{"hex":"#ffb400"}}},{"id":"duphfv","name":"construction_form-simple","settings":{"submitButtonWidth":"40","submitButtonBackgroundColor":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0)","hsl":"hsla(0, 0%, 0%, 0)"},"submitButtonBorder":{"width":{"top":"5","right":"5","bottom":"5","left":"5"},"style":"solid","color":{"hex":"#ffffff"}},"submitButtonTypography":{"color":{"hex":"#ffffff"},"font-weight":"500","text-transform":"uppercase","font-family":"Rubik","font-size":"14"},"placeholderTypography":{"color":{"hex":"#8e8e93"}},"horizontalAlignFields":"flex-end","fieldMargin":{"right":"20"},"submitButtonMargin":{"right":"20"},"fieldPadding":{"top":"8","bottom":"8"},"fieldMargin:mobile_landscape":{"right":"0"},"submitButtonWidth:mobile_landscape":"100","submitButtonMargin:mobile_landscape":{"right":"0"}},"modified":1755688593,"user_id":1},{"id":"hiisct","name":"construction_form","settings":{"_background":{"color":{"hex":"#f7f7f7"}}}},{"id":"yyxnlp","name":"construction_form-container","settings":{"_alignItems":"center","_padding":{"left":"5%","top":"5%","right":"5%","bottom":"5%"},"_rowGap":"100","_columnGap":"100","_rowGap:mobile_landscape":"50","_padding:mobile_landscape":{"top":"10%","bottom":"10%"}}},{"id":"eupyhy","name":"construction_form-col","settings":{"_columnGap":"30","_rowGap":"30"}},{"id":"gudzxt","name":"construction_form-col_faq","settings":{"_background":{"color":{"hex":"#ffffff"}},"_padding":{"top":"1%","bottom":"1%"}}},{"id":"ozmzkq","name":"construction_faq-acc","settings":[]},{"id":"czgmni","name":"construction_faq-item","settings":{"_padding":{"left":"5%","top":"3%","right":"5%","bottom":"3%"}}},{"id":"asuukm","name":"construction_faq-divider","settings":{"color":{"hex":"#c5c5c5","rgb":"rgba(197, 197, 197, 0.16)","hsl":"hsla(0, 0%, 77%, 0.16)"},"style":"solid","height":"1"},"modified":1755093812,"user_id":1},{"id":"npfcet","name":"construction_faq-title","settings":[]},{"id":"bieqya","name":"construction_faq-title-h5","settings":{"_typography":{"font-size":"16","font-family":"Rubik"},"_widthMax:mobile_portrait":"90%","_widthMax:mobile_landscape":"90%"},"modified":1756744600,"user_id":1},{"id":"kuxzhx","name":"construction_faq-icon-main","settings":{"iconColor":{"hex":"#ffb401"},"iconSize":"20px"}},{"id":"thisej","name":"construction-faq-open-icon","settings":[]},{"id":"lyuqzg","name":"construction-faq-close-icon","settings":[]},{"id":"bcvhag","name":"construction_map-container","settings":{"_width":"100%"}},{"id":"kjiobc","name":"construction_map-map","settings":{"height":"400","_gradient":{"colors":[{"id":"cmasjg"},{"id":"cmasjg"}]}}}]}
Profile Picture
Akshay Joshi

Construction kit – CTA and Form

Contact section with form and call-to-action
View now
Copy now
{"id":3560,"name":"construction-kit-contact-section-two","title":"Construction kit - Contact Section two","date":"2025-09-01 17:37:13","date_formatted":"September 1, 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\/construction-kit-contact-section-two\/","thumbnail":null,"bundles":[],"tags":[],"type":"section","content":[{"id":"03baa3","name":"section","parent":0,"children":["7567bc","e89ba3"],"settings":{"_cssGlobalClasses":["ecvdox","rocynw"]},"label":"Contact Section two"},{"id":"7567bc","name":"container","parent":"03baa3","children":["ba294f"],"settings":{"_cssGlobalClasses":["yqvcnt"]}},{"id":"ba294f","name":"heading","parent":"7567bc","children":[],"settings":{"text":"Have a Project in Mind? Let\u2019s Get Building!","tag":"h2","_cssGlobalClasses":["gaoiwh"]}},{"id":"e89ba3","name":"container","parent":"03baa3","children":["917e6e","9b005a"],"settings":{"_cssGlobalClasses":["imymyf","kzdlvy","jgaman"]}},{"id":"917e6e","name":"block","parent":"e89ba3","children":["0ef383","64f6e1"],"settings":{"_cssGlobalClasses":["qpsnnz"]},"label":"Column"},{"id":"0ef383","name":"div","parent":"917e6e","children":["8366e5","4fac4a"],"settings":{"_cssGlobalClasses":["ziecxf"]}},{"id":"8366e5","name":"heading","parent":"0ef383","children":[],"settings":{"text":"Contact Us","tag":"h2","_cssGlobalClasses":["jxypep"]}},{"id":"4fac4a","name":"divider","parent":"0ef383","children":[],"settings":{"_cssGlobalClasses":["yfabgg"]}},{"id":"64f6e1","name":"form","parent":"917e6e","children":[],"settings":{"fields":[{"type":"text","label":"Name","placeholder":"Your Name","id":"a7afd5","width":"50"},{"type":"email","label":"Email","placeholder":"Your Email","required":true,"id":"c444db","width":"50"},{"type":"textarea","label":"Message","placeholder":"Your Message","required":true,"id":"2b9955"}],"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":["duphfv"],"submitButtonText":"Send Message","submitButtonSize":"xl","submitButtonWidth:mobile_portrait":"100"},"themeStyles":[]},{"id":"9b005a","name":"block","parent":"e89ba3","children":["69aac3","34ebef"],"settings":{"_cssGlobalClasses":["nnayuz"]},"label":"Column"},{"id":"69aac3","name":"block","parent":"9b005a","children":["8c3a28"],"settings":{"_cssGlobalClasses":["zvptzf"]}},{"id":"8c3a28","name":"social-icons","parent":"69aac3","children":[],"settings":{"_padding":{"top":15,"right":15,"bottom":15,"left":15},"_typography":{"color":{"hex":"#ffffff"}},"icons":[{"icon":{"library":"fontawesomeBrands","icon":"fab fa-twitter"},"id":"zffmjd"},{"icon":{"library":"fontawesomeBrands","icon":"fab fa-facebook-f"},"id":"nlkypw"},{"icon":{"library":"fontawesomeBrands","icon":"fab fa-linkedin-in"},"id":"zebvsm"}],"_cssGlobalClasses":["obkgat"]},"themeStyles":[]},{"id":"34ebef","name":"block","parent":"9b005a","children":["fe646a"],"settings":{"_cssGlobalClasses":["ixspio"]}},{"id":"fe646a","name":"list","parent":"34ebef","children":[],"settings":{"items":[{"title":"Lorem ipsum dolor sit amet, consectetur adipiscing elit.","id":"fhcjth","icon":{"library":"fontawesomeSolid","icon":"fas fa-location-dot"}},{"title":"+00 123 456 78","id":"eeziya","icon":{"library":"fontawesomeSolid","icon":"fas fa-phone"}},{"title":"constractioninc@gmail.com","id":"wdkpuo","icon":{"library":"fontawesomeSolid","icon":"fas fa-envelope"}}],"_cssGlobalClasses":["vkacws"]},"themeStyles":[]}],"templateType":"section","global_classes":[{"id":"ecvdox","name":"construction-default-section","settings":{"_padding":{"top":"100","bottom":"100","right":"8%","left":"8%"},"_padding:tablet_portrait":{"top":"75","bottom":"75","right":"5%","left":"5%"}}},{"id":"imymyf","name":"construction-default-container","settings":{"_rowGap":"20px"}},{"id":"kzdlvy","name":"construction-full-width-container","settings":{"_width":"100%","_direction":"row","_alignItems":"stretch"}},{"id":"rocynw","name":"construction-fullwidth-section","settings":{"_padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},{"id":"jxypep","name":"construction-h2","settings":{"_typography:tablet_portrait":{"font-size":"32"},"_typography":{"font-size":"40","font-family":"Rubik","color":{"hex":"#2a2a2a"}},"_typography:mobile_landscape":{"font-size":"28"}}},{"id":"jgaman","name":"construction-contact-container","settings":{"_width":"100%","_rowGap:mobile_portrait":"0","_rowGap:mobile_landscape":"0"},"modified":1754910590,"user_id":1},{"id":"qpsnnz","name":"construction-contact-left-col","settings":{"_background":{"color":{"hex":"#ffb401"}},"_padding":{"top":"6.5%","right":"5%","bottom":"6.5%","left":"5%"},"_columnGap":"50","_rowGap":"50"}},{"id":"nnayuz","name":"construction-contact-right-col","settings":[]},{"id":"zvptzf","name":"construction-contact-social-icon-block","settings":{"_background":{"color":{"hex":"#2a2a2a"}},"_alignItems":"center"}},{"id":"obkgat","name":"construction-contact-social-icon-list","settings":{"iconSize":"20","gap":"20","iconColor:hover":{"hex":"#ffb401"}},"modified":1755711977,"user_id":1},{"id":"vkacws","name":"construction-contact_contact-list","settings":{"separatorDisable":true,"titleMargin":{"left":"10","right":"0"},"titleTypography":{"font-weight":"600"},"itemJustifyContent":"flex-start","_widthMax":"430","itemMargin":{"bottom":"15"},"_typography":{"font-family":"Rubik","font-size":"15","font-weight":"500"}},"modified":1755084753,"user_id":1},{"id":"ixspio","name":"construction-contact_contact-block","settings":{"_padding":{"top":"50","right":"50","bottom":"50","left":"50"},"_justifyContent":"center","_alignItems":"center","_alignSelf":"center"},"modified":1754579315,"user_id":1},{"id":"duphfv","name":"construction_form-simple","settings":{"submitButtonWidth":"40","submitButtonBackgroundColor":{"hex":"#000000","rgb":"rgba(0, 0, 0, 0)","hsl":"hsla(0, 0%, 0%, 0)"},"submitButtonBorder":{"width":{"top":"5","right":"5","bottom":"5","left":"5"},"style":"solid","color":{"hex":"#ffffff"}},"submitButtonTypography":{"color":{"hex":"#ffffff"},"font-weight":"500","text-transform":"uppercase","font-family":"Rubik","font-size":"14"},"placeholderTypography":{"color":{"hex":"#8e8e93"}},"horizontalAlignFields":"flex-end","fieldMargin":{"right":"20"},"submitButtonMargin":{"right":"20"},"fieldPadding":{"top":"8","bottom":"8"},"fieldMargin:mobile_landscape":{"right":"0"},"submitButtonWidth:mobile_landscape":"100","submitButtonMargin:mobile_landscape":{"right":"0"}},"modified":1755688593,"user_id":1},{"id":"yfabgg","name":"construction-contact-left-col_divider","settings":{"height":"5","width":"22%"}},{"id":"ziecxf","name":"construction-contact-section_heading-div","settings":{"_display":"flex","_direction":"column","_columnGap":"20","_rowGap":"20"}},{"id":"yqvcnt","name":"construction_big-cta","settings":{"_width":"100%","_background":{"color":{"hex":"#ffb401"}},"_padding":{"top":"80","bottom":"80"},"_justifyContent":"center","_alignItems":"center"}},{"id":"gaoiwh","name":"const_cta-big-heading","settings":{"_widthMax":"600","_typography":{"text-align":"center","font-family":"Rubik","font-size":"50","color":{"hex":"#2a2a2a"}},"_typography:tablet_portrait":{"font-size":"40"},"_typography:mobile_portrait":{"font-size":"30"},"_padding:mobile_portrait":{"left":"5%","right":"5%"}}}]}

Categories

Forms
Inputs

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