İletişim formu oluşturma işlemi için HTML ve CSS kullanarak şu adımları izleyebilirsiniz:
İlk olarak, bir HTML formu oluşturun ve iletişim formu için uygun giriş alanları (ad, e-posta, konu, mesaj vb.) ekleyin. Aşağıdaki kod, bir HTML formu oluşturmak için bir örnek sunmaktadır:
<form> <label for="name">Adınız</label> <input type="text" id="name" name="name" placeholder="Adınızı girin" required> <label for="email">E-posta adresiniz</label> <input type="email" id="email" name="email" placeholder="E-posta adresinizi girin" required> <label for="subject">Konu</label> <input type="text" id="subject" name="subject" placeholder="Konu" required> <label for="message">Mesajınız</label> <textarea id="message" name="message" placeholder="Mesajınızı buraya yazın" required></textarea> <button type="submit">Gönder</button> </form>
Formun CSS stilini ayarlayın. İletişim formunun tasarımı, seçtiğiniz tasarım ve tercihlerinize bağlı olarak değişebilir. Aşağıdaki CSS örneği, iletişim formunu tasarlamak için bazı temel stiller içermektedir:
form {
background-color: #f2f2f2;
max-width: 600px;
margin: 0 auto;
padding: 20px;
border-radius: 10px;
}
label {
display: block;
margin-bottom: 5px;
}
input,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
font-size: 16px;
font-family: Arial, sans-serif;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
font-family: Arial, sans-serif;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
Bu stil ayarları, formun arka plan rengini, maksimum genişliğini, kenar boşluğunu, yuvarlatılmış köşelerini, etiketlerin ve giriş alanlarının aralığını, giriş alanlarının genişliğini ve yüksekliğini, düğmenin stilini ve daha fazlasını belirler.
Formu sunucuya göndermek için bir işlem belirleyin. Bu işlem genellikle PHP, Python veya başka bir sunucu tarafı programlama dili kullanılarak gerçekleştirilir.
Eğer iletişim formu verilerini işleyebilmek ve sunucuya gönderebilmek için bir sunucu tarafı programlama dili kullanmak istiyorsanız, formun action özelliğini belirlemelisiniz. Örneğin, aşağıdaki HTML kodu, formun action özelliğini submit-form.php dosyasına ayarlar:
<form action="submit-form.php" method="post"> <!-- form alanları burada olacak --> </form>
method özelliği post olarak ayarlanmıştır, çünkü bu yöntem form verilerinin sunucuya gönderilmesinde daha güvenlidir.
E-posta göndermek için sunucu tarafı betikleri kullanmak istemiyorsanız, HTML formu iletişim bilgilerini doğrudan bir e-posta adresine gönderebilirsiniz. Bu işlem, formun action özelliğini “mailto” protokolüne ve hedef e-posta adresine ayarlamakla gerçekleştirilebilir.
<form action="mailto:destinasyon@ornek.com" method="post"> <!-- form alanları burada olacak --> </form>
Ancak, bu yöntem tüm tarayıcılarda çalışmayabilir ve güvenlik açıklarına neden olabilir, bu nedenle sunucu tarafı betiklerini kullanmanız önerilir.
Son olarak, formunuzu test edin. Formunuzu tarayıcınızda açın, form alanlarını doldurun ve “Gönder” düğmesine tıklayın. Formun verileri başarıyla sunucuya gönderildiğinde veya e-posta adresine iletildiğinde bir teşekkür mesajı görüntüleyebilirsiniz.
Bu adımları izleyerek HTML ve CSS kullanarak bir iletişim formu oluşturabilirsiniz. Ancak, formu sunucuda işlemek ve verileri işlemek için daha fazla kod yazmanız gerekebilir.
Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.