Vytvorenie kontaktného formulára s HTML a CSS

Úvod

V tomto článku sa naučíš, ako vytvoriť jednoduchý kontaktný formulár pre svoju webstránku pomocou HTML a CSS. Kontaktný formulár je dôležitý pre komunikáciu s návštevníkmi a môže obsahovať polia ako meno, email, správa a tlačidlo odoslania.

1. HTML formulár

 <form action="#" method="post"> <label for="name">Meno:</label> <input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">

<label for="message">Správa:</label>
<textarea id="message" name="message"></textarea>

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



2. CSS štýly

 form { display: flex; flex-direction: column; max-width: 400px; margin: 0 auto; }

label {
margin-top: 10px;
}

input, textarea {
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}

button {
margin-top: 15px;
padding: 10px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #45a049;
}

Záver

Tento jednoduchý kontaktný formulár ti umožní zbierať správy od návštevníkov. Môžeš ho rozšíriť o validáciu formulára alebo prepojenie na server, aby sa správy odosielali priamo na tvoj email.