To jest placeholder.
Przejdź do trybu Podglądu lub opublikuj stronę,
aby sprawdzić działanie swojego kodu.
Kliknij dwa razy, aby edytować
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formularz rejestracyjny</title>
<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 {
--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%;
display: none; /* Ukryte domyślnie */
}
.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: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: #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>
</head>
<body>
<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="" />
</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="" />
</div>
<div class="input-container">
<label alt="Polecane firmy">Poleć firmy, które mogą być zainteresowane naszymi produktami:</label>
<input name="custom_polecane_firmy" type="text" value="" />
</div>
<div class="input-container">
<label alt="Inicjały doradcy">Podaj inicjały doradcy, który zachęcił Cię do wypełnienia ankiety:</label>
<input name="custom_doradca" type="text" value="" required />
</div>
<div class="input-container">
<label alt="Czy jesteś już klientem Axence?">Czy jesteś już klientem Axence?</label>
<div class="client"></div>
<div class="radio">
<input id="webform_czy_klient_0" type="radio" name="custom_czy_aktywny_klient" value="Tak" />
<label for="webform_czy_klient_0">Tak</label><br>
<input id="webform_czy_klient_1" type="radio" name="custom_czy_aktywny_klient" value="Nie" />
<label for="webform_czy_klient_1">Nie</label><br>
</div>
</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żam zgodę na otrzymywanie od Axence Sp. z o. o. Sp. J. lub partnerów Axence informacji marketingowych o produktach Axence na podany adres e-mail i numer telefonu (np. przedstawienie oferty).</span>
</label><br />
<div class="validation-info"></div>
</div>
<input type="hidden" name="campaign_token" value="iR1Hn" />
<input type="hidden" name="thankyou_url" value="https://ankieta.axence.net/dziekujemy" />
<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 whichField = document.getElementById('which');
let softwareOtherRadio = document.getElementById('software_other');
let doradcaField = document.querySelector('[name=custom_doradca]');
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 clientMessage = document.querySelector('.client');
let client0 = document.querySelector('#webform_czy_klient_0');
let client1 = document.querySelector('#webform_czy_klient_1');
formFields.forEach(formField => {
formField.addEventListener('blur', e => {
let fieldLabel = e.target.previousElementSibling;
if (e.target.value.length < 1 && e.target.hasAttribute('required')) {
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') + ":";
}
});
});
// Wyświetlanie pola "Jakiego?" po zaznaczeniu "Innego"
softwareOtherRadio.addEventListener('change', function() {
if (this.checked) {
whichField.style.display = 'block';
} else {
whichField.style.display = 'none';
}
});
spanLink.addEventListener('click', e => {
if (extendedPrivacy.style.display == 'none' || extendedPrivacy.style.display == '') {
extendedPrivacy.style.display = 'block';
e.target.textContent = 'Pokaż mniej';
} else {
extendedPrivacy.style.display = 'none';
e.target.textContent = 'Pokaż więcej';
}
});
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 (phoneField.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();
}
// Walidacja pola "Inicjały doradcy"
if (doradcaField.value.length < 1) {
doradcaField.style.borderColor = '#ff1300';
doradcaField.previousElementSibling.style.color = '#ff1300';
doradcaField.previousElementSibling.textContent = `Pole "${doradcaField.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 (!client0.checked && !client1.checked ) {
clientMessage.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>
</body>
</html>
