Az ajánlatkérő űrlap állapotainak megtervezése kulcsfontosságú a weboldal konverziós felületén: a látogatónak azonnal értenie kell, hogy mit vár tőle a rendszer, és mi történik a beküldés után. Az alábbi, önállóan kipróbálható HTML/CSS/JS demó egy olyan űrlapot mutat be, amely három jól elkülöníthető állapotot kezel: alaphelyzet, érvénytelen kitöltés (hibaüzenet) és sikeres beküldés (sikerüzenet). A példa önálló HTML/CSS/JavaScript minta, nem egy konkrét v0-projekt exportja. A v0-val tervezett felület követelményeinek összeállításához a hivatalos dokumentáció ad kiindulópontot. A teljes kód másolható, a demó az oldalon belül kipróbálható.
Kinek hasznos ez a demó?
Azoknak a vállalkozóknak és weboldal-tulajdonosoknak, akik saját maguk szerkesztik a weboldalukat, vagy kapcsolatban állnak egy fejlesztővel. A demó nem egy kész termék, hanem egy olyan interaktív terv, amely segít pontosan meghatározni, hogyan reagáljon az űrlap a felhasználói hibákra, és hogyan adjon egyértelmű visszajelzést a sikeres küldésről. Ez különösen hasznos, mielőtt egy weboldal-készítés projektben az űrlapot véglegesen implementálnák.
Egy konkrét, elképzelt helyzet
Képzelje el, hogy egy kertészeti szolgáltatásokat nyújtó cég weboldalán az érdeklődőknek árajánlatkérést kell beküldeniük. Egy látogató véletlenül hibás email címet ír be (pl. pelda@email pont nélkül). Ha az oldalon nincs egyértelmű hibajelzés, a látogató nem feltétlenül érti, mit kell javítania. A demó piros kerettel jelöli az érintett mezőt, az űrlap alatti visszajelzési sávban pedig hibaüzenetet mutat. Ez a felhasználói élmény növeli az esélyét, hogy a látogató javítja a hibát, és végül elküldi a megkeresést, ahelyett hogy elhagyná az oldalt.
Hogyan működik a demó?
A beágyazott kód egy teljesen működőképes űrlapot jelenít meg. A használata a következő:
- Írja be a nevét, egy érvényes email címet (formátum:
nev@domain.hu), válasszon projekt típust, és írja be a rövid leírást. - Kattintson a Küldés gombra. Ha minden mező ki van töltve és az email formátuma helyes, akkor a visszajelzési sáv zöld színűre vált, és megjelenik a sikeres küldés üzenete.
- Próbálja ki a Visszaállítás gombot, amely minden mezőt üresre állít, a hibajelzéseket pedig eltávolítja, így az űrlap újra alaphelyzetbe kerül.
Három pontos teszt az elvárt eredménnyel
- 1. teszt (üres mezők): Kattintson a Küldés gombra, anélkül hogy bármit is kitöltene. Eredmény: a Név, Email és Rövid leírás mezők piros keretet kapnak, a visszajelző sáv vörös háttérrel jelzi a hibát, és a rendszer a „Hiba: Ellenőrizze a kitöltött mezőket!” üzenetet jeleníti meg.
- 2. teszt (hibás email): Írjon be bármilyen érvényes adatokat, de az email mezőbe írja be azt, hogy
nev@example. Eredmény: csak az email mező lesz piros színű, és a hibaüzenet jelenik meg. A többi mező nem változik. - 3. teszt (sikeres küldés): Töltsön ki minden mezőt érvényes adatokkal (pl. Név: Teszt Elek, Email:
teszt@example.hu, Projekt típusa: Webfejlesztés, Leírás: Szeretnék egy új weboldalt). Eredmény: a visszajelző sáv zöld színűre vált, a szöveg „Ajánlatkérés sikeresen elküldve!” lesz, és az űrlap továbbra is szerkeszthető marad.
A megoldás korlátai
Ez a demó kizárólag a felhasználói felület állapotait mutatja be. A kód JavaScriptje csak a böngészőben működik, nem küldi el az adatokat szerverre. A minta saját JavaScript-szabállyal ellenőrzi az e-mail alakját, beleértve a @ jelet és a ponttal tagolt domainvégződést. Ez egyszerű formátumellenőrzés: nem bizonyítja, hogy a postafiók létezik vagy az érdeklődőé. A sikerüzenet is kizárólag helyi mintaállapot; nem történt valódi ajánlatkérés.
Mit igényelne egy éles weboldal?
Egy valódi, WordPress alapú weboldalon ehhez a demóhoz további elemekre lenne szükség: a beküldött adatok szerveroldali feldolgozására, egy adatbázisba vagy email értesítésbe történő mentésre, valamint biztonsági intézkedésekre (pl. CSRF-token, spamvédelem). A kódot ezen kívül össze kellene hangolni a weboldal egyedi stílusával és a designrendszerével.
A demó tehát nem egy kész termék, hanem egy tervezési eszköz: segít vizuálisan és funkcionálisan egyeztetni a megrendelővel és a fejlesztővel, hogyan nézzen ki és viselkedjen az ajánlatkérés folyamata a valós oldalon. A kódot felhasználhatja alapként, de az éles környezethez való igazítása szakértelmet igényel.
Próbáld ki a működő példát
A teljes másolható kód
Teljes, másolható index.html
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajánlatkérő űrlap állapotai – v0 demó</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #202632; color: #e6eef8; font-family: 'Segoe UI', Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; }
.card { background: #2c333f; border-radius: 12px; padding: 30px; width: 100%; max-width: 500px; box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
h1 { font-size: 1.4rem; margin-bottom: 20px; text-align: center; color: #ffffff; }
.form-group { margin-bottom: 16px; }
label { display: block; margin-bottom: 6px; font-weight: 500; }
input, select { width: 100%; padding: 10px; border: 2px solid #3a4352; border-radius: 8px; background: #1a1f27; color: #e6eef8; font-size: 1rem; }
input:focus, select:focus { outline: none; border-color: #39a0ff; }
input.invalid { border-color: #ff6b6b; }
.btn-group { display: flex; gap: 10px; margin-top: 20px; }
button { flex: 1; padding: 12px 16px; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; font-weight: 600; }
button.btn-primary { background: #39a0ff; color: #1a1f27; }
button.btn-secondary { background: #3a4352; color: #e6eef8; }
button:hover { opacity: 0.9; }
.feedback { margin-top: 20px; padding: 12px; border-radius: 8px; background: #1a1f27; min-height: 50px; }
.feedback p { margin: 0; }
.message-sent { background: #2e7d32; }
.message-error { background: #7d2e2e; }
#result { min-height: 20px; font-weight: 500; }
</style>
</head>
<body>
<div class="card">
<h1>Ajánlatkérés – űrlap állapotok</h1>
<form id="offerForm" onsubmit="return false;">
<div class="form-group">
<label for="name">Név *</label>
<input type="text" id="name" placeholder="Kérjük adja meg nevét" />
</div>
<div class="form-group">
<label for="email">Email cím *</label>
<input type="email" id="email" placeholder="pelda@email.com" />
</div>
<div class="form-group">
<label for="projectType">Projekt típusa</label>
<select id="projectType">
<option value="webfejlesztes">Webfejlesztés</option>
<option value="mobilalkalmazas">Mobilalkalmazás</option>
<option value="tanacsadas">Tanácsadás</option>
</select>
</div>
<div class="form-group">
<label for="description">Rövid leírás *</label>
<input type="text" id="description" placeholder="Mit szeretne megvalósítani?" />
</div>
<div class="btn-group">
<button type="button" class="btn-primary" id="submitBtn">Küldés</button>
<button type="button" class="btn-secondary" id="resetBtn">Visszaállítás</button>
</div>
</form>
<div class="feedback" id="feedback">
<p id="result">Készen áll az űrlap kitöltésére.</p>
</div>
</div>
<script>
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const projectSelect = document.getElementById('projectType');
const descInput = document.getElementById('description');
const feedbackDiv = document.getElementById('feedback');
const resultText = document.getElementById('result');
function validateForm() {
let valid = true;
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
[nameInput, emailInput, descInput].forEach(input => {
input.classList.remove('invalid');
if (input.value.trim() === '') {
input.classList.add('invalid');
valid = false;
}
});
if (emailInput.value.trim() !== '' && !emailPattern.test(emailInput.value.trim())) {
emailInput.classList.add('invalid');
valid = false;
}
return valid;
}
function updateFeedback(message, isError = false, isSuccess = false) {
resultText.textContent = message;
feedbackDiv.classList.remove('message-error', 'message-sent');
if (isError) {
feedbackDiv.classList.add('message-error');
} else if (isSuccess) {
feedbackDiv.classList.add('message-sent');
}
}
document.getElementById('submitBtn').addEventListener('click', function() {
if (validateForm()) {
updateFeedback('Ajánlatkérés sikeresen elküldve! Kérjük várjon a visszajelzésre.', false, true);
// Az űrlap sikeres állapotban van – itt lehetne további logika
} else {
updateFeedback('Hiba: Ellenőrizze a kitöltött mezőket! (Email formátuma érvénytelen lehet.)', true);
}
});
document.getElementById('resetBtn').addEventListener('click', function() {
nameInput.value = '';
emailInput.value = '';
projectSelect.selectedIndex = 0;
descInput.value = '';
[nameInput, emailInput, descInput].forEach(input => input.classList.remove('invalid'));
updateFeedback('Űrlap alaphelyzetbe állítva.');
});
</script>
</body>
</html>A weboldalon megjelenő szöveges és vizuális tartalmak előállításához mesterséges intelligenciát (AI) használunk.