• phpBB Forumlar İçin Basit İletişim Forumu

Merhabalar

Bu basit iletişim formunu, Resim

web sayfasından esinlendim .Bunun için web sayfasının html kod içeriğine bakarak bunu yaptım forumlar için.... (bu benim ilk iletişim formu oluşturma denemesi)

Yatay text alanları biraz uzun oldu,biraz kısaltılacak... (Çizgili defter gibi oldu ...

)

Hata vermesi gayet doğal...Asıl burada önemli olan mail() fonksiyonun çalışması

.html ve .php kodlarının içerikleri :

index.html

Kod: Tümünü seç


<!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>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        label {
            display: block;
            margin: 10px 0 5px;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>İletişim Formu</h1>
    <form action="contact.php" method="post">
        <label for="name">Adınız:</label>
        <input type="text" id="name" name="name" required>

        <label for="surname">Soyadınız:</label>
        <input type="text" id="surname" name="surname" required>

        <label for="email">E-Posta Adresiniz:</label>
        <input type="email" id="email" name="email" required>

        <label for="member">Forum Üyemiz misin?</label>
        <select id="member" name="member" required>
            <option value="Evet">Evet</option>
            <option value="Hayır">Hayır</option>
        </select>

        <label for="subject">Konu Başlığı:</label>
        <input type="text" id="subject" name="subject" required>

        <label for="message">Mesaj (max 5550 karakter):</label>
        <textarea id="message" name="message" rows="5" maxlength="5550" required></textarea>

        <button type="submit">Gönder</button>
    </form>
</body>
</html>

contact.php

Kod: Tümünü seç


<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // Form verilerini al
    $name = $_POST['name'];
    $surname = $_POST['surname'];
    $email = $_POST['email'];
    $member = $_POST['member'];
    $subject = $_POST['subject'];
    $message = $_POST['message'];

    // E-posta gönderimi
    $to = "your-email@example.com"; // Buraya kendi e-posta adresinizi yazın
    $email_subject = "Yeni İletişim Formu Mesajı: $subject";
    $body = "Ad: $name\nSoyad: $surname\nE-posta: $email\nForum Üyemiz mi: $member\n\nMesaj:\n$message";

    // Başlıkları ayarlayın
    $headers = "From: $name <$email>\r\n";
    $headers .= "Reply-To: $email\r\n";
    $headers .= "Content-Type: text/plain; charset=utf-8\r\n";

    // E-posta gönder
    if (mail($to, $email_subject, $body, $headers)) {
        echo "Mesajınız başarıyla gönderildi.";
    } else {
        echo "Mesaj gönderilirken bir hata oluştu.";
    }
}
?>

Sonra bu dosyaları yerel bilgisayarda kurulu kendi oluşturduğum şablon dizinine attım.

Resim

Sonuç,olarak bu iletişim form web sayfası, sordum forum gibi BBForum'da kullanılabilir.Gerisini ustalara bırakıyorum.

Güzel görünüyor.

İletişim Form versiyon 2 :

Bunu bir başka forum sitesinden aldım ve üzerinde bir dizi değişikler yaptım.php kodundan bağımsız...

Kod: Tümünü seç


<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>buraya bir isim yazınız</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      background-color: whitesmoke;
    }
    .contact-section {
      padding: 50px 0;
    }
    .contact-section h2 {
      font-size: 36px;
      margin-bottom: 20px;
      color: #333;
    }
    .contact-section p {
      font-size: 18px;
      margin-bottom: 30px;
      color: #777;
    }
    .form-control:focus {
      box-shadow: none;
      border-color: #007bff;
    }
    .send-btn {
      background-color: #007bff;
      color: white;
    }
    .send-btn:hover {
      background-color: #0056b3;
      color: white;
    }
    .alert {
      position: fixed;
      top: 20px;
      right: 20px;
      opacity: 0;
      transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
      transform: translateY(-50px);
    }
    .alert.show {
      opacity: 1;
      transform: translateY(0);
    }
  </style>
