This is a custom code placeholder.
Switch to Preview or publish the page
to see how your code works.
Double-click to edit
<!-- Softinet – Formularz kontaktowy (345 px, walidacja dopiero przy submit) -->
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<div id="softinet-form-wrapper">
<style>
#softinet-form-wrapper {
font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: #000;
text-align: center;
font-size: 11px;
line-height: 1.45;
}
#softinet-form {
width: 345px;
margin: 0 auto;
background: transparent;
border: none;
padding: 0;
text-align: left;
}
.field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.input-base {
background: transparent;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 8px 12px;
font-size: 11px;
color: #000;
outline: none;
transition: box-shadow .12s ease, border-color .12s ease;
}
.input-base::placeholder {
color: #666;
opacity: 1;
}
.input-base:focus {
border-color: #048fcc;
box-shadow: 0 0 0 3px rgba(4, 143, 204, .12);
background: transparent;
}
.consents {
display: flex;
flex-direction: column;
gap: 10px;
margin: 14px 0 10px;
}
.consent-item {
display: flex;
gap: 10px;
align-items: flex-start;
}
.consent-item input[type="checkbox"] {
width: 16px;
height: 16px;
margin-top: 2px;
}
.consent-text {
font-size: 11px;
line-height: 1.4;
color: #000;
}
.consent-text a {
color: #000;
text-decoration: underline;
}
.error {
color: #d40000;
font-size: 11px;
margin-top: 4px;
display: none;
}
.show-error { display: block; }
.actions { text-align: center; margin-top: 16px; }
.btn {
display: inline-block;
width: 100%;
max-width: 345px;
background: #048fcc;
color: #fff;
border: 1px solid #048fcc;
border-radius: 8px;
padding: 10px 22px;
font-weight: 700;
font-size: 11px;
cursor: pointer;
font-family: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
</style>
<form id="softinet-form" action="https://app.getresponse.com/add_subscriber.html" method="post" novalidate>
<!-- GetResponse -->
<input type="hidden" name="campaign_token" value="Li8v5">
<input type="hidden" name="thankyou_url" value="https://uslugi.softinet.com.pl/thank_you.html">
<input type="hidden" name="start_day" value="0">
<input type="hidden" name="custom_source" value="Landing page">
<input type="hidden" id="name_full" name="name" value="">
<div class="field">
<input type="text" id="first_name" name="custom_imie" class="input-base" placeholder="Imię *" required>
<div class="error" data-error-for="first_name">Podaj imię.</div>
</div>
<div class="field">
<input type="text" id="last_name" name="custom_nazwisko" class="input-base" placeholder="Nazwisko *" required>
<div class="error" data-error-for="last_name">Podaj nazwisko.</div>
</div>
<div class="field">
<input type="email" id="email" name="email" class="input-base" placeholder="Adres e-mail *" required>
<div class="error" data-error-for="email">Podaj poprawny adres e-mail.</div>
</div>
<div class="field">
<input type="text" id="company" name="custom_company" class="input-base" placeholder="Nazwa firmy *" required>
<div class="error" data-error-for="company">Podaj nazwę firmy.</div>
</div>
<div class="field">
<input type="text" id="job_title" name="custom_job_title" class="input-base" placeholder="Stanowisko *" required>
<div class="error" data-error-for="job_title">Podaj stanowisko.</div>
</div>
<!-- NOWE POLE: Liczba urządzeń -> custom_klient_wielkosc -->
<div class="field">
<input type="text" id="devices_count" name="custom_klient_wielkosc" class="input-base" placeholder="Liczba urządzeń *" required>
<div class="error" data-error-for="devices_count">Podaj liczbę urządzeń większą od zera.</div>
</div>
<div class="field">
<input type="text" id="phone_number" name="phone_display" class="input-base" placeholder="Numer telefonu (+48...) *" inputmode="tel" autocomplete="tel" required>
<input type="hidden" id="phone_e164" name="custom_phone" value="">
<div class="error" data-error-for="phone">Podaj poprawny numer telefonu w formacie +48XXXXXXXXX.</div>
</div>
<div class="consents">
<p class="consent-text">
Chcę otrzymywać od Softinet Sp. z o.o. z siedzibą w Warszawie informacje o ofercie, nowościach i promocjach dotyczących tej spółki oraz I Know IT Szymański Bojar sp. k. z siedzibą w Warszawie:
</p>
<label class="consent-item">
<input type="checkbox" id="consent_channel_email" name="custom_consent_email_marketing" value="yes">
<span class="consent-text">Emailem</span>
</label>
<label class="consent-item">
<input type="checkbox" id="consent_channel_phone" name="custom_consent_phone_marketing" value="yes">
<span class="consent-text">Telefonicznie</span>
</label>
<div class="error" id="channels_error">Zaznacz oba kanały kontaktu.</div>
<p class="consent-text">
Jeżeli chcesz uzyskać dostęp do materiału bez zapisywania się do newslettera, skontaktuj się z nami:
<a href="mailto:softinet@softinet.com.pl">softinet@softinet.com.pl</a>.
</p>
<p class="consent-text">
Administratorem Twoich danych osobowych jest Softinet Sp. z o.o. z siedzibą w Warszawie. Przeczytaj w naszej
<a href="https://softinet.com.pl/polityka-prywatnosci/" target="_blank" rel="noopener">Polityce prywatności i cookies</a>
jak przetwarzamy Twoje dane.
</p>
</div>
<div class="actions">
<button type="submit" class="btn">Wyślij</button>
</div>
</form>
<script>
(function () {
const form = document.getElementById('softinet-form');
const first = document.getElementById('first_name');
const last = document.getElementById('last_name');
const email = document.getElementById('email');
const company = document.getElementById('company');
const job = document.getElementById('job_title');
const devices = document.getElementById('devices_count');
const phoneInput = document.getElementById('phone_number');
const phoneE164 = document.getElementById('phone_e164');
const nameFull = document.getElementById('name_full');
const chEmail = document.getElementById('consent_channel_email');
const chPhone = document.getElementById('consent_channel_phone');
const channelsError = document.getElementById('channels_error');
const emailRe = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$/i;
// flaga: czy użytkownik próbował wysłać formularz
let triedSubmit = false;
function showError(key, show) {
const el = form.querySelector(\`.error[data-error-for="\${key}"]\`);
if (el) el.classList.toggle('show-error', !!show);
}
function toPL_E164(raw) {
if (!raw) return '';
let s = String(raw).replace(/[^\\d+]/g, '');
if (s.startsWith('0048')) s = '+' + s.slice(2);
if (/^48\\d{9}$/.test(s)) s = '+' + s;
if (/^\\d{9}$/.test(s)) s = '+48' + s;
s = s.replace(/[^\\d+]/g, '');
return /^\\+48\\d{9}$/.test(s) ? s : '';
}
function validateDevices(val) {
if (val === '' || val === null || val === undefined) return false;
const n = Number(val);
return Number.isFinite(n) && n >= 1 && Number.isInteger(n);
}
function validateFieldset(showErrors) {
let ok = true;
const fnEmpty = !first.value.trim();
const lnEmpty = !last.value.trim();
const emBad = !emailRe.test(email.value.trim());
const coEmpty = !company.value.trim();
const jobEmpty= !job.value.trim();
const devBad = !validateDevices(devices.value);
const phoneNormalized = toPL_E164(phoneInput.value);
const phoneBad = !phoneNormalized;
const bothChecked = chEmail.checked && chPhone.checked;
if (showErrors) {
showError('first_name', fnEmpty);
showError('last_name', lnEmpty);
showError('email', emBad);
showError('company', coEmpty);
showError('job_title', jobEmpty);
showError('devices_count', devBad);
showError('phone', phoneBad);
channelsError.classList.toggle('show-error', !bothChecked);
}
if (fnEmpty || lnEmpty || emBad || coEmpty || jobEmpty || devBad || phoneBad || !bothChecked) ok = false;
return { ok, phoneNormalized };
}
// walidacja pojedynczego pola dopiero po próbie submitu
[first, last, email, company, job, devices, phoneInput, chEmail, chPhone].forEach(el => {
el.addEventListener('input', () => {
if (!triedSubmit) return;
const { phoneNormalized } = validateFieldset(true);
if (phoneNormalized) phoneE164.value = phoneNormalized;
});
el.addEventListener('change', () => {
if (!triedSubmit) return;
validateFieldset(true);
});
});
form.addEventListener('submit', function (e) {
e.preventDefault();
triedSubmit = true;
// scal imię i nazwisko
nameFull.value = [first.value.trim(), last.value.trim()].filter(Boolean).join(' ').trim();
const { ok, phoneNormalized } = validateFieldset(true);
phoneE164.value = phoneNormalized || '';
if (!ok) {
const firstErr = form.querySelector('.error.show-error');
if (firstErr && firstErr.scrollIntoView) {
firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
return false;
}
// wszystko ok → wysyłamy do GetResponse
form.submit();
});
})();
</script>
</div>
