This is a custom code placeholder.
Switch to Preview or publish the page
to see how your code works.
Double-click to edit
<section id="soc-assessment-section" class="soc-quiz-wrap">
<div class="soc-quiz-card">
<div class="soc-quiz-header">
<div class="soc-progress-top">
<div class="soc-progress-bar">
<div id="socProgressBar" class="soc-progress-bar-fill" style="width: 0%;"></div>
</div>
<div id="socProgressText" class="soc-progress-text">Krok 1 z 13</div>
</div>
<h2>Sprawdź, czy Twoja organizacja potrzebuje SOC</h2>
<p>
Odpowiedz na kilka krótkich pytań i zobacz, jak wygląda gotowość Twojej firmy
na monitoring incydentów, reagowanie 24/7 oraz wymagania związane z NIS2.
</p>
</div>
<form id="socQuizForm" class="soc-quiz-form" novalidate>
<input type="hidden" name="form_id" value="ankieta_soc">
<input type="hidden" name="form_type" value="soc_assessment">
<input type="hidden" name="solution_class" value="soc">
<input type="hidden" name="registration_source" value="ankieta_soc">
<input type="hidden" name="campaign_token" value="soc_assessment_lp">
<input type="hidden" name="source_url" id="source_url" value="">
<input type="hidden" name="page_title" id="page_title" value="">
<input type="hidden" name="user_agent" id="user_agent" value="">
<input type="hidden" name="soc_score" id="soc_score" value="">
<input type="hidden" name="soc_result" id="soc_result" value="">
<input type="hidden" name="soc_result_title" id="soc_result_title" value="">
<input type="hidden" name="soc_result_desc" id="soc_result_desc" value="">
<div class="soc-step active" data-step="1">
<h3>1. Czy Twoja organizacja działa w sektorze o podwyższonych wymaganiach bezpieczeństwa lub zgodności?</h3>
<div class="soc-options">
<label><input type="radio" name="soc_q1" value="2" required> Tak</label>
<label><input type="radio" name="soc_q1" value="1"> Nie wiem</label>
<label><input type="radio" name="soc_q1" value="0"> Nie</label>
</div>
</div>
<div class="soc-step" data-step="2">
<h3>2. Czy Twoja organizacja posiada formalnie zdefiniowane procedury reagowania na incydenty bezpieczeństwa?</h3>
<div class="soc-options">
<label><input type="radio" name="soc_q2" value="2" required> Tak</label>
<label><input type="radio" name="soc_q2" value="1"> Częściowo</label>
<label><input type="radio" name="soc_q2" value="0"> Nie</label>
</div>
</div>
<div class="soc-step" data-step="3">
<h3>3. Czy zdarzenia bezpieczeństwa są monitorowane na bieżąco?</h3>
<div class="soc-options">
<label><input type="radio" name="soc_q3" value="2" required> Tak, 24/7</label>
<label><input type="radio" name="soc_q3" value="1"> Tak, ale tylko w godzinach pracy</label>
<label><input type="radio" name="soc_q3" value="0"> Nie</label>
</div>
</div>
<div class="soc-step" data-step="4">
<h3>4. Czy logi z kluczowych systemów są zbierane centralnie?</h3>
<div class="soc-options">
<label><input type="radio" name="soc_q4" value="2" required> Tak</label>
<label><input type="radio" name="soc_q4" value="1"> Częściowo</label>
<label><input type="radio" name="soc_q4" value="0"> Nie</label>
</div>
</div>
<div class="soc-step" data-step="5">
<h3>5. Czy korzystacie z narzędzi typu SIEM, EDR, XDR lub NDR?</h3>
<div class="soc-options">
<label><input type="radio" name="soc_q5" value="2" required> Tak</label>
<label><input type="radio" name="soc_q5" value="1"> Częściowo lub pojedyncze rozwiązania</label>
<label><input type="radio" name="soc_q5" value="0"> Nie</label>
</div>
</div>
<div class="soc-step" data-step="6">
<h3>6. Czy Twoja organizacja jest w stanie szybko zweryfikować, czy alert to realny incydent?</h3>
<div class="soc-options">
<label><input type="radio" name="soc_q6" value="2" required> Tak</label>
<label><input type="radio" name="soc_q6" value="1"> Nie zawsze</label>
<label><input type="radio" name="soc_q6" value="0"> Nie</label>
</div>
</div>
<div class="soc-step" data-step="7">
<h3>7. Czy organizacja ma dedykowany zespół lub specjalistę ds. cyberbezpieczeństwa?</h3>
<div class="soc-options">
<label><input type="radio" name="soc_q7" value="2" required> Tak</label>
<label><input type="radio" name="soc_q7" value="1"> Częściowo lub rola rozproszona</label>
<label><input type="radio" name="soc_q7" value="0"> Nie</label>
</div>
</div>
<div class="soc-step" data-step="8">
<h3>8. Czy Wasza firma ma procedurę zgłaszania poważnych incydentów do właściwych podmiotów lub zespołów?</h3>
<div class="soc-options">
<label><input type="radio" name="soc_q8" value="2" required> Tak</label>
<label><input type="radio" name="soc_q8" value="1"> Nie wiem</label>
<label><input type="radio" name="soc_q8" value="0"> Nie</label>
</div>
</div>
<div class="soc-step" data-step="9">
<h3>9. Czy przeprowadzacie regularne testy bezpieczeństwa lub audyty?</h3>
<div class="soc-options">
<label><input type="radio" name="soc_q9" value="2" required> Tak</label>
<label><input type="radio" name="soc_q9" value="1"> Sporadycznie</label>
<label><input type="radio" name="soc_q9" value="0"> Nie</label>
</div>
</div>
<div class="soc-step" data-step="10">
<h3>10. Czy infrastruktura on-prem i chmurowa jest objęta spójnym monitoringiem bezpieczeństwa?</h3>
<div class="soc-options">
<label><input type="radio" name="soc_q10" value="2" required> Tak</label>
<label><input type="radio" name="soc_q10" value="1"> Częściowo</label>
<label><input type="radio" name="soc_q10" value="0"> Nie</label>
</div>
</div>
<div class="soc-step" data-step="11">
<h3>11. Czy zarząd regularnie otrzymuje informacje o stanie cyberbezpieczeństwa organizacji?</h3>
<div class="soc-options">
<label><input type="radio" name="soc_q11" value="2" required> Tak</label>
<label><input type="radio" name="soc_q11" value="1"> Sporadycznie</label>
<label><input type="radio" name="soc_q11" value="0"> Nie</label>
</div>
</div>
<div class="soc-step" data-step="12">
<h3>12. Czy uważasz, że Twoja organizacja jest dobrze przygotowana na wykrywanie i obsługę incydentów 24/7?</h3>
<div class="soc-options">
<label><input type="radio" name="soc_q12" value="2" required> Tak</label>
<label><input type="radio" name="soc_q12" value="1"> Nie jesteśmy pewni</label>
<label><input type="radio" name="soc_q12" value="0"> Nie</label>
</div>
</div>
<div class="soc-step soc-lead-step" data-step="13">
<h3>Zobacz wynik i otrzymaj rozszerzoną interpretację</h3>
<p>
Uzupełnij dane kontaktowe - pokażemy prosty wynik na stronie, a dodatkowe
wskazówki dotyczące gotowości organizacji na monitoring bezpieczeństwa i SOC
prześlemy po rejestracji.
</p>
<div class="soc-grid">
<div class="soc-field">
<label for="first_name">Imię</label>
<input type="text" id="first_name" name="first_name" required>
</div>
<div class="soc-field">
<label for="last_name">Nazwisko</label>
<input type="text" id="last_name" name="last_name" required>
</div>
<div class="soc-field">
<label for="email">E-mail</label>
<input type="email" id="email" name="email" required>
</div>
<div class="soc-field">
<label for="phone">Telefon</label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="soc-field">
<label for="company">Firma</label>
<input type="text" id="company" name="company" required>
</div>
<div class="soc-field">
<label for="job_title">Stanowisko</label>
<input type="text" id="job_title" name="job_title" required>
</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ą tej ankiety.
</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 id="socLeadErrors" class="soc-errors"></div>
<div id="socLeadErrors" class="soc-errors"></div>
</div>
<div class="soc-nav">
<button type="button" id="socPrevBtn" class="soc-btn soc-btn-secondary" disabled>Wstecz</button>
<button type="button" id="socNextBtn" class="soc-btn soc-btn-primary">Dalej</button>
<button type="submit" id="socSubmitBtn" class="soc-btn soc-btn-primary" style="display:none;">Pokaż wynik</button>
</div>
</form>
<div id="socResultBox" class="soc-result-box" style="display:none;"></div>
</div>
</section>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
#soc-assessment-section,
#soc-assessment-section * {
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.soc-quiz-wrap {
width: 100%;
max-width: 950px;
margin: 0 auto;
padding: 24px 16px;
}
.soc-quiz-card {
width: 100%;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 20px;
padding: 32px;
box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.soc-quiz-header h2 {
margin: 0 0 10px;
font-size: clamp(28px, 4vw, 38px);
line-height: 1.2;
font-weight: 700;
color: #111827;
}
.soc-quiz-header p {
margin: 0 0 24px;
color: #4b5563;
line-height: 1.7;
font-size: 16px;
}
.soc-progress-top {
margin-bottom: 24px;
}
.soc-progress-bar {
width: 100%;
height: 10px;
background: #eef2f7;
border-radius: 999px;
overflow: hidden;
margin-bottom: 8px;
}
.soc-progress-bar-fill {
height: 100%;
background: #048fcc;
transition: width 0.3s ease;
}
.soc-progress-text {
font-size: 14px;
color: #6b7280;
}
.soc-step {
display: none;
}
.soc-step.active {
display: block;
}
.soc-step h3 {
margin: 0 0 20px;
font-size: clamp(20px, 3vw, 28px);
line-height: 1.4;
font-weight: 600;
color: #111827;
}
.soc-step p {
color: #4b5563;
line-height: 1.7;
margin-bottom: 18px;
}
.soc-options {
display: grid;
gap: 14px;
}
.soc-options label,
.soc-check {
display: flex;
gap: 12px;
align-items: flex-start;
width: 100%;
border: 1px solid #dbe4ee;
border-radius: 14px;
padding: 16px 18px;
cursor: pointer;
line-height: 1.6;
transition: all 0.2s ease;
color: #111827;
background: #fff;
}
.soc-options label:hover,
.soc-check:hover {
border-color: #048fcc;
background: #f7fbfe;
}
.soc-options input[type="radio"],
.soc-check input[type="checkbox"] {
margin-top: 4px;
flex-shrink: 0;
}
.soc-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 20px;
}
.soc-field {
width: 100%;
}
.soc-field label {
display: block;
margin-bottom: 7px;
font-size: 14px;
font-weight: 600;
color: #111827;
}
.soc-field input {
width: 100%;
height: 50px;
border: 1px solid #cfd8e3;
border-radius: 12px;
padding: 0 14px;
font-size: 15px;
color: #111827;
background: #fff;
}
.soc-field input:focus {
outline: none;
border-color: #048fcc;
box-shadow: 0 0 0 3px rgba(4,143,204,0.12);
}
.consents {
display: grid;
gap: 12px;
margin-top: 22px;
}
.consent-text {
margin: 0;
color: #4b5563;
line-height: 1.7;
font-size: 14px;
}
.consent-text a {
color: #048fcc;
text-decoration: none;
}
.consent-text a:hover {
text-decoration: underline;
}
.consent-item {
display: flex;
gap: 12px;
align-items: flex-start;
width: 100%;
border: 1px solid #dbe4ee;
border-radius: 14px;
padding: 16px 18px;
cursor: pointer;
line-height: 1.6;
transition: all 0.2s ease;
color: #111827;
background: #fff;
}
.consent-item:hover {
border-color: #048fcc;
background: #f7fbfe;
}
.consent-item input[type="checkbox"] {
margin-top: 4px;
flex-shrink: 0;
}
.error {
display: none;
color: #b91c1c;
font-size: 14px;
line-height: 1.6;
margin-top: -2px;
}
.error.show-error {
display: block;
}
@media (max-width: 640px) {
.consent-item {
padding: 14px;
border-radius: 12px;
}
}
.soc-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 28px;
}
.soc-nav button {
flex: 1;
}
.soc-btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 150px;
height: 48px;
border-radius: 12px;
border: none;
cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: all 0.2s ease;
}
.soc-btn-primary {
background: #048fcc;
color: #ffffff;
}
.soc-btn-primary:hover {
opacity: 0.95;
}
.soc-btn-secondary {
background: #eef2f7;
color: #111827;
}
.soc-btn-secondary:hover {
background: #e5ebf2;
}
.soc-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.soc-errors {
color: #b91c1c;
margin-top: 14px;
font-size: 14px;
line-height: 1.6;
}
.soc-result-box {
margin-top: 28px;
padding: 24px;
border-radius: 18px;
background: #f8fbfd;
border: 1px solid #dbeaf3;
color: #111827;
}
.soc-result-box h3 {
margin-top: 0;
margin-bottom: 12px;
font-size: clamp(22px, 3vw, 30px);
line-height: 1.35;
}
.soc-result-box p {
line-height: 1.7;
color: #374151;
}
.soc-result-box p:last-child {
margin-bottom: 0;
}
@media (max-width: 900px) {
.soc-quiz-wrap {
padding: 20px 14px;
}
.soc-quiz-card {
padding: 26px;
}
}
@media (max-width: 640px) {
.soc-quiz-wrap {
padding: 16px 12px;
}
.soc-quiz-card {
padding: 20px 16px;
border-radius: 16px;
}
.soc-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.soc-nav {
flex-direction: column;
}
.soc-btn {
width: 100%;
min-width: 100%;
}
.soc-options label,
.soc-check {
padding: 14px;
border-radius: 12px;
}
.soc-field input {
height: 48px;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const WORKER_ENDPOINT = "https://softinet-gr-forms.a-grabinski.workers.dev/gr/subscribe";
const THANK_YOU_URL = "https://soc.softinet.com.pl/thank_you.html";
const FORM_ID = "ankieta_soc";
const form = document.getElementById("socQuizForm");
const steps = Array.from(form.querySelectorAll(".soc-step"));
const prevBtn = document.getElementById("socPrevBtn");
const nextBtn = document.getElementById("socNextBtn");
const submitBtn = document.getElementById("socSubmitBtn");
const resultBox = document.getElementById("socResultBox");
const progressBar = document.getElementById("socProgressBar");
const progressText = document.getElementById("socProgressText");
const leadErrors = document.getElementById("socLeadErrors");
let currentStep = 0;
const totalSteps = steps.length;
document.getElementById("source_url").value = window.location.href;
document.getElementById("page_title").value = document.title;
document.getElementById("user_agent").value = navigator.userAgent;
form.querySelector('[name="form_id"]').value = FORM_ID;
form.querySelector('[name="registration_source"]').value = "ankieta_soc";
function updateStep() {
steps.forEach((step, index) => {
step.classList.toggle("active", index === currentStep);
});
prevBtn.disabled = currentStep === 0;
const isLastStep = currentStep === totalSteps - 1;
nextBtn.style.display = isLastStep ? "none" : "inline-flex";
submitBtn.style.display = isLastStep ? "inline-flex" : "none";
const progressPercent = ((currentStep + 1) / totalSteps) * 100;
progressBar.style.width = progressPercent + "%";
progressText.textContent = "Krok " + (currentStep + 1) + " z " + totalSteps;
}
function validateCurrentStep() {
const step = steps[currentStep];
const radios = step.querySelectorAll('input[type="radio"]');
if (radios.length > 0) {
const name = radios[0].name;
const checked = step.querySelector('input[name="' + name + '"]:checked');
if (!checked) {
return false;
}
}
return true;
}
function calculateScore() {
let score = 0;
for (let i = 1; i <= 12; i++) {
const checked = form.querySelector('input[name="soc_q' + i + '"]:checked');
if (checked) score += parseInt(checked.value, 10);
}
return score;
}
function getResult(score) {
if (score <= 8) {
return {
label: "low",
title: "Twoja organizacja najprawdopodobniej potrzebuje wsparcia SOC",
text: "Z odpowiedzi wynika, że monitoring bezpieczeństwa i gotowość do obsługi incydentów mogą wymagać istotnego wzmocnienia. W praktyce oznacza to większe ryzyko późnego wykrycia incydentu, fałszywych alarmów oraz problemów z szybką reakcją.",
cta: "Prześlemy Ci rozszerzoną interpretację wyniku oraz wskazówki, które obszary warto uporządkować w pierwszej kolejności."
};
}
if (score <= 16) {
return {
label: "medium",
title: "Twoja organizacja ma podstawy, ale obszar monitoringu wymaga uporządkowania",
text: "Widać, że część mechanizmów bezpieczeństwa już działa, ale monitoring, korelacja zdarzeń lub proces reagowania mogą nie być jeszcze wystarczająco dojrzałe. To dobry moment, aby ocenić model SOC lub outsourcing monitoringu.",
cta: "Prześlemy Ci rozszerzoną interpretację wyniku i rekomendowane kolejne kroki."
};
}
return {
label: "high",
title: "Twoja organizacja wygląda na stosunkowo dojrzałą w obszarze bezpieczeństwa",
text: "Masz już widoczne podstawy dojrzałego podejścia do monitoringu i obsługi incydentów. Warto jednak sprawdzić, czy wszystkie procesy działają spójnie, obejmują pełne środowisko i wspierają wymagania organizacyjne oraz regulacyjne.",
cta: "Prześlemy Ci rozszerzoną interpretację wyniku i propozycję dalszej optymalizacji."
};
}
function getTagArray(resultLabel) {
return [
"interest_soc",
"interest_nis2",
"soc_assessment_completed",
"soc_result_" + resultLabel
];
}
function buildPayload() {
const score = calculateScore();
const result = getResult(score);
const tags = getTagArray(result.label);
const chEmail = form.querySelector('[name="custom_consent_email_marketing"]');
const chPhone = form.querySelector('[name="custom_consent_phone_marketing"]');
document.getElementById("soc_score").value = score;
document.getElementById("soc_result").value = result.label;
document.getElementById("soc_result_title").value = result.title;
document.getElementById("soc_result_desc").value = result.text;
const payload = {
form_id: form.querySelector('[name="form_id"]').value,
form_type: form.querySelector('[name="form_type"]').value,
solution_class: form.querySelector('[name="solution_class"]').value,
registration_source: form.querySelector('[name="registration_source"]').value,
campaign_token: form.querySelector('[name="campaign_token"]').value,
source_url: form.querySelector('[name="source_url"]').value,
page_title: form.querySelector('[name="page_title"]').value,
user_agent: form.querySelector('[name="user_agent"]').value,
first_name: form.querySelector('[name="first_name"]').value.trim(),
last_name: form.querySelector('[name="last_name"]').value.trim(),
email: form.querySelector('[name="email"]').value.trim(),
phone: form.querySelector('[name="phone"]').value.trim(),
company: form.querySelector('[name="company"]').value.trim(),
job_title: form.querySelector('[name="job_title"]').value.trim(),
consent_email_marketing: chEmail.checked,
consent_phone_marketing: chPhone.checked,
soc_score: score,
soc_result: result.label,
soc_result_title: result.title,
soc_result_desc: result.text,
tags: tags,
answers: {},
custom_fields: {
soc_score: String(score),
soc_result: result.label
}
};
for (let i = 1; i <= 12; i++) {
const checked = form.querySelector('input[name="soc_q' + i + '"]:checked');
const val = checked ? checked.value : null;
payload.answers["soc_q" + i] = val;
payload.custom_fields["soc_q" + i] = val;
}
return payload;
}
async function sendToWorker(payload) {
const response = await fetch(WORKER_ENDPOINT, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(payload)
});
if (!response.ok) {
throw new Error("Błąd wysyłki formularza");
}
return response.json();
}
nextBtn.addEventListener("click", () => {
if (!validateCurrentStep()) return;
if (currentStep < totalSteps - 1) {
currentStep += 1;
updateStep();
}
});
prevBtn.addEventListener("click", () => {
if (currentStep > 0) {
currentStep -= 1;
updateStep();
}
});
form.addEventListener("submit", async (e) => {
e.preventDefault();
if (!validateCurrentStep()) return;
const payload = buildPayload();
const result = getResult(payload.soc_score);
leadErrors.innerHTML = "";
submitBtn.disabled = true;
submitBtn.textContent = "Wysyłanie...";
try {
await sendToWorker(payload);
form.style.display = "none";
resultBox.style.display = "block";
resultBox.innerHTML =
"<h3>" + result.title + "</h3>" +
"<p>" + result.text + "</p>" +
"<p><strong>Twój wynik:</strong> " + payload.soc_score + " / 24</p>" +
"<p>" + result.cta + "</p>";
setTimeout(() => {
window.location.href = THANK_YOU_URL;
}, 1800);
} catch (err) {
leadErrors.innerHTML = "<div>Nie udało się wysłać formularza. Spróbuj ponownie.</div>";
submitBtn.disabled = false;
submitBtn.textContent = "Pokaż wynik";
}
});
updateStep();
});
</script>
