)
İletişim formları, web sayfalarının en kritik bileşenlerinden biridir. Kullanıcıların site sahibi ile etkileşimini sağlar ve geri bildirim almanın en etkili yoludur. Bu yazıda, HTML ile temiz ve etkili bir iletişim formu oluşturmanın yollarını öğreneceksiniz. Hemen başlayalım!
Adım 1: Temel HTML Yapısını Oluşturun
HTML ile bir iletişim formu oluşturmanın ilk adımı, gerekli HTML yapısını kurmaktır. İşte basit bir taslak:
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İletişim Formu</title>
<link rel="stylesheet" href="https://www.webailesi.com/yonlendir.php?link=style.css"> <!-- Stil dosyası -->
</head>
<body>
<h1>Bizimle İletişime Geçin</h1>
<form action="submit.php" method="post">
<label for="name">Adınız:</label>
<input type="text" id="name" name="name" required>
<label for="email">E-posta Adresiniz:</label>
<input type="email" id="email" name="email" required>
<label for="message">Mesajınız:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Gönder</button>
</form>
</body>
</html>Görsel olarak çekici bir form oluşturmak için CSS kullanarak stil verebilirsiniz. İşte basit bir stil dosyası örneği:
Kod:
/* style.css */
body {
font-family: Arial, sans-serif;
}
form {
max-width: 400px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
label {
display: block;
margin-bottom: 5px;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 3px;
border: 1px solid #ccc;
}
button {
padding: 10px 15px;
background-color: #28a745;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}Formunuzu oluşturduktan sonra, dikkatlice test edin. Herhangi bir sorunla karşılaşmamak için adım adım formun işleyişini kontrol edin. Form aracılığıyla alınan verilerin doğru bir şekilde iletildiğinden emin olun.
Adım 4: Geri Bildirim ve İletişim Sağlayın
Kullanıcı geri bildirimlerini almak için formun gönderiminden sonra bir teşekkür mesajı gösterilebilir. Bu, kullanıcıların iletişim formunu doldurduktan sonra kendilerini değerli hissetmelerini sağlar.
Kod:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Verileri al
$name = htmlspecialchars($_POST['name']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
// E-posta gönderimi işlemleri burada yer alacak
// ...
echo "Teşekkür ederiz, mesajınız başarıyla gönderilmiştir.";
}
?>HTML ile hızlı ve etkili bir iletişim formu oluşturmak, web sitenizin kullanıcı deneyimini geliştirecektir. Yukarıda paylaştığımız kod örnekleri ve yöntemler sayesinde kendi iletişim formunuzu kolayca oluşturabilirsiniz. Herhangi bir soru veya öneriniz varsa, yorumlarda belirtmekten çekinmeyin!