phpBB Forumlar İçin Basit İletişim Forumu

TRWE_2012 · 27 Kas 2024

Merhabalar

Bu basit iletişim formunu, bir web sayfasının iletişim 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 ... :-D )

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:

<!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:

<?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.

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

TRWE_2012 · 27 Kas 2024

İ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:

<!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ü :

.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.

Arama Yap

Arama Yap

phpBB Forumlar İçin Basit İletişim Forumu

TRWE_2012

لِيَغْفِرَ لَكَ اللّٰهُ مَا تَقَدَّمَ مِنْ ذَنْبِك

TRWE_2012

لِيَغْفِرَ لَكَ اللّٰهُ مَا تَقَدَّمَ مِنْ ذَنْبِك