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: #ffffff; } .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: #ffffff; border-radius: 2px; color: #222643; font-size: 20px; padding: 5px; border-radius: 10px; width: 455px; height: 30px; display: block; margin: 5px 0 15px; border: 0; } .radio input { width: 30px; height: 30px; display: inline-block; margin: 0; } /* 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: #222643; background-color: #ffffff; 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: 25px; height: 25px; 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; } .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> <section class="register menu-4"> <div class="container register-container"> <form action="https://app.getresponse.com/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="" 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="Korzystanie z nVision">Czy znasz rozwiązanie Axence nVision<sup>&reg;</sup>?</label> <div class="knowNv"></div> <div class="radio"> <input id="webform_korzysztanie_nvision_0" type="radio" name="custom_korzysztanie_nvision" value="Tak, korzystam z niego" /> <label for="webform_korzysztanie_nvision_0">Tak, korzystam z niego</label><br> <input id="webform_korzysztanie_nvision_1" type="radio" name="custom_korzysztanie_nvision" value="Tak, już je testowałam/-em" /> <label for="webform_korzysztanie_nvision_1">Tak, już je testowałam/-em</label><br> <input id="webform_korzysztanie_nvision_2" type="radio" name="custom_korzysztanie_nvision" value="Słyszałam/-em o nim, ale nigdy nie testowałam/-em" /> <label for="webform_korzysztanie_nvision_2">Słyszałam/-em o nim, ale nigdy nie testowałam/-em</label><br> <input id="webform_korzysztanie_nvision_3" type="radio" name="custom_korzysztanie_nvision" value="Nie znam" /> <label for="webform_korzysztanie_nvision_3">Nie znam</label> </div> </div> <div class="input-container"> <label alt="Liczba urządzeń">Jak duża jest Twoja sieć firmowa (liczba urządzeń)?</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#hzhg_0"> <input class="agreement beforeBorder" id="webform_consent#hzhg_0" type="checkbox" name="webform[consent#hPxg-ver#zmSV]" 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>
Copyright © 2005-2022 Axence Sp. z o.o. Sp. j.
To jest placeholder.
Przejdź do trybu Podglądu lub opublikuj stronę,
aby sprawdzić działanie swojego kodu.
Kliknij dwa razy, aby edytować
<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 knowNvMessage = document.querySelector('.knowNv'); let knowNv0 = document.querySelector('#webform_korzysztanie_nvision_0'); let knowNv1 = document.querySelector('#webform_korzysztanie_nvision_1'); let knowNv2 = document.querySelector('#webform_korzysztanie_nvision_2'); let knowNv3 = document.querySelector('#webform_korzysztanie_nvision_3'); 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 = '#ffffff'; fieldLabel.style.color = '#ffffff'; 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(!knowNv0.checked && !knowNv1.checked && !knowNv2.checked && !knowNv3.checked) { knowNvMessage.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'); } })