Sun Pro - zni偶ka z Kart膮 Mundurow膮

<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"> <title>Sun Pro - zni偶ka z Kart膮 Mundurow膮</title> <link rel="stylesheet" type="text/css" href="https://static.user.com/static/css/UnlayerPublicForms.4caf13fb16a32aefb09e.css"> <link rel="shortcut icon" type="image/png" href="https://media.user.com/uploads/z2jw8r-d24/favicon_bCCuk2u.png"/> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> <link href='' rel='stylesheet' type='text/css'> <style> .u-row { display: flex; flex-wrap: nowrap; margin-left: 0; margin-right: 0; } .u-row .u-col { position: relative; width: 100%; padding-right: 0; padding-left: 0; } .u-row .u-col.u-col-33p33 { flex: 0 0 33.33%; max-width: 33.33%; } .u-row .u-col.u-col-50 { flex: 0 0 50%; max-width: 50%; } .u-row .u-col.u-col-100 { flex: 0 0 100%; max-width: 100%; } @media (max-width: 767px) { .u-row:not(.no-stack) { flex-wrap: wrap; } .u-row:not(.no-stack) .u-col { flex: 0 0 100% !important; max-width: 100% !important; } } .layout-mobile .u-row:not(.no-stack) { flex-wrap: wrap; } .layout-mobile .u-row:not(.no-stack) .u-col { flex: 0 0 100% !important; max-width: 100% !important; } body,html{padding:0;margin:0}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}html{font-size:14px;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}p{margin:0}form .error-field{-webkit-animation-name:shake;animation-name:shake;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}form .error-field input,form .error-field textarea{border-color:#a94442!important;color:#a94442!important}form .field-error{padding:5px 10px;font-size:14px;font-weight:700;position:absolute;top:-20px;right:10px}form .field-error:after{top:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-top-color:#ebcccc;border-width:5px;margin-left:-5px}form .spinner{margin:0 auto;width:70px;text-align:center}form .spinner>div{width:12px;height:12px;background-color:hsla(0,0%,100%,.5);margin:0 2px;border-radius:100%;display:inline-block;-webkit-animation:sk-bouncedelay 1.4s infinite ease-in-out both;animation:sk-bouncedelay 1.4s infinite ease-in-out both}form .spinner .bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}form .spinner .bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes sk-bouncedelay{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@media (max-width:480px){.hide-mobile{display:none!important}.container{max-width:100%!important}}@media (min-width:481px) and (max-width:768px){.hide-tablet{display:none!important}}@media (min-width:481px){.hide-desktop{display:none!important}}.container{width:100%;padding-right:0;padding-left:0;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}} a[onclick] { cursor: pointer; } body { font-family: 'Open Sans',sans-serif; font-size: 1rem; line-height: 1.5; color: #000000; background-color: #e7e7e7; } #u_body a { color: #0000ee; text-decoration: underline; } #u_body a:hover { color: #0000ee; text-decoration: underline; } @media (max-width: 480px) { #u_content_text_1 .v-line-height { line-height: 170% !important; } } </style> </head> <body> <div id="snackbar" class="ue-landing-page__snackbar"></div> <div id="u_body" class="u_body" style="min-height: 100vh;"> <div id="u_row_2" class="u_row v-row-padding v-row-background-image--outer v-row-background-color" style="background-color: #212121; padding: 0px;"> <div class="container v-row-background-image--inner v-row-columns-background-color-background-color" style="max-width: 1100px;margin: 0 auto;"> <div class="u-row v-row-align-items"> <div id="u_column_3" class="u-col u-col-50 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"> <div class="v-col-padding" style="width: 100%;padding:0px;"> <div id="u_content_image_16" class="u_content_image v-container-padding-padding" style="overflow-wrap: break-word;padding: 30px;"> <div class="v-text-align" style="position:relative;line-height:0px;text-align:center"> <img alt="" class="v-src-width v-src-max-width" src="https://assets.unlayer.com/projects/1057/1701955843278-logo.png" style="width: 100%;max-width: 603px;" title=""/> </div> </div> </div> </div> <div id="u_column_4" class="u-col u-col-50 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"> <div class="v-col-padding" style="width: 100%;padding:0px;"> <div id="u_content_image_18" class="u_content_image v-container-padding-padding" style="overflow-wrap: break-word;padding: 32px;"> <div class="v-text-align" style="position:relative;line-height:0px;text-align:center"> <img alt="" class="v-src-width v-src-max-width" src="https://assets.unlayer.com/projects/1057/1701960156083-Bez%20nazwy-2.png" style="width: 27%;max-width: 27%;" title=""/> </div> </div> </div> </div> </div> </div> </div> <div id="u_row_16" class="u_row v-row-padding v-row-background-image--outer v-row-background-color" style="background-color: #212121; padding: 0px;"> <div class="container v-row-background-image--inner v-row-columns-background-color-background-color" style="max-width: 1100px;margin: 0 auto;"> <div class="u-row v-row-align-items"> <div id="u_column_33" class="u-col u-col-100 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"> <div class="v-col-padding" style="width: 100%;padding:0px;"> <div id="u_content_divider_11" class="u_content_divider v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px 10px 40px;"> <div style="text-align:center;line-height:0"><div style="border-top-width:1px;border-top-style:solid;border-top-color:#414141;width:100%;display:inline-block;line-height:1px;height:0px;vertical-align:middle"> </div></div> </div> </div> </div> </div> </div> </div> <div id="u_row_1" class="u_row v-row-padding v-row-background-image--outer v-row-background-color" style="background-color: #212121; padding: 0px;"> <div class="container v-row-background-image--inner v-row-columns-background-color-background-color" style="max-width: 1100px;margin: 0 auto;"> <div class="u-row v-row-align-items"> <div id="u_column_1" class="u-col u-col-100 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"> <div class="v-col-padding" style="width: 100%;padding:0px;"> <div id="u_content_text_26" class="u_content_text v-container-padding-padding" style="overflow-wrap: break-word;padding: 16px;"> <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size" style="font-size: 14px; color: #ffffff; line-height: 140%; text-align: left; word-wrap: break-word;"> <p style="font-size: 14px; line-height: 140%; text-align: left;"><strong><span style="font-size: 24px; line-height: 33.6px;">Z KART膭 MUNDUROW膭</span></strong></p> </div> </div> <div id="u_content_text_1" class="u_content_text v-container-padding-padding hide-desktop" style="overflow-wrap: break-word;padding: 16px;"> <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size" style="font-size: 14px; line-height: 170%; text-align: left; word-wrap: break-word;"> <p style="font-size: 14px; line-height: 170%;"><span style="font-size: 40px; line-height: 68px;"><strong><span style="line-height: 68px; color: #ffffff;">Ta艅szy pr膮d </span></strong></span><span style="font-size: 40px; line-height: 68px;"><strong><span style="line-height: 68px; color: #ffffff;">dla </span></strong></span></p> <p style="font-size: 14px; line-height: 170%;"><span style="font-size: 40px; line-height: 68px;"><strong><span style="line-height: 68px; color: #ffffff;">mundurowych</span></strong></span></p> </div> </div> <div id="u_content_text_21" class="u_content_text v-container-padding-padding hide-mobile" style="overflow-wrap: break-word;padding: 16px 16px 75px;"> <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size" style="font-size: 14px; line-height: 170%; text-align: left; word-wrap: break-word;"> <p style="font-size: 14px; line-height: 170%;"><span style="font-size: 40px; line-height: 68px;"><strong><span style="line-height: 23.8px; color: #ffffff;">Ta艅szy pr膮d </span></strong></span><span style="font-size: 40px; line-height: 68px;"><strong><span style="line-height: 23.8px; color: #ffffff;">dla </span></strong></span><span style="font-size: 40px; line-height: 68px;"><strong><span style="line-height: 23.8px; color: #ffffff;">mundurowych</span></strong></span></p> </div> </div> </div> </div> </div> </div> </div> <div id="u_row_17" class="u_row v-row-padding v-row-background-image--outer v-row-background-color" style="padding: 0px;"> <div class="container v-row-background-image--inner v-row-columns-background-color-background-color" style="max-width: 1100px;margin: 0 auto;"> <div class="u-row v-row-align-items"> <div id="u_column_35" class="u-col u-col-33p33 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;"> <div class="v-col-padding" style="width: 100%;padding:0px;"> <div id="u_content_heading_2" class="u_content_heading v-container-padding-padding" style="overflow-wrap: break-word;padding: 40px 10px 0px;"> <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight" style="margin: 0px; line-height: 140%; text-align: center; word-wrap: break-word; font-size: 22px; font-weight: 400;"><p style="line-height: 140%;"><strong>INSTALACJA FOTOWOLTAICZNA聽</strong></p></h1> </div> <div id="u_content_image_23" class="u_content_image v-container-padding-padding" style="overflow-wrap: break-word;padding: 0px;"> <div class="v-text-align" style="position:relative;line-height:0px;text-align:center"> <img alt="" class="v-src-width v-src-max-width" src="https://assets.unlayer.com/projects/1057/1702562950237-PV_KM.png" style="width: 100%;max-width: 2565px;" title=""/> </div> </div> </div> </div> <div id="u_column_36" class="u-col u-col-33p33 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;"> <div class="v-col-padding" style="width: 100%;padding:0px;"> <div id="u_content_heading_1" class="u_content_heading v-container-padding-padding" style="overflow-wrap: break-word;padding: 40px 0px 0px 10px;"> <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight" style="margin: 0px; line-height: 140%; text-align: center; word-wrap: break-word; font-size: 22px; font-weight: 400;"><span><span><span><span><strong>POMPA CIEP艁A</strong></span></span></span></span></h1> </div> <div id="u_content_image_24" class="u_content_image v-container-padding-padding" style="overflow-wrap: break-word;padding: 0px;"> <div class="v-text-align" style="position:relative;line-height:0px;text-align:center"> <img alt="" class="v-src-width v-src-max-width" src="https://assets.unlayer.com/projects/1057/1702562964849-PC_KM.png" style="width: 100%;max-width: 2565px;" title=""/> </div> </div> </div> </div> <div id="u_column_37" class="u-col u-col-33p33 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;"> <div class="v-col-padding" style="width: 100%;padding:0px;"> <div id="u_content_heading_3" class="u_content_heading v-container-padding-padding" style="overflow-wrap: break-word;padding: 40px 10px 0px;"> <h1 class="v-color v-text-align v-line-height v-font-size v-font-weight" style="margin: 0px; line-height: 140%; text-align: center; word-wrap: break-word; font-size: 22px; font-weight: 400;"><span><span><strong>MAGAZYN ENERGII</strong></span></span></h1> </div> <div id="u_content_image_25" class="u_content_image v-container-padding-padding" style="overflow-wrap: break-word;padding: 0px;"> <div class="v-text-align" style="position:relative;line-height:0px;text-align:center"> <img alt="" class="v-src-width v-src-max-width" src="https://assets.unlayer.com/projects/1057/1702562976996-ME_KM.png" style="width: 100%;max-width: 2565px;" title=""/> </div> </div> </div> </div> </div> </div> </div> <div id="u_row_18" class="u_row v-row-padding v-row-background-image--outer v-row-background-color" style="padding: 0px;"> <div class="container v-row-background-image--inner v-row-columns-background-color-background-color" style="max-width: 1100px;margin: 0 auto;"> <div class="u-row v-row-align-items"> <div id="u_column_38" class="u-col u-col-100 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;border-radius: 0px;"> <div class="v-col-padding" style="width: 100%;padding:0px;"> </div> </div> </div> </div> </div> <div id="u_row_7" class="u_row v-row-padding v-row-background-image--outer v-row-background-color" style="background-color: #212121; padding: 0px;background-image: url('https://images.unlayer.com/projects%2F1057%2F1602062070026-lines.png');background-repeat: no-repeat;background-position: center top;background-size: cover;"> <div class="container v-row-background-image--inner v-row-columns-background-color-background-color" style="max-width: 1100px;margin: 0 auto;"> <div class="u-row v-row-align-items"> <div id="u_column_18" class="u-col u-col-100 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"> <div class="v-col-padding" style="width: 100%;padding:0px;"> <div id="u_content_divider_8" class="u_content_divider v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px;"> <div style="text-align:center;line-height:0"><div style="border-top-width:1px;border-top-style:solid;border-top-color:#414141;width:100%;display:inline-block;line-height:1px;height:0px;vertical-align:middle"> </div></div> </div> </div> </div> </div> </div> </div> <div id="u_row_12" class="u_row v-row-padding v-row-background-image--outer v-row-background-color" style="background-color: #212121; padding: 64px 0px 0px;"> <div class="container v-row-background-image--inner v-row-columns-background-color-background-color" style="max-width: 1100px;margin: 0 auto;"> <div class="u-row v-row-align-items"> <div id="u_column_25" class="u-col u-col-50 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"> <div class="v-col-padding" style="width: 100%;padding:0px;"> <div id="u_content_image_22" class="u_content_image v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px;"> <div class="v-text-align" style="position:relative;line-height:0px;text-align:center"> <img alt="" class="v-src-width v-src-max-width" src="https://assets.unlayer.com/projects/1057/1701961051846-24-1404.jpg" style="width: 100%;max-width: 1920px;" title=""/> </div> </div> </div> </div> <div id="u_column_26" class="u-col u-col-50 u_column v-row-align-items v-col-background-color v-col-border v-col-border-radius" style="display:flex;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"> <div class="v-col-padding" style="width: 100%;padding:0px;"> <div id="u_content_text_8" class="u_content_text v-container-padding-padding hide-desktop" style="overflow-wrap: break-word;padding: 10px 10px 0px;"> <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size" style="font-size: 14px; color: #ffffff; line-height: 140%; text-align: left; word-wrap: break-word;"> <p style="font-size: 14px; line-height: 140%;"><span style="font-size: 20px; line-height: 28px;"><strong><span style="line-height: 19.6px;">Zainteresowa艂a Ci臋 nasza oferta?聽</span></strong></span></p> </div> </div> <div id="u_content_text_24" class="u_content_text v-container-padding-padding hide-mobile" style="overflow-wrap: break-word;padding: 10px 10px 0px;"> <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size" style="font-size: 14px; color: #ffffff; line-height: 140%; text-align: left; word-wrap: break-word;"> <p style="font-size: 14px; line-height: 140%;"><strong><span style="font-size: 26px; line-height: 36.4px;">Zainteresowa艂a Ci臋 nasza oferta?聽</span></strong></p> </div> </div> <div id="u_content_text_22" class="u_content_text v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px;"> <div class="v-color v-text-align v-line-height v-font-weight v-font-family v-font-size" style="font-size: 14px; color: #868686; line-height: 140%; text-align: left; word-wrap: break-word;"> <h2>Zostaw do siebie kontakt</h2> <p style="font-size: 14px; line-height: 140%;"><span style="font-size: 16px; line-height: 22.4px;">To nic nie kosztuje.聽</span></p> </div> </div> <div id="u_content_custom_usercom_attr_clientuser_1" class="u_content_custom_usercom_attr_clientuser v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px 10px 0px;"> <div style="padding-bottom: 10px"> <div style="text-align: left; color: #1B1B1B; font-size: 16px; padding: 0px 0px 3px;"> <label for="first_name"></label> </div> <div> <input class="usercomFormLayout" type="text" placeholder="Imi臋 i nazwisko" id="first_name" name="first_name" maxlength="32" data-hide-desktop="false" data-hide-mobile="false" required="true" style="border-width: 1px; border-style: solid; border-color: rgb(238, 238, 238); padding: 10px; color: #1B1B1B; background-color: rgb(255, 255, 255); font-size: 16px; width: 100%; border-radius: 0px; font-family: arial,helvetica,sans-serif !important;"> </div> </div> </div> <div id="u_content_custom_usercom_attr_clientuser_2" class="u_content_custom_usercom_attr_clientuser v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px 10px 0px;"> <div style="padding-bottom: 10px"> <div style="text-align: left; color: #1B1B1B; font-size: 16px; padding: 0px 0px 3px;"> <label for="email"></label> </div> <div> <input class="usercomFormLayout" type="email" placeholder="Email" id="email" name="email" maxlength="254" data-hide-desktop="false" data-hide-mobile="false" required="true" style="border-width: 1px; border-style: solid; border-color: rgb(238, 238, 238); padding: 10px; color: #1B1B1B; background-color: rgb(255, 255, 255); font-size: 16px; width: 100%; border-radius: 0px; font-family: arial,helvetica,sans-serif !important;"> </div> </div> </div> <div id="u_content_custom_usercom_attr_clientuser_3" class="u_content_custom_usercom_attr_clientuser v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px 10px 0px;"> <div style="padding-bottom: 10px"> <div style="text-align: left; color: #1B1B1B; font-size: 16px; padding: 0px 0px 3px;"> <label for="phone_number"></label> </div> <div> <input class="usercomFormLayout" type="text" placeholder="Numer telefonu" id="phone_number" name="phone_number" maxlength="64" data-hide-desktop="false" data-hide-mobile="false" required="true" style="border-width: 1px; border-style: solid; border-color: rgb(238, 238, 238); padding: 10px; color: #1B1B1B; background-color: rgb(255, 255, 255); font-size: 16px; width: 100%; border-radius: 0px; font-family: arial,helvetica,sans-serif !important;"> </div> </div> </div> <div id="u_content_custom_usercom_attr_clientuser_5" class="u_content_custom_usercom_attr_clientuser v-container-padding-padding" style="overflow-wrap: break-word;padding: 10px 10px 0px;"> <div style="padding-bottom: 10px"> <div style="text-align: left; color: #ffffff; font-size: 16px; padding: 0px 0px 3px;"> <input class="usercomFormLayout" type="checkbox" id="zgoda_landing_kartamundurowa_cf" name="zgoda_landing_kartamundurowa_cf" maxlength="255" data-hide-desktop="false" data-hide-mobile="false" required="true" style=""> <label for="zgoda_landing_kartamundurowa_cf">Wyra偶am zgod臋 na przetwarzanie przez Sun-Pro Sp. z o.o. moich danych osobowych podanych w formularzu, w celu kontaktowania si臋 telefonicznie, mailowo i przedstawiania informacji handlowych.</label> </div> </div> </div> <div id="u_content_custom_usercom_submit_1" class="u_content_custom_usercom_submit v-container-padding-padding" style="overflow-wrap: break-word;padding: 0px 10px 54px;"> <div class="v-text-align"> <button href="" id="submitUsercomLandingPage" class="v-size-width v-padding" style="border: 0px solid; display: inline-block; text-align: center; overflow: hidden; cursor: pointer; text-decoration: none; padding: 16px 10px; margin: 8px 5px 0px 0px; font-size: 19px; width: 100%; border-radius: 5px !important; color: #ffffff; background-color: #f59a1d; font-family: arial,helvetica,sans-serif !important; text-align: center; ">Wy艣lij</button> </div> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://static.user.com/static/landingpage/formsMultiselect.js"></script> <script type="text/javascript"> window.civchat = { apiKey: "Z2jW8r", tenantDomain: "https://d24.user.com", state: "hidden" }; </script> <script type="text/javascript" src="https://d24.user.com/widget.js"></script> <script> const idLayout = '12' const slugLayout = 'pp5twg' const badgeLayout = 'A' const maxLengthMessage = "The maximum number of characters attributes is too long. Max length is" const somethingWentWrong = "Something went wrong. Please contact with support" const emailIsIncorrect = "Email is incorrect" const fillInTheRequired = "Fill in the required fields on the form" const pleaseCheckedRequiredField = "Please checked required field" const mediaUnlayer = 480 function getCookie(name) { const cookieArr = document.cookie.split(';'); for (let i = 0; i < cookieArr.length; i++) { const cookiePair = cookieArr[i].split('='); if (name == cookiePair[0].trim()) { return decodeURIComponent(cookiePair[1]); } } return null; } function getParamFromURL(paramName) { const urlParams = new URLSearchParams(window.location.search); return urlParams.get(paramName); } const csrftoken = getCookie('csrftoken'); let widgetReady = false let userPerformVisit = false let userPerformConversion = false function validateEmail(email) { const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); } function showToast(alert, type) { const snackbar = document.getElementById('snackbar'); snackbar.className = 'show' snackbar.innerHTML = alert setTimeout(function(){ snackbar.className = snackbar.className.replace('show', ''); }, 3000) } function performVisit() { const cookie = getParamFromURL('__ca__chat') ? getParamFromURL('__ca__chat') : getCookie('__ca__chat') if (cookie == undefined || cookie == null) return clearInterval(widgetReady); const urlVisit = `${window.civchat.tenantDomain}/landing/api/v3/actions/${idLayout}/perform_visit/` const data = { key: cookie, } fetch(urlVisit, { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrftoken }, }).catch((error) => { console.log(error) showToast(somethingWentWrong) }); userPerformVisit = true; } function performConversion() { if (userPerformVisit == false) return clearInterval(userPerformConversion); const forms = document.getElementsByClassName('usercomFormLayout'); let form_data = {} let ready = false; let actualWidth = window.innerWidth; let formsVisible = [] for (let i = 0; i < forms.length; i++) { const multiOptionsSelected = forms.item(i).querySelectorAll('.usercom-multiselect__selected') const isRequired = forms.item(i).getAttribute('required') == 'true' const isFixedMulti = forms.item(i).getAttribute('type') == 'fixed-multiple' const hideDesktopDisabled = forms.item(i).dataset.hideDesktop == 'false' || forms.item(i).dataset.hideDesktop == 'undefined' const hideMobileDisabled = forms.item(i).dataset.hideMobile == 'false' || forms.item(i).dataset.hideMobile == 'undefined' let showIsDesktop = true let showIsMobile = true const hasAttributeHide = forms.item(i).hasAttribute('data-hide-mobile') && forms.item(i).hasAttribute('data-hide-desktop') const hideFalse = hideDesktopDisabled && hideMobileDisabled if (hasAttributeHide && !hideFalse) { showIsDesktop = actualWidth > mediaUnlayer && (hideDesktopDisabled && forms.item(i).dataset.hideMobile == 'true') showIsMobile = actualWidth <= mediaUnlayer && (forms.item(i).dataset.hideDesktop == 'true' && hideMobileDisabled) if (showIsDesktop || showIsMobile) { formsVisible.push(forms.item(i)) } } else { formsVisible.push(forms.item(i)) } if (isRequired && forms.item(i).value == '' && (showIsDesktop || showIsMobile)) { forms.item(i).classList.add('valid'); setTimeout(function(){ forms.item(i).classList.remove('valid'); }, 3000) ready = false showToast(fillInTheRequired) } else if (isRequired && isFixedMulti && multiOptionsSelected.length === 0 && (showIsDesktop || showIsMobile)) { forms.item(i).classList.add('valid'); setTimeout(function () { forms.item(i).classList.remove('valid'); }, 3000) ready = false showToast(fillInTheRequired) } else if (isRequired && forms.item(i).type == 'checkbox' && forms.item(i).checked == false && multiOptionsSelected.length === 0 && (showIsDesktop || showIsMobile)) { forms.item(i).classList.add('valid'); setTimeout(function(){ forms.item(i).classList.remove('valid'); }, 3000) ready = false showToast(pleaseCheckedRequiredField) } else if (!isFixedMulti && forms.item(i).value.length > forms.item(i).getAttribute('maxlength') && forms.item(i).getAttribute('maxlength') != null && (showIsDesktop || showIsMobile)) { forms.item(i).classList.add('valid'); setTimeout(function(){ forms.item(i).classList.remove('valid'); }, 3000) ready = false showToast(`${maxLengthMessage} ${forms.item(i).getAttribute('maxlength')}`) } else if (forms.item(i).value !== '' && forms.item(i).getAttribute('id') == 'email' && !validateEmail(forms.item(i).value) && (showIsDesktop || showIsMobile)) { forms.item(i).classList.add('valid'); setTimeout(function(){ forms.item(i).classList.remove('valid'); }, 3000) ready = false showToast(emailIsIncorrect) } else { let element = {} if (forms.item(i).type == 'checkbox') { element = { [forms.item(i).id]: forms.item(i).checked } } else if (isFixedMulti) { const result = [] if (forms.item(i).classList.contains('usercom-multiselect')) { multiOptionsSelected.forEach((elem) => { result.push(elem.getAttribute('value')) }) } else { let opt; for (let x = 0; x < forms.item(i).length; x++) { opt = forms.item(i)[x]; if (opt.selected) { result.push(opt.value || opt.text); } } } element = { [forms.item(i).id]: result } } else { element = { [forms.item(i).id]: forms.item(i).value } } if ((showIsDesktop || showIsMobile)) { Object.assign(form_data, element); ready = true } } } const formKeys = Object.keys(form_data) const noDuplicatedKeys = new Set(formKeys).size === formKeys.length const hasAllVisibleItems = formsVisible.length === formKeys.length if (ready && hasAllVisibleItems && noDuplicatedKeys) { const data = { form_data, user_auth: { email: form_data.email, key: getParamFromURL('__ca__chat') ? getParamFromURL('__ca__chat') : getCookie('__ca__chat'), } } const urlConversion = `${window.civchat.tenantDomain}/landing/api/v3/actions/${idLayout}/perform_conversion/` fetch(urlConversion, { method: 'POST', body: JSON.stringify(data), headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrftoken }, }).then(() => { window.location.href = `/landing/${slugLayout}/thanks_page/`; document.getElementById('submitUsercomLandingPage').removeAttribute("disabled"); }) .catch((error) => { console.log(error) showToast(somethingWentWrong) }); } else { document.getElementById('submitUsercomLandingPage').removeAttribute("disabled"); } } function isInViewport(element) { const elRect = element.getBoundingClientRect(); const belowTop = elRect.top >= 0; const edgeLeft = elRect.left >= 0; const edgeRight = elRect.right <= window.innerWidth; const overBottom = elRect.right <= window.innerWidth; return belowTop && edgeLeft && edgeRight && overBottom; }; function setObserver() { const inputs = document.querySelectorAll('.usercomFormLayout'); const callback = function() { const errors = document.querySelectorAll('.valid'); if (errors.length > 0 && !isInViewport(errors[0])) { const offset = 130; window.scrollTo({ top: errors[0].getBoundingClientRect().top - document.body.getBoundingClientRect().top - offset, }) } }; const observer = new MutationObserver(callback); const config = { attributes: true }; inputs.forEach((elem) => { observer.observe(elem, config); }); }; document.addEventListener("DOMContentLoaded", function() { widgetReady = setInterval(performVisit, 1000) setTimeout(() => { clearInterval(widgetReady); }, 30000); document.getElementById('submitUsercomLandingPage').onclick = function(e){ setObserver(); e.target.setAttribute('disabled', true); userPerformConversion = setInterval(performConversion, 1000); setTimeout(() => { clearInterval(userPerformConversion); }, 30000); e.preventDefault(); } }); </script> </body> </html>

CINXE.COM

Sun Pro - zni偶ka z Kart膮 Mundurow膮