Vytvorenie responzívneho kontaktného formulára s HTML a CSS

Úvod

V tomto článku sa naučíš vytvoriť **formulár na kontakt** pre svoju webstránku. Formuláre umožňujú používateľom posielať správy alebo údaje priamo zo stránky a sú nevyhnutnou súčasťou kontaktnej sekcie.

1. HTML štruktúra formulára

 <form class="kontakt-form"> <label for="meno">Meno:</label> <input type="text" id="meno" name="meno" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="sprava">Správa:</label>
<textarea id="sprava" name="sprava" rows="5" required></textarea>

<button type="submit">Odoslať</button>



2. CSS štýly formulára

 .kontakt-form { display: flex; flex-direction: column; max-width: 500px; margin: 0 auto; gap: 15px; }

.kontakt-form input,
.kontakt-form textarea {
padding: 10px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
width: 100%;
}

.kontakt-form button {
padding: 12px;
background-color: #0288d1;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s;
}

.kontakt-form button:hover {
background-color: #026fa1;
}

@media (max-width: 768px) {
.kontakt-form {
width: 90%;
}
}

Záver

Tento kontaktný formulár je jednoduchý, responzívny a pripravený na použitie. Môžeš ho ďalej rozšíriť o overovanie údajov alebo pridať integráciu so serverom pre prijímanie správ.