Wypełnij krótką ankietę
i zagraj o nagrody na stoisku Axence!
To jest placeholder.
Przejdź do trybu Podglądu lub opublikuj stronę,
aby sprawdzić działanie swojego kodu.
Kliknij dwa razy, aby edytować
<style> .register-container { display: block; text-align: center; color: #16324f; } .register p.subheader { font-size: 20px; font-weight: 300; text-align: center; margin-bottom: 60px; line-height: 36px; } .register h2.header { margin-bottom: 40px; } .input-container { width: 455px; margin: 0 auto; } form { width: 60%; display: block; margin: 0 auto; text-align: left; font-family: Open Sans, Arial, sans-serif; } input { background-color: #f8fafd; border-radius: 2px; color: #222643; font-size: 17px; padding: 6px; border: solid 1px #3d62f9; border-radius: 10px; width: 455px; height: 30px; display: block; margin: 5px 0 15px; } /* .radio input { width: 30px; height: 30px; display: inline-block; margin: 0; outline: 1px solid #275EFE; } */ .radio input { --active: #275EFE; --active-inner: #fff; --focus: 2px rgba(39, 94, 254, .3); --border: #BBC1E1; --border-hover: #275EFE; --background: #fff; --disabled: #F6F8FF; --disabled-inner: #E1E6F9; -webkit-appearance: none; -moz-appearance: none; height: 20px; width: 20px; outline: solid 1px #275EFE; display: inline-block; vertical-align: top; position: relative; margin: 3px 3px 3px 0px; cursor: pointer; border: 1px solid var(--bc, var(--border)); background: var(--b, var(--background)); transition: background 0.3s, border-color 0.3s, box-shadow 0.2s; vertical-align: inherit; } #which { width: 75%; margin-top: 5px; height: 30px; vertical-align: super; margin-left: 2%; } .radio input:after { width: 19px; height: 19px; border-radius: 50%; background: var(--active-inner); opacity: 0; transform: scale(var(--s, .7)); } .radio input:checked { --b: var(--active); --bc: var(--active); --d-o: .3s; --d-t: .6s; --d-t-e: cubic-bezier(.2, .85, .32, 1.2); } /* input:focus { background-color: rgba(256,256,256,.2); outline: none; border: 2px solid #f5f5fa; border-radius: 10px; } */ input:invalid { outline: none; } label { display: block; text-align: left; font-size: 17px; line-height: 1.2em; font-weight: 300; margin: 10px 0; vertical-align: super; } .radio label { display: inline; } form .button { /**color: #f5f5fa; background-color: #e97a0b;**/ color: #ffffff; background-color: #fa8821; font-size: 20px; width: 180px; font-family: 'Open Sans', sans-serif; border-radius: 15px; font-weight: 400; height: 45px; border: none; cursor: pointer; margin: 20px 0; vertical-align: middle; display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .button-holder { text-align: center; } form .agreement { display: none; } form .agreement+*::before { content: ""; width: 21px; height: 21px; display: inline-block; margin: 0 8px 0 0; margin-right: 10px; text-align: center; background-color: #ffffff; border-radius: 10px; font-size: 14px; vertical-align: baseline; border: solid 1px #275EFE; } .explainer { margin-bottom: 20px; } form .agreement:checked+*::before { content: '\2713'; color: #222643; background-color: #ffffff; text-align: center; font-size: 22px; line-height: 1.1; } .beforeBorder+*::before {} .afterBorder+*::before {} form .label-agreement { display: inline-block; width: 538px; font-size: 13px; font-weight: 300px; } .register .privacy { font-size: 12px; text-align: left; margin-top: 15px; line-height: 1.2; text-align: justify; } .register .privacy a { color: #3142b1; cursor: pointer; text-decoration: underline; } .register .privacy .more { color: #3142b1; text-decoration: underline; cursor: pointer; } .register .extended-privacy { display: none; } @media (max-width: 600px) { form, input, .input-container { width: 90%; } form .label-agreement { width: 98%; } } </style> <script> window.addEventListener("load", function() { var softwareOther = document.getElementById("software_other"); var jakiegoField = document.getElementById("which"); // Funkcja do ukrywania pola "Jakiego?" function toggleJakiegoField() { jakiegoField.disabled = !softwareOther.checked; jakiegoField.style.display = softwareOther.checked ? 'inline-block' : 'none'; } // Dodajmy nasłuchiwanie na zdarzenie zmiany opcji "innego" softwareOther.addEventListener("change", toggleJakiegoField); // Dodajmy nasłuchiwanie na zdarzenie zmiany opcji innej niż "innego" document.querySelectorAll('input[name="custom_rozwiazanie_konkurencyjne"]').forEach(function(option) { option.addEventListener("change", function() { // Jeśli inna opcja jest zaznaczona, ukryj pole "Jakiego?" if (option.value !== "Innego") { softwareOther.checked = false; toggleJakiegoField(); } }); }); // Sprawdźmy stan początkowy toggleJakiegoField(); }); </script> <section class="register menu-4"> <div class="container register-container"> <form action="https://mailing.axence.net/add_subscriber.html" accept-charset="utf-8" method="post" novalidate> <div class="input-container"> <label alt="Imię i nazwisko">Imię i nazwisko:</label> <input type="text" name="name" required /> </div> <div class="input-container"> <label alt="Telefon">Służbowy numer telefonu:</label> <input name="custom_telefon" type="text" pattern="\+48[0-9]{9}" value="+48" required /> </div> <div class="input-container"> <label alt="Służbowy adres e-mail">Adres e-mail:</label> <input type="email" name="email" required /> </div> <div class="input-container"> <label alt="Nazwa firmy/instytucji">Nazwa firmy/instytucji:</label> <input name="custom_company" type="text" value="" required /> </div> <div class="input-container"> <label alt="Stanowisko">Stanowisko:</label> <input name="custom_stanowisko" type="text" value="" required /> </div> <div class="input-container"> <label alt="Jakiego komercyjnego oprogramowania używasz do zarządzania infrastrukturą IT?">Jakiego komercyjnego oprogramowania używasz do zarządzania infrastrukturą IT?</label> <div class="radio"> <input id="software_none" type="radio" name="custom_rozwiazanie_konkurencyjne" value="Jeszcze nie używam żadnego oprogramowania" /> <label for="software_none">Jeszcze nie używam żadnego oprogramowania</label><br> <input id="software_axence" type="radio" name="custom_rozwiazanie_konkurencyjne" value="Używam Axence nVision®" /> <label for="software_axence">Używam Axence nVision®</label><br> <input id="software_other" type="radio" name="custom_rozwiazanie_konkurencyjne" value="Innego" /> <label for="software_other" alt="Inny program">Innego</label> <input type="text" id="which" name="custom_inne_oprogramowanie" placeholder="Jakiego?" Alt="Nazwa innego oprogramowania"/> </div> </div> <div class="input-container"> <label alt="Jak edukuje?">Jak Twoja organizacja edukuje pracowników z zakresu cyberbezpieczeństwa?</label> <div class="education"></div> <div class="radio"> <input id="webform_jak_edukujesz_0" type="radio" name="custom_jak_edukujesz" value="platforma on-line" /> <label for="webform_jak_edukujesz_0">platforma on-line</label><br> <input id="webform_jak_edukujesz_1" type="radio" name="custom_jak_edukujesz" value="szkolenie na żywo" /> <label for="webform_jak_edukujesz_1">szkolenie na żywo</label><br> <input id="webform_jak_edukujesz_2" type="radio" name="custom_jak_edukujesz" value="nie edukuje" /> <label for="webform_jak_edukujesz_2">nie edukuje</label><br> <input id="webform_jak_edukujesz_3" type="radio" name="custom_jak_edukujesz" value="w inny sposób" /> <label for="webform_jak_edukujesz_3">w inny sposób</label> </div> </div> <div class="input-container"> <label alt="Liczba urządzeń">Jak duża jest Twoja sieć firmowa (liczba komputerów)?</label> <input name="custom_liczba_urzadzen" type="number" value="" required /> </div> <div class="input-container"> <!-- <label alt="Wersja testowa nVision">Czy chciałbyś otrzymać od nas wersję testową Axence nVision<sup>&reg;</sup>?</label> <div class="testVer"></div> <div class="radio"> <input id="webform_wersja_testowa_nvision_0" type="radio" name="custom_wersja_testowa_nvision" value="Tak" /> <label for="webform_wersja_testowa_nvision_0">Tak</label><br> <input id="webform_wersja_testowa_nvision_1" type="radio" name="custom_wersja_testowa_nvision" value="Nie" /> <label for="webform_wersja_testowa_nvision_1">Nie</label> </div> --> <p class="explainer">Wszystkie pola obowiązkowe</p> </div> <div class="input-container"> <label class="label-agreement" for="webform_consent#HCHQ_0"> <input class="agreement beforeBorder" id="webform_consent#HCHQ_0" type="checkbox" name="webform[consent#HCHQ-ver#hz5d]" value="true" required /> <span>Wyra&#380;am zgod&#281; na otrzymywanie od Axence Sp. z o. o. Sp. J. lub partner&oacute;w Axence informacji marketingowych o produktach Axence na podany adres e-mail i numer telefonu (np. przedstawienie oferty).&nbsp;</span></label> <br /> <div class="validation-info"></div> </div> <!-- Token listy --> <!-- Pobierz token na: https://app.getresponse.com/campaign_list.html --> <input type="hidden" name="campaign_token" value="iR1Hn" /> <!-- Thank you page --> <input type="hidden" name="thankyou_url" value="https://ankieta.axence.net/dziekujemy" /> <!-- Przycisk zapisu --> <div class="button-holder"> <input class="button button-submit" type="submit" value="Zarejestruj się" /> </div> <p class="privacy">Zaznaczenie checkboxa jest dobrowolne i oznacza, że wyrażasz zgodę na przetwarzanie danych osobowych w zakresie adresu email / nr telefonu oraz innych podanych danych w celu realizacji marketingu bezpośredniego przez Axence Sp. z o. o. Sp. J. poprzez kontakt mailowy lub telefoniczny. Administratorem danych jest Axence Sp. z o. o. Sp. J. ul. Na Zjeździe 11, 30-527 Kraków, NIP: 6751399589. <span class="more" href="#">Pokaż więcej</span><br> <span class="extended-privacy">Dane będą przetwarzane w celu przygotowania i przeprowadzenia szkolenia (podstawa prawna: art. 6 ust. 1 lit. b) rodo a jeżeli wyrazisz powyższą zgodę także w celu marketingu bezpośredniego administratora danych (podstawa: art. 6 ust. lit. a) rodo, realizowanego poprzez wysyłkę mailingu lub telemarketingu, w zależności od wyboru (zob. art. 10 ustawy o świadczeniu usług drogą elektroniczną oraz art. 172 prawa telekomunikacyjnego). Wyrażenie zgody jest dobrowolne a zgoda może być wycofana w każdej chwili, co nie wpłynie na zgodność z prawem przetwarzania, którego dokonano na podstawie zgody przed jej wycofaniem. Zgodę możesz wycofać wysyłając takie żądanie na adres e-mail: <a href="mailto:dane.osobowe@axence.net">dane.osobowe@axence.net.</a> Osobie, której dane są przetwarzane przysługuje prawo do żądania od administratora dostępu do danych osobowych dotyczących osoby, której dane dotyczą, ich sprostowania, usunięcia lub ograniczenia przetwarzania lub o prawie do wniesienia sprzeciwu wobec przetwarzania, a także o prawie do przenoszenia danych a także o prawo do wniesienia skargi do organu nadzorczego (zob. uodo.gov.pl). Dane nie będą udostępniane do celów marketingowych innych podmiotów. Więcej: <a href="https://axence.net/pl/polityka-prywatnosci">polityka prywatności.</a></span> </p> </form> </div> </section> <script> const formFields = document.querySelectorAll('input'); const spanLink = document.querySelector('.more'); const extendedPrivacy = document.querySelector('.extended-privacy'); const btnSubmit = document.querySelector('.button-submit'); const checkAgr = document.querySelector('.agreement'); const validInfo = document.querySelector('.validation-info'); let nameField = document.querySelector('[name=name]'); let emailField = document.querySelector('[name=email]'); let companyField = document.querySelector('[name=custom_company]'); let phoneField = document.querySelector('[name=custom_telefon]'); let devicesField = document.querySelector('[name=custom_liczba_urzadzen]'); let positionField = document.querySelector('[name=custom_stanowisko]'); let competitorsField = document.querySelector('[name=custom_rozwiazanie_konkurencyjne]'); let educationMessage = document.querySelector('.education'); let education0 = document.querySelector('#webform_jak_edukujesz_0'); let education1 = document.querySelector('#webform_jak_edukujesz_1'); let education2 = document.querySelector('#webform_jak_edukujesz_2'); let education3 = document.querySelector('#webform_jak_edukujesz_3'); let softwareField = document.querySelector('[name=custom_inne_oprogramowanie]'); // //let testVerMessage = document.querySelector('.testVer'); //let testVer0 = document.querySelector('#webform_wersja_testowa_nvision_0'); //let testVer1 = document.querySelector('#webform_wersja_testowa_nvision_1'); formFields.forEach(formField => { formField.addEventListener('blur', e => { let fieldLabel = e.target.previousElementSibling; if (e.target.value.length < 1) { e.target.style.borderColor = '#ff1300'; fieldLabel.style.color = '#ff1300'; fieldLabel.textContent = `Pole "${fieldLabel.getAttribute('alt')}" nie może być puste`; } else if (e.target.type == 'email' && !e.target.value.includes('@')) { e.target.style.borderColor = '#ff1300'; fieldLabel.style.color = '#ff1300'; fieldLabel.textContent = `Pole "${fieldLabel.getAttribute('alt')}" jest niepoprawne`; } else if (e.target.name == 'custom_telefon' && e.target.checkValidity() == false) { fieldLabel.style.color = '#ff1300'; fieldLabel.textContent = `Format pola "${fieldLabel.getAttribute('alt')}" jest niepoprawny. Wpisz numer w formacie: "+48XXXXXXXXX"`; } else { e.target.style.borderColor = '#00184f'; fieldLabel.style.color = '#00184f'; fieldLabel.textContent = fieldLabel.getAttribute('alt') + ":"; } }) }) spanLink.addEventListener('click', e => { if (extendedPrivacy.style.display == 'none' || extendedPrivacy.style.display == '') { extendedPrivacy.style.display = 'block'; e.target.textContent = 'Pokaż więcej' } else { extendedPrivacy.style.display = 'none'; e.target.textContent = 'Pokaż mniej' } }) btnSubmit.addEventListener('click', e => { if (nameField.value.length < 1) { nameField.style.borderColor = '#ff1300'; nameField.previousElementSibling.style.color = '#ff1300'; nameField.previousElementSibling.textContent = `Pole "${nameField.previousElementSibling.getAttribute('alt')}" nie może być puste`; e.preventDefault() } if (emailField.value.length < 1) { emailField.style.borderColor = '#ff1300'; emailField.previousElementSibling.style.color = '#ff1300'; emailField.previousElementSibling.textContent = `Pole "${emailField.previousElementSibling.getAttribute('alt')}" nie może być puste`; e.preventDefault() } if (emailField.value.length > 1 && !emailField.value.includes('@')) { emailField.style.borderColor = '#ff1300'; emailField.previousElementSibling.style.color = '#ff1300'; emailField.previousElementSibling.textContent = `Pole "${emailField.previousElementSibling.getAttribute('alt')}" jest niepoprawne`; e.preventDefault() } if (phoneField.value.length < 1) { phoneField.style.borderColor = '#ff1300'; phoneField.previousElementSibling.style.color = '#ff1300'; phoneField.previousElementSibling.textContent = `Pole "${phoneField.previousElementSibling.getAttribute('alt')}" nie może być puste`; e.preventDefault() } if (emailField.value.length > 1 && phoneField.checkValidity() == false) { phoneField.style.borderColor = '#ff1300'; phoneField.previousElementSibling.style.color = '#ff1300'; phoneField.previousElementSibling.textContent = `Format pola "${phoneField.previousElementSibling.getAttribute('alt')}" jest niepoprawny. Wpisz numer w formacie: "+48XXXXXXXXX"`; e.preventDefault() } if (companyField.value.length < 1) { companyField.style.borderColor = '#ff1300'; companyField.previousElementSibling.style.color = '#ff1300'; companyField.previousElementSibling.textContent = `Pole "${companyField.previousElementSibling.getAttribute('alt')}" nie może być puste`; e.preventDefault() } if (devicesField.value.length < 1) { devicesField.style.borderColor = '#ff1300'; devicesField.previousElementSibling.style.color = '#ff1300'; devicesField.previousElementSibling.textContent = `Pole "${devicesField.previousElementSibling.getAttribute('alt')}" nie może być puste`; e.preventDefault() } if (positionField.value.length < 1) { positionField.style.borderColor = '#ff1300'; positionField.previousElementSibling.style.color = '#ff1300'; positionField.previousElementSibling.textContent = `Pole "${positionField.previousElementSibling.getAttribute('alt')}" nie może być puste`; e.preventDefault() } if (competitorsField.value.length < 1) { competitorsField.style.borderColor = '#ff1300'; competitorsField.previousElementSibling.style.color = '#ff1300'; competitorsField.previousElementSibling.textContent = `Pole "${competitorsField.previousElementSibling.getAttribute('alt')}" nie może być puste`; e.preventDefault() } if (!education0.checked && !education1.checked && !education2.checked && !education3.checked) { educationMessage.innerHTML = "<p style='color:red;'>Wybierz jedną z opcji</p>" e.preventDefault() } // if(!testVer0.checked && !testVer1.checked) { // testVerMessage.innerHTML = "<p style='color:red;'>Wybierz jedną z opcji</p>" // e.preventDefault() // } // if (checkAgr.checked) { validInfo.textContent = ''; checkAgr.classList.remove('afterBorder'); } else { validInfo.style.color = '#ff1300'; validInfo.textContent = 'Wymagana akceptacja zgody'; checkAgr.classList.add('afterBorder'); e.preventDefault() } }) checkAgr.addEventListener('change', e => { if (checkAgr.checked) { validInfo.textContent = ''; checkAgr.classList.remove('afterBorder'); } else { validInfo.style.color = '#ff1300'; validInfo.textContent = 'Wymagana akceptacja zgody'; checkAgr.classList.add('afterBorder'); } }) </script>
Copyright © 2005-2022 Axence Sp. z o.o. Sp. j.