Talk With Us Modal

<!DOCTYPE html><html data-wf-domain="www.clozd.com" data-wf-page="66b3ac683d7dfc659507d632" data-wf-site="602c29edc35660e6c913f956" lang="en"><head><meta charset="utf-8"/><title>Talk With Us Modal</title><link rel="alternate" hrefLang="x-default" href="https://www.clozd.com/talk-with-us-modal"/><link rel="alternate" hrefLang="en-US" href="https://www.clozd.com/talk-with-us-modal"/><link rel="alternate" hrefLang="en-GB" href="https://www.clozd.com/en-gb/talk-with-us-modal"/><meta content="Talk With Us Modal" property="og:title"/><meta content="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/65a18ad899c26a52ab5d2ff1_Layer_1%20(2).png" property="og:image"/><meta content="Talk With Us Modal" property="twitter:title"/><meta content="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/65a18ad899c26a52ab5d2ff1_Layer_1%20(2).png" property="twitter:image"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="google-site-verification=yKQJBAPScUnYXdfBsrp2J2nYZHjMtcJ6z_M5lq62xZ4" name="google-site-verification"/><link href="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/css/clozd.505c1ff86.min.css" rel="stylesheet" type="text/css"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><script type="text/javascript">WebFont.load({ google: { families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic","Great Vibes:400","Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Inter:100,200,300,regular,500,600,700,800,900"] }});</script><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/65a18afa4ef7bcc065f8239b_Layer_1%20(2).png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/65a18ad899c26a52ab5d2ff1_Layer_1%20(2).png" rel="apple-touch-icon"/><link href="https://www.clozd.com/talk-with-us-modal" rel="canonical"/>  <script defer>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PPT2W5NL'); console.log('gtag defer running')</script>   <script async src="https://www.googletagmanager.com/gtag/js?id=G-23GZD90PH7"></script> <script> 聽聽window.dataLayer = window.dataLayer || []; 聽聽function gtag(){dataLayer.push(arguments);} 聽聽gtag('js', new Date());聽聽gtag('config', 'G-23GZD90PH7'); console.log('running gtag'); </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> console.log('jqueryrunning'); </script> <script defer id="6senseWebTag" src=https://j.6sc.co/j/1bc27dbd-3944-47a9-9890-f63721e060e0.js> console.log('6sense running'); </script> <style> .fs-cc-banner_text { font-family: 'Inter'; } .fs-cc-banner_button { font-family: 'Inter'; } .w-slider-dot { background: #565F66 !important; } .w-slider-dot.w-active { background: #14A6F8 !important; } .left-drop-shadow { box-shadow: 20px 25px 60px -12px rgba(0, 0, 0, 0.25); } .right-drop-shadow { box-shadow: -20px 25px 60px -12px rgba(0, 0, 0, 0.25); } img.logo-target { transition: 1.5s; } .nav-logo-container:hover > .logo-target{ transform: rotate(360deg); } .highlight { background-color: #09D4C8; color: white; } </style> <meta property="og:logo" content="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/65a18ad899c26a52ab5d2ff1_Layer_1%20(2).png" />  <script> "use strict"; !function() { var t = window.driftt = window.drift = window.driftt || []; if (!t.init) { if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice.")); t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ], t.factory = function(e) { return function() { var n = Array.prototype.slice.call(arguments); return n.unshift(e), t.push(n), t; }; }, t.methods.forEach(function(e) { t[e] = t.factory(e); }), t.load = function(t) { var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script"); o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js"; var i = document.getElementsByTagName("script")[0]; i.parentNode.insertBefore(o, i); }; } }(); // Add a setTimeout to delay the Drift script load by 10 seconds setTimeout(function() { drift.SNIPPET_VERSION = '0.3.1'; drift.load('33xkfd4gmg6f'); }, 10000); // 10000ms = 10 seconds </script>  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" /> <style> input { width: 400px !important; height: 30px; left: 720px; top: 376px; background: #F7F8F9; border: 1px solid #E1E3E6; border-radius: 10px; font-size: 16px !important; padding-left: 10px; } input[type="submit"] { width: 98px !important; height: 40px; left: 721px; top: 976px; background: #14A6F8; border-radius: 8px; border: none; color: white; font-size: 14px; font-family: 'Inter'; transition: .2s; } input[type="submit"]:hover { background: black; cursor: pointer; } p.submit { margin-left: 0px !important; } p.form-field { display: flex; flex-direction: column; } label.field-label { text-align: left !important; margin-bottom: 10px !important; color: #565F66 !important; } select#\31 022093_11859pi_1022093_11859 { background: #F7F8F9; border: 1px solid #E1E3E6; border-radius: 10px; height: 25px; width: 400px !important; } textarea#\31 022093_11862pi_1022093_11862 { background: #F7F8F9; border: 1px solid #E1E3E6; border-radius: 10px; width: 400px !important; } .footer-link-3 { color: #fff !important; text-decoration: none !important; } @media screen and (min-width: 615px) { input { width: 260px !important; } } </style></head><body><div class="twu-form-container show"><div class="html-embed-35 new html w-embed w-script"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="form-modal-container"> <div class="form-modal-head"> <div class="form-modal-top-container"> <div class="x-container"> <a href="https://www.clozd.com" id="close"><img src='https://cdn.prod.website-files.com/602c29edc35660e6c913f956/6192c88369cac3892887b158_Untitled%20design%20(32).png' /> </a> </div> <div id="progress-bar-track"></div> <div id="progress-bar"></div> <div class="logo"> <img class="logo" src="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/65a19f67b74b29a490c495ee_Layer_1%20(4).png" /> </div> </div> <div class="form-modal-left"> <div class="content-container"> <div class="content-change-1" id="section-1"> <h1>Let鈥檚 connect you with a win-loss expert!</h1> <h2>What's <span>your name?</span></h2> <form id="formCollection"> <div class="form-item"> <p>First name*</p> <input id="first-name"> </div> <div class="form-item"> <p>Last name*</p> <input id="last-name"> </div> </form> <button class="disabled" id="next-button" onclick="nextSection()">Next</button> </div> <div class="content-change-2" id="section-2"> <div class="arrow-container"> <div onclick="nextSectionArrow()"> <div class="arrow-wrap"><img src="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/637685c3abe61b77ee6181c3_Arrow%206%20(1).svg" /> Back </div> </div> </div> <h2>What <span>company</span> do you work for?</h2> <form id="formCollection"> <div class="form-item"> <p>Company*</p> <input id="company"> </div> </form> <button class="disabled" id="next-button2" onclick="nextSection2()">Next</button> </div> <div class="content-change-3" id="section-3"> <div class="arrow-container"> <div onclick="nextSectionArrow1()"> <div class="arrow-wrap"><img src="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/637685c3abe61b77ee6181c3_Arrow%206%20(1).svg" /> Back </div> </div> </div> <h2>How <span>can we reach you?</span></h2> <form id="formCollection"> <div class="form-item"> <p>Work email*</p> <input id="work-email"> </div> <div class="form-item"> <p>Phone number*</p> <input id="phone"> </div> </form> <button class="disabled" id="next-button3" onclick="nextSection3()">Next</button> </div> <div class="content-change-4" id="section-4"> <div class="arrow-container2"> <div onclick="nextSectionArrowC()"> <div class="arrow-wrap"><img src="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/637685c3abe61b77ee6181c3_Arrow%206%20(1).svg" /> Back </div> </div> </div> <h2>Is there <span>anything else you鈥檇 like us to know?</span></h2> <form id="formCollection"> <div class="form-item"> <p>Comments (not required)</p> <textarea id="comments"> </textarea> </div> </form> <button class="" id="next-button4" onclick="nextSection4()">Next</button>  </div> <div class="content-change-5" id="section-5"> <h2>Does this <span>look correct?</span></h2> <div class="padot-form-container"> </div> </div> </div> </div> <div class="form-modal-right"> <img class="img-shape" src="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/661993f532d9b34854e172d8_Vector%20(72).svg" /> <img class="img-platform" src="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/66199420cb2464c2e27dd1f2_Clip%20path%20group%20(3).svg" /> <img class="img-person" src="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/66199430e283181a1c9446d6_AdobeStock_472263145%20copy%202%201%20(1).png" /> <div class="arrow-container last" id="arrow-last"> <div class="last-arrow" onclick="nextSectionArrow5()"> <div class="arrow-wrap"> Back </div> </div> </div> </div> </div> </div> </body> </html></div><div class="html-embed-35 new css w-embed"><style> h1 { width: 675px; margin-bottom: 50px; font-family: Inter; font-size: 34px; font-style: normal; font-weight: 600; line-height: normal; } h2 { color: #000; font-family: Inter; font-size: 28px; font-style: normal; font-weight: 200; line-height: normal; margin-bottom: 35px; } span { font-weight: 600; } input { border-radius: 10px; border: var(--Values-0, 1px) solid var(--Gray-5, #E1E3E5); background: var(--gray-3, #F7F8F9); width: 500px; height: 40px; flex-shrink: 0; padding-left: 10px; font-family: 'Inter' } textarea { border-radius: 10px; border: var(--Values-0, 1px) solid var(--Gray-5, #E1E3E5); background: var(--gray-3, #F7F8F9); width: 500px; height: 40px; flex-shrink: 0; padding-left: 10px; font-family: 'Inter' } p { color: var(--Gray-11t, #565F66); font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; margin: 0 0 12px 0; } form { display: flex; flex-direction: column; gap: 40px; } button { display: inline-flex; padding: 11.5px 25px; justify-content: center; align-items: center; gap: var(--Spacing-10, 10px); border-radius: var(--Values-8, 8px); background: var(--blue-4, #14A6F8); border: none; color: white; width: 82px; cursor: pointer; transition: .2s; margin-top: 25px; font-family: 'Inter'; } button:hover { background-color: black; } .content-change-2 { display: none; margin-top: 200px; } .content-change-3 { display: none; margin-top: 200px; } .content-change-4 { display: none; } .content-change-5 { display: none; } #comments { height: 100px; } .content-container { width: 600px; } form#pardot-form { display: none; } .form-modal-container { height: 100vh; width: 100vw; border-radius: 0px; /* opacity: 0.5; */ backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; overflow: hidden; flex-direction: column; backdrop-filter: blur(10px); } .form-modal-head { width: 1200px; height: 775px; background-color: #FFF; box-shadow: 0px 25px 60px -12px rgba(0, 0, 0, 0.25); border-radius: 10px; display: flex; flex-direction: row; padding: 15px 45px; position: relative; } .logo { width: 75px; margin-top: 10px; } .content-container { margin-top: 100px; } .form-modal-left { position: relative; width: 50%; } .form-modal-right { position: relative; width: 50%; display: flex; align-items: center; margin-right: 80px; } .form-modal-right img { position: absolute; } .img-platform { box-shadow: 0px 25px 60px -12px rgba(0, 0, 0, 0.25); } .img-person { margin-left: 259px; margin-top: -193px; } .img-shape { margin-left: 86px; } /* .padot-form-container > :nth-child(1) { display: none; } */ .disabled { pointer-events: none; background-color: #94d3f6; } .arrow-container { display: flex; gap: 20px; width: 80px; height: 40px; align-items: center; color: #14A6F8; border-radius: 10px; margin-top: -149px; position: absolute; cursor: pointer; } .arrow-container2 { display: flex; gap: 20px; width: 80px; height: 40px; align-items: center; color: #14A6F8; border-radius: 10px; margin-top: -60px; position: absolute; cursor: pointer; } #progress-bar { width: 0%; background: var(--Gradients-Full, linear-gradient(93deg, #09D4C8 0%, #0FA3F7 51.04%, #274FDB 100%)); height: 8px; margin-left: -45px; position: absolute; margin-top: -15px; border-top-left-radius: 10px; border-top-right-radius: 10px; transition: 1s; } #progress-bar-track { width: 100%; background: #B9E9FF; height: 8px; margin-left: -45px; position: absolute; margin-top: -15px; border-top-left-radius: 10px; border-top-right-radius: 10px; transition: 1s; } .arrow-container.last { margin-top: 700px; } .x-container { display: flex; width: 100%; position: absolute; margin-left: -50px; margin-top: -38px; justify-content: flex-end; } a#close { width: 15px; } .form-modal-right.arrow-container.last-arrow.arrow-wrap { display: flex; flex-direction: row; } @media screen and (max-width: 1000px) { .form-modal-head { width: auto; height: 800px; flex-direction: column; } .form-modal-right { display: none; } .form-modal-left { position: relative; width: 100%; display: flex; justify-content: center; } .content-container { margin: 0; } .content-change-2 { margin-top: 100px; } .content-change-3 { margin-top: 100px; } .content-change-4 { margin-top: 100px; } h1 { width: auto; } } @media screen and (max-width: 500px) { .content-container { width: 350px; } textarea { width: 300px; } input { width: 200px !important; } iframe { width: 300px !important; } .x-container { display: flex; width: 84%; position: absolute; margin-left: -50px; margin-top: -38px; justify-content: flex-end; } .arrow-container { display: flex; gap: 20px; width: 100%; height: 40px; align-items: center; color: #14A6F8; border-radius: 10px; margin-top: -126px; position: absolute; cursor: pointer; display: flex; justify-content: end; } } #arrow-last { display: none; } div#close { transition: .5s; cursor: pointer; } div#close:hover { rotate: 90deg; } .arrow-wrap { display: flex; gap: 10px; font-family: 'Inter'; } </style></div><div class="html-embed-35 new js w-embed w-script"><script> // Reference input elements var firstName = document.getElementById("first-name"); var lastName = document.getElementById("last-name"); var company = document.getElementById("company"); var email = document.getElementById("work-email"); var phone = document.getElementById("phone"); var comments = document.getElementById("comments"); var lastArrow = document.getElementById("arrow-last"); var sectionOne = document.getElementById("section-1"); var sectionTwo = document.getElementById("section-2"); var sectionThree = document.getElementById("section-3"); var sectionFour = document.getElementById("section-4"); var sectionFive = document.getElementById("section-5"); var progress = document.getElementById('progress-bar'); function nextSectionArrow() { sectionOne.style.display = "block"; sectionTwo.style.display = "none"; progress.style.width = '0%'; } function nextSectionArrow1() { sectionThree.style.display = "none"; sectionTwo.style.display = "block"; progress.style.width = '20%'; } function nextSectionArrow2() { sectionThree.style.display = "block"; sectionFour.style.display = "none"; progress.style.width = '40%'; } function nextSectionArrowC() { sectionThree.style.display = "block"; sectionFour.style.display = "none"; progress.style.width = '40%'; lastArrow.style.display = "none"; } function nextSectionArrow5() { sectionFive.style.display = "none"; sectionFour.style.display = "block"; progress.style.width = '80%'; lastArrow.style.display = "none"; } function nextSection() { localStorage.setItem("first_name", firstName.value); localStorage.setItem("last_name", lastName.value); sectionOne.style.display = "none"; sectionTwo.style.display = "block"; progress.style.width = '20%'; progress.style.borderTopRightRadius = '0px'; } function nextSection2() { localStorage.setItem("company", company.value); sectionTwo.style.display = "none"; sectionThree.style.display = "block"; progress.style.width = '40%'; } function nextSection3() { localStorage.setItem("email", email.value); localStorage.setItem("phone", phone.value); sectionThree.style.display = "none"; sectionFour.style.display = "block"; progress.style.width = '80%'; progress.style.borderTopRightRadius = '10px'; console.log(typeof email.value); // Log the type of the email value populateFormFields(); // Populate form fields with updated values } function nextSection4() { sectionFive.style.display = "block"; sectionFour.style.display = "none"; progress.style.width = '100%'; progress.style.borderTopRightRadius = '10px'; lastArrow.style.display = "flex"; populateFormFields(); } function nextSection5() { localStorage.setItem("Comment", comments.value); sectionFour.style.display = "block"; sectionFive.style.display = "none"; progress.style.width = '100%'; } document.getElementById('formCollection').addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); } }); function populateFormFields() { var form = 'https://marketing.clozd.com/l/1022093/2024-04-12/2dkpp?'; var queryParams = ''; // Build the query string for the iframe src if (firstName.value) { queryParams += 'first_name=' + encodeURIComponent(firstName.value) + '&'; } if (lastName.value) { queryParams += 'last_name=' + encodeURIComponent(lastName.value) + '&'; } if (company.value) { queryParams += 'company=' + encodeURIComponent(company.value) + '&'; } if (email.value) { queryParams += 'email=' + encodeURIComponent(email.value) + '&'; } if (phone.value) { queryParams += 'phone=' + encodeURIComponent(phone.value) + '&'; } if (comments.value) { queryParams += 'Comment=' + encodeURIComponent(comments.value) + '&'; } var formContainer = document.querySelector('.padot-form-container'); // Clear any existing iframes formContainer.innerHTML = ''; var iframe = document.createElement('iframe'); iframe.setAttribute('src', form + queryParams); iframe.setAttribute('width', 500); iframe.setAttribute('height', 900); iframe.setAttribute('type', 'text/html'); iframe.setAttribute('frameborder', 0); iframe.setAttribute('allowTransparency', 'true'); iframe.style.border = '0'; // Append the iframe to the formContainer formContainer.appendChild(iframe); } // field validations $(document).ready(function () { $('#first-name, #last-name').on('input', function () { if ($('#first-name').val() !== '' && $('#last-name').val() !== '') { $('#next-button').removeClass('disabled'); } else { $('#next-button').addClass('disabled'); } }); $('#work-email, #phone').on('input', function () { if ($('#work-email').val() !== '' && $('#phone').val() !== '') { $('#next-button3').removeClass('disabled'); } else { $('#next-button3').addClass('disabled'); } }); $('#company').on('input', function () { if ($('#company').val() !== '') { $('#next-button2').removeClass('disabled'); } else { $('#next-button2').addClass('disabled'); } }); $('#close').on('click', function () { $('.twu-form-container').hide(); }); }); document.addEventListener('keydown', function (event) { if (event.key === 'Enter') { event.preventDefault(); } }); </script></div><div class="twu-form-bg"></div></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=602c29edc35660e6c913f956" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/602c29edc35660e6c913f956/js/clozd.e72ca6021.js" type="text/javascript"></script> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PPT2W5NL" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <script async src="https://cdn.jsdelivr.net/npm/@finsweet/cookie-consent@1/fs-cc.js" fs-cc-mode="informational"></script> <script>(function (c, p, d, u, id, i) { id = ''; // Optional Custom ID for user in your system u = 'https://tracking.g2crowd.com/attribution_tracking/conversions/' + c + '.js?p=' + encodeURI(p) + '&e=' + id; i = document.createElement('script'); i.type = 'application/javascript'; i.async = true; i.src = u; d.getElementsByTagName('head')[0].appendChild(i); }("3704", document.location.href, document)); </script> <script type='text/javascript'> piAId = '1023093'; piCId = ''; piHostname = 'marketing.clozd.com'; (function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js'; var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c); } if(window.attachEvent) { window.attachEvent('onload', async_load); } else { window.addEventListener('load', async_load, false); } })(); // Select all anchor tags on the page const links = document.querySelectorAll('a'); // Loop through each link links.forEach(link => { // Check if the href attribute matches the target URL if (link.href === 'https://www.clozd.com/talk-with-us') { // Update the href attribute to the new URL link.href = 'https://www.clozd.com/talk-with-us-modal'; } }); </script> <script id="jetboost-script" type="text/javascript"> window.JETBOOST_SITE_ID = "cllv8qxtf02330ju4bnr7gax0"; (function(d) { var s = d.createElement("script"); s.src = "https://cdn.jetboost.io/jetboost.js"; s.async = 1; d.getElementsByTagName("head")[0].appendChild(s); })(document); </script> </body></html>

CINXE.COM

Talk With Us Modal