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 rejestracji na warsztat (345 px, walidacja dopiero przy submit) -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<div id="softinet-form-wrapper">
<style>
#softinet-form-wrapper {
font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: #000;
text-align: center;
}
#softinet-form {
width: 300px;
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 {
width: 100%;
background: #f2f2f2;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 10px 14px;
font-size: 16px;
color: #000;
outline: none;
transition: box-shadow .12s ease, border-color .12s ease;
}
.input-base::placeholder {
color: #000;
opacity: 0.7;
}
.input-base:focus {
border-color: #048fcc;
box-shadow: 0 0 0 3px rgba(4, 143, 204, .12);
background: #fff;
}
.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: 3px;
}
.consent-text {
font-size: 12px;
line-height: 1.4;
color: #000;
}
.consent-text a {
color: #000;
text-decoration: underline;
}
.error {
color: #d40000;
font-size: 12px;
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: #B74D37;
color: #fff;
border: none;
border-radius: 8px;
padding: 12px 26px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
font-family: 'Poppins', 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" method="post" action="#" novalidate>
<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>
<div class="field">
<input type="text" id="phone_number" name="phone_display" class="input-base" placeholder="Numer telefonu (+48...) *" inputmode="tel" autocomplete="tel" required>
<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 co najmniej jedną zgodę - email lub telefon.</div>
<p class="consent-text">
Wypełniając formularz zgadzasz się na kontakt mailowy i telefoniczny na temat związany z treścią ebooka.
</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>
<!-- Honeypot – antybot -->
<input type="text" id="hp_website" name="website" value="" autocomplete="off"
style="position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;">
<div class="actions">
<button type="submit" class="btn" id="submit_btn">Pobieram e-book</button>
</div>
</form>
<script>
(function () {
const CFG = {
workerEndpoint: "https://softinet-gr-forms.a-grabinski.workers.dev/gr/subscribe",
thankYouUrl: "https://wodociagi.softinet.com.pl/thank_you.html",
registrationSource: "ebook_wod_kan",
solutionClass: "",
crmCampaignName: "Ebook Cyberwyzwania sektora wod-kan – pobrania",
consentTextVersion: "RODO_ebook_2025",
enableBuyingIntent: false,
requireSolutionClass: false,
requestTimeoutMs: 12000
};
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 phoneInput = document.getElementById('phone_number');
const chEmail = document.getElementById('consent_channel_email');
const chPhone = document.getElementById('consent_channel_phone');
const channelsError = document.getElementById('channels_error');
const hp = document.getElementById('hp_website');
const btn = document.getElementById('submit_btn');
function getBuyingIntent() {
const checked = form.querySelector('input[name="buying_intent"]:checked');
return checked ? checked.value : "";
}
function getUsesFortinet(){
const checked = form.querySelector('input[name="uses_fortinet"]:checked');
return checked ? checked.value : "";
}
const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
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 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 phoneNormalized = toPL_E164(phoneInput.value);
const phoneBad = !phoneNormalized;
// wymagany co najmniej jeden kanał (email lub telefon)
const oneChecked = 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('phone', phoneBad);
channelsError.classList.toggle('show-error', !oneChecked);
if (!fnEmpty && !lnEmpty && !emBad && !coEmpty && !jobEmpty && !phoneBad && oneChecked) {
channelsError.classList.remove('show-error');
}
}
if (fnEmpty || lnEmpty || emBad || coEmpty || jobEmpty || phoneBad || !oneChecked) ok = false;
return { ok, phoneNormalized };
}
[first, last, email, company, job, phoneInput].forEach(el => {
el.addEventListener('input', () => {
if (!triedSubmit) return;
validateFieldset(true);
});
});
[chEmail, chPhone].forEach(el => {
el.addEventListener('change', () => {
if (!triedSubmit) return;
validateFieldset(true);
});
});
form.addEventListener('submit', async function (e) {
e.preventDefault();
triedSubmit = true;
if (btn) btn.disabled = true;
const { ok, phoneNormalized } = validateFieldset(true);
if (!ok) {
if (btn) btn.disabled = false;
const firstErr = form.querySelector('.error.show-error');
if (firstErr && firstErr.scrollIntoView) {
firstErr.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
return false;
}
const payload = {
email: email.value.trim(),
name: [first.value.trim(), last.value.trim()].filter(Boolean).join(' ').trim(),
first_name: first.value.trim(),
last_name: last.value.trim(),
phone: phoneNormalized,
company: company.value.trim(),
job_title: job.value.trim(),
registration_source: CFG.registrationSource,
solution_class: CFG.solutionClass || "",
crm_campaign_name: CFG.crmCampaignName,
buying_intent: CFG.enableBuyingIntent ? getBuyingIntent() : "",
uses_fortinet: getUsesFortinet(),
page_url: window.location.href,
consent_text_version: CFG.consentTextVersion,
consent_email_marketing: chEmail.checked,
consent_phone_marketing: chPhone.checked,
website: hp ? hp.value : ""
};
try {
const res = await fetch(CFG.workerEndpoint, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
if (res.ok) {
window.location.href = CFG.thankYouUrl;
return;
}
if (btn) btn.disabled = false;
channelsError.textContent = "Wystąpił błąd zapisu. Spróbuj ponownie.";
channelsError.classList.add("show-error");
} catch (err) {
if (btn) btn.disabled = false;
channelsError.textContent = "Wystąpił błąd zapisu. Spróbuj ponownie.";
channelsError.classList.add("show-error");
}
});
})();
</script>
</div>
