Formularz Kontaktowy
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>hemaju.pl – Formularz kontaktowy (eventy)</title>
<style>
:root{--bg:#0f172a;--card:#111827;--muted:#94a3b8;--text:#e5e7eb;--accent:#60a5fa;--accent-2:#22d3ee;--error:#f87171;--ok:#34d399;--ring:rgba(96,165,250,.45);--radius:16px}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 20% 0%, rgba(96,165,250,.05), transparent 60%), radial-gradient(1200px 600px at 80% 0%, rgba(34,211,238,.05), transparent 60%), var(--bg); color:var(--text); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial}
.wrap{max-width:920px;margin:48px auto;padding:0 20px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.15);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.35)}
header{text-align:center;padding:36px 24px 8px}
header h1{margin:0 0 6px;font-size:clamp(28px,5vw,40px);letter-spacing:.3px}
header p{margin:0 auto;max-width:720px;color:var(--muted)}
form{padding:24px;display:grid;gap:18px}
fieldset{border:none;margin:0;padding:0}
.grid-2{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:720px){.grid-2,.grid-3{grid-template-columns:1fr}}
label{display:block;font-weight:600;margin:4px 0 6px}
.help{font-size:12px;color:var(--muted);margin-top:4px}
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="date"],select,textarea{width:100%;background:#0b1220;color:var(--text);border:1px solid rgba(148,163,184,.2);border-radius:12px;padding:12px 14px;outline:none;transition:box-shadow .15s ease,border-color .15s ease}
textarea{min-height:140px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--ring)}
.checkboxes,.radios{display:flex;flex-wrap:wrap;gap:10px 18px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:#0b1220;border:1px solid rgba(148,163,184,.2);border-radius:999px}
.chip input{margin:0}
.actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:8px}
.consents{display:flex;align-items:start;gap:10px;font-size:14px;color:var(--muted)}
button[type="submit"]{appearance:none;border:none;cursor:pointer;font-weight:700;letter-spacing:.2px;padding:12px 18px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#0b1220;box-shadow:0 10px 24px rgba(34,211,238,.25)}
button[disabled]{opacity:.6;cursor:not-allowed}
.footnote{color:var(--muted);font-size:13px;text-align:center;padding:12px 20px 24px}
.status{display:none;padding:12px 14px;border-radius:12px}
.status.ok{display:block;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.35)}
.status.err{display:block;background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.35)}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
</style>
</head>
<body>
<div class="wrap">
<div class="card">
<header>
<h1>Zorganizuj z nami niezapomniany event</h1>
<p>Wypełnij formularz, a zespół HEMAJU skontaktuje się z Tobą, aby doprecyzować szczegóły wydarzenia dla firm, dzieci lub młodzieży.</p>
</header>
<form id="contactForm" method="post" action="/mailer.php">
<!-- STATUS -->
<div id="status" class="status" role="status" aria-live="polite"></div>
<script>
// Pokaż status po powrocie z mailera
(function () {
const params = new URLSearchParams(window.location.search);
const status = document.getElementById('status');
if (params.get('sent') === '1') {
status.className = 'status ok';
status.textContent = 'Dziękujemy! Formularz został wysłany. Skontaktujemy się niebawem.';
// Czyścimy query string, żeby baner nie zostawał po odświeżeniu
if (history.replaceState) history.replaceState(null, '', window.location.pathname);
}
if (params.get('err') === '1') {
status.className = 'status err';
status.textContent = 'Nie udało się wysłać wiadomości. Spróbuj ponownie lub napisz na office@hemaju.co.uk';
if (history.replaceState) history.replaceState(null, '', window.location.pathname);
}
})();
</script>
<!-- 1. DANE KONTAKTOWE -->
<fieldset aria-labelledby="legend-kontakt">
<legend id="legend-kontakt" class="visually-hidden">Dane kontaktowe</legend>
<div class="grid-2">
<div>
<label for="name">Imię i nazwisko <span aria-hidden="true">*</span></label>
<input id="name" name="name" type="text" autocomplete="name" required />
</div>
<div>
<label for="company">Nazwa firmy / instytucji</label>
<input id="company" name="company" type="text" autocomplete="organization" />
</div>
</div>
<div class="grid-2">
<div>
<label for="email">E-mail <span aria-hidden="true">*</span></label>
<input id="email" name="email" type="email" inputmode="email" autocomplete="email" required />
</div>
<div>
<label for="phone">Telefon <span aria-hidden="true">*</span></label>
<input id="phone" name="phone" type="tel" inputmode="tel" autocomplete="tel" required />
</div>
</div>
</fieldset>
<!-- 2. RODZAJ WYDARZENIA & GRUPA DOCELOWA -->
<fieldset aria-labelledby="legend-rodzaj">
<legend id="legend-rodzaj" class="visually-hidden">Rodzaj wydarzenia</legend>
<div class="grid-2">
<div>
<label for="eventType">Rodzaj wydarzenia <span aria-hidden="true">*</span></label>
<select id="eventType" name="eventType" required>
<option value="" selected disabled>Wybierz…</option>
<option>Event firmowy</option>
<option>Event dla dzieci</option>
<option>Event dla młodzieży</option>
<option>Warsztaty / animacje tematyczne</option>
<option>Piknik rodzinny / integracyjny</option>
<option value="inny">Inny</option>
</select>
<input id="eventTypeOther" name="eventTypeOther" class="visually-hidden" type="text" placeholder="Opisz inny rodzaj wydarzenia" aria-hidden="true" />
</div>
<div>
<label>Grupa docelowa</label>
<div class="checkboxes" role="group" aria-label="Grupa docelowa">
<label class="chip"><input type="checkbox" name="audience[]" value="dzieci" /> Dzieci</label>
<label class="chip"><input type="checkbox" name="audience[]" value="mlodziez" /> Młodzież</label>
<label class="chip"><input type="checkbox" name="audience[]" value="dorosli" /> Dorośli</label>
</div>
<p class="help">Możesz zaznaczyć więcej niż jedną opcję.</p>
</div>
</div>
</fieldset>
<!-- 3. LICZBA UCZESTNIKÓW -->
<fieldset aria-labelledby="legend-uczestnicy">
<legend id="legend-uczestnicy" class="visually-hidden">Liczba uczestników</legend>
<div class="grid-3">
<div>
<label for="kids">Dzieci</label>
<input id="kids" name="kids" type="number" min="0" placeholder="np. 50" />
</div>
<div>
<label for="teens">Młodzież</label>
<input id="teens" name="teens" type="number" min="0" placeholder="np. 30" />
</div>
<div>
<label for="adults">Dorośli</label>
<input id="adults" name="adults" type="number" min="0" placeholder="np. 20" />
</div>
</div>
</fieldset>
<!-- 4. TERMIN -->
<fieldset aria-labelledby="legend-termin">
<legend id="legend-termin" class="visually-hidden">Termin wydarzenia</legend>
<div class="grid-2">
<div>
<label for="startDate">Data rozpoczęcia <span aria-hidden="true">*</span></label>
<input id="startDate" name="startDate" type="date" required />
</div>
<div>
<label for="endDate">Data zakończenia <small class="help">(opcjonalnie)</small></label>
<input id="endDate" name="endDate" type="date" />
</div>
</div>
</fieldset>
<!-- 5. MIEJSCE -->
<fieldset aria-labelledby="legend-miejsce">
<legend id="legend-miejsce" class="visually-hidden">Miejsce wydarzenia</legend>
<div class="grid-2">
<div>
<label for="location">Miejsce wydarzenia</label>
<input id="location" name="location" type="text" placeholder="np. Warszawa, siedziba firmy / szkoła / park" />
</div>
<div>
<label>Charakter miejsca</label>
<div class="radios" role="group" aria-label="Charakter miejsca">
<label class="chip"><input type="radio" name="venue" value="wewnatrz" /> Wewnątrz</label>
<label class="chip"><input type="radio" name="venue" value="na_zewnatrz" /> Na zewnątrz</label>
<label class="chip"><input type="radio" name="venue" value="nie_wiem" /> Jeszcze nie wiem</label>
</div>
</div>
</div>
</fieldset>
<!-- 6. BUDŻET -->
<fieldset aria-labelledby="legend-budzet">
<legend id="legend-budzet" class="visually-hidden">Budżet</legend>
<div class="grid-2">
<div>
<label for="budget">Budżet orientacyjny</label>
<select id="budget" name="budget">
<option value="" selected>Nie podaję</option>
<option>do 5 000 zł</option>
<option>5 000 – 10 000 zł</option>
<option>10 000 – 20 000 zł</option>
<option>powyżej 20 000 zł</option>
</select>
</div>
<div>
<label for="deadline">Termin na ofertę</label>
<input id="deadline" name="deadline" type="date" />
<p class="help">Jeśli potrzebujesz oferty do konkretnej daty.</p>
</div>
</div>
</fieldset>
<!-- 7. OPIS -->
<fieldset aria-labelledby="legend-opis">
<legend id="legend-opis" class="visually-hidden">Opis wydarzenia</legend>
<label for="message">Opis wydarzenia / dodatkowe informacje</label>
<textarea id="message" name="message" maxlength="1500" placeholder="Opisz krótko oczekiwania, temat przewodni, cele wydarzenia, potrzeby techniczne, itp."></textarea>
<div class="help"><span id="charCount">0</span>/1500 znaków</div>
</fieldset>
<!-- 8. ZGODY + SUBMIT -->
<fieldset aria-labelledby="legend-zgody">
<legend id="legend-zgody" class="visually-hidden">Zgody</legend>
<div class="actions">
<label class="consents">
<input id="consent" name="consent" type="checkbox" required />
<span>Wyrażam zgodę na przetwarzanie danych osobowych zgodnie z <a href="/polityka-prywatnosci/" target="_blank" rel="noopener">polityką prywatności hemaju.pl</a>. *</span>
</label>
<button id="submitBtn" type="submit">Wyślij zapytanie</button>
</div>
<p class="help">* Pole wymagane. Chronimy Twoje dane — używamy ich wyłącznie do kontaktu w sprawie zapytania.</p>
</fieldset>
<!-- Anti-spam honeypot -->
<div aria-hidden="true" class="visually-hidden">
<label for="website">Jeśli widzisz to pole, nie wypełniaj go</label>
<input id="website" name="website" type="text" tabindex="-1" autocomplete="off" />
</div>
<!-- domyślni odbiorcy -->
<input type="hidden" name="to" value="office@hemaju.co.uk,bok@hemaju.pl" />
</form>
<div class="footnote">HEMAJU – przygotowujemy i prowadzimy eventy biznesowe dla dzieci i młodzieży. Przykładowe realizacje: Movement Studio – ponad 600 dzieci (ostatnie 3 lata).</div>
</div>
</div>
<script>
// Pokazanie pola "Inny"
const eventType=document.getElementById('eventType');
const eventTypeOther=document.getElementById('eventTypeOther');
eventType.addEventListener('change',()=>{const isOther=eventType.value==='inny';
eventTypeOther.classList.toggle('visually-hidden',!isOther);
eventTypeOther.toggleAttribute('aria-hidden',!isOther);
eventTypeOther.required=isOther; if(isOther)eventTypeOther.focus();
});
// Licznik znaków
const message=document.getElementById('message'); const charCount=document.getElementById('charCount');
message.addEventListener('input',()=>{charCount.textContent=message.value.length;});
</script>
</body>
</html>