</head>
<body>

  <section class="contact-section">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-6">
          <div class="text-center mb-5">
            <h2>Bizimle İletişime Geçin</h2>
            <p>Lütfen formu doldurun, size en kısa sürede geri döneceğiz</p>
          </div>
          <form id="contactForm">
            <div class="form-group mb-3">
              <label for="name" class="form-label">Adınız</label>
              <input type="text" class="form-control" id="name" placeholder="Adınız" required>
            </div>
            <div class="form-group mb-3">
              <label for="email" class="form-label">E-posta Adresiniz</label>
              <input type="email" class="form-control" id="email" placeholder="E-posta adresiniz" required>
            </div>
            <div class="form-group mb-3">
              <label for="subject" class="form-label">Konu</label>
              <input type="text" class="form-control" id="subject" placeholder="Konu" required>
            </div>
            <div class="form-group mb-3">
              <label for="message" class="form-label">Mesajınız</label>
              <textarea class="form-control" id="message" rows="4" placeholder="Mesajınızı buraya yazın" required></textarea>
            </div>
            <div class="text-center">
              <button type="submit" class="btn send-btn btn-lg">Gönder</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <div class="alert alert-success" id="successAlert" role="alert">
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    const contactForm = document.getElementById('contactForm');
    const successAlert = document.getElementById('successAlert');

    contactForm.addEventListener('submit', function(event) {
      event.preventDefault();

      const name = document.getElementById('name').value;
      const email = document.getElementById('email').value;
      const subject = document.getElementById('subject').value;
      const message = document.getElementById('message').value;

      if (name && email && subject && message) {
        successAlert.innerHTML = `" <strong>${subject}</strong> " başlığıyla mesajınız başarıyla alındı.`;

        successAlert.classList.add('show');

        setTimeout(function() {
          successAlert.classList.remove('show');
        }, 3000);

        contactForm.reset();
      }
    });
  </script>
</body>
</html>

Ekran Görüntüsü :

Resim

.HTML Kodun "Kod İçerik" Açıklaması :

Bu form, kullanıcıların adlarını, e-posta adreslerini, konu başlıklarını ve mesajlarını girmelerine olanak tanıyor. Bu basit iletişim formu, kullanıcıların kolayca forum yönetimi ile iletişime geçmesini sağlıyor. Bootstrap kullanarak şık bir görünüm elde edilmiş ve JavaScript ile formun işlevselliğini artırılmış...

NOT:

Bootstrap NEDİR?

CEVAP

Bootstrap, web geliştirme için popüler bir açık kaynaklı CSS framework'üdür. X (eski adı Twitter) tarafından geliştirilen Bootstrap, kullanıcıların hızlı ve kolay bir şekilde duyarlı (responsive) ve mobil uyumlu web siteleri ve uygulamaları oluşturmasına yardımcı olur.
Bootstrap, web geliştirme sürecini hızlandırmak ve daha verimli hale getirmek için yaygın olarak kullanılan bir araçtır.

Bootstrap Resmi Web Sitesi: getbootstrap.com

Bootstrap'ın resmi web sitesi, framework'ün en güncel sürümünü, belgelerini, bileşenlerini ve örneklerini içerir. Buradan Bootstrap'ı nasıl kullanacağınızı öğrenebilirsiniz.

Üstad yine harikalar Üretmişsin ve bizlerle paylaşmışsın ellerine kollarına beynine sağlık. teşekkürler.

mehoaga yazdı: 25 Kas 2024, 18:06 Üstad yine harikalar Üretmişsin ve bizlerle paylaşmışsın ellerine kollarına beynine sağlık. teşekkürler.

Ama ben kodlamadım bunu, sadece üzerindeki hataları giderdik mesala Türkçe karakter sorunun çözümlenmesi gibi

TRWE_2012 yazdı: 25 Kas 2024, 18:32
mehoaga yazdı: 25 Kas 2024, 18:06 Üstad yine harikalar Üretmişsin ve bizlerle paylaşmışsın ellerine kollarına beynine sağlık. teşekkürler.
Ama ben kodlamadım bunu, sadece üzerindeki hataları giderdik mesala Türkçe karakter sorunun çözümlenmesi gibi

Kod olayını bilmem ben.

Paylaşımı sen yapmadın galiba.

Yinede ben gördüm ve duygularımı ifade ettim. iYİKİ VARSINIZ.

Eline sağlık.

phpBB Forumlar İçin Basit İletişim Forumu

phpBB Forumlar İçin Basit İletişim Forumu

Re: phpBB Forumlar İçin Basit İletişim Forumu

Re: phpBB Forumlar İçin Basit İletişim Forumu

Re: phpBB Forumlar İçin Basit İletişim Forumu

Re: phpBB Forumlar İçin Basit İletişim Forumu

Re: phpBB Forumlar İçin Basit İletişim Forumu

Re: phpBB Forumlar İçin Basit İletişim Forumu