Bootstrap ve PHP ile İletişim Formu

20 Nisan 2017 2 Yazar: Şükrü KAYA

PHP’nin teknik gereksinimleri şunlardır: PHP> = 5.3 E-posta sunucusu kurulumu

PHP’nin teknik gereksinimleri şunlardır: PHP> = 5.3 E-posta sunucusu kurulumuBootstrap, PHP ve AJAX kullanarak çalışan bir HTML iletişim formu kolayca yapılabilir. Bunun için HTML, CSS ve Bootstrap CSS Framework hakkında bazı temel bilgiye ihtiyacınız olacaktır.

Bu yazı, iletişim formunun HTML olarak nasıl kodlanacağını, gerekli alanlara gerçek zamanlı doğrulama eklemek,  daha sonra, verilerin nasıl işlendiğini ve PHP dosyası ile e-postanın nasıl gönderileceği gösterilecektir.

Son olarak, sayfanın yeniden yüklenmesine gerek kalmadan AJAX aracılığıyla formu göndermek için JavaScript frameworkünün (jQuery’yi kullanılacak) nasıl gerekli olduğunu anlatılacaktır.

Bu yazı sonunda, alan doğrulaması ve bazı temel CSS stilleri ile yanıt veren iletişim formu üzerinde çalışılacaktır. Aşağıdaki resimde olduğu gibi olacaktır.

HTML şablonu:

İletişim form sayfamızın ana HTML düzeninden başlayalım. Senin için zor bir şey olmamalı, onun hakkında birkaç kelime:

  • <head> bölümü, Bootstrap CSS sayfası, Lato, Google fontlarından ve yerel bir bicim.css stil sayfasını içeriyor.
  • <body> kapanış etiketinden önce, jQuery, Bootstrap komut dosyaları ve yerel contact.js dosyası ekleniyor ve formun AJAX ile gönderilmesini sağlıyor.
  • Bootstrap, jQuery ve Font için CDN sürümlerini kullanıldı. Komut dosyalarını internet bağlantısı olmadan test etmek isterseniz, dosyaları bilgisayarınıza kopyalamayı unutmayın.
<html>
    <head>
        <title>sukrukaya.NET'ten İletişim Formu</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
        <link href='bicim.css' rel='stylesheet' type='text/css'>
    </head>
    <body>

        <div class="container">

            <div class="row">

                <div class="col-lg-8 col-lg-offset-2">

                    <h1>sukrukaya.NET<a href="http://sukrukaya.com">'ten İletişim Formu</h1>

                    <p class="lead">Bu form, PHP ve AJAX ile birlikte çalışan Bootstrap iletişim formunu hazırlamaya yönelik bir demodur.</p>


                    <form></form> 

                </div>

            </div>

        </div>

        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="validator.js"></script>
        <script src="contact.js"></script>
    </body>
</html>

 

Formu HTML Kodu

Sayfanın ana kısmı hazır olduğunda, sayfanın HTML kodundaki <form> </form> etiketleri kısmına Bootstrap Formunun kodlarını ekleyebilirsiniz.
Form kodları aşağıdaki gibi olabilir:
<form id="contact-form" method="post" action="contact.php" role="form">

    <div class="messages"></div>

    <div class="controls">

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="form_name">Adınız *</label>
                    <input id="form_name" type="text" name="Adi" class="form-control" placeholder="Lütfen adınızı yazın *" required="required" data-error="Adınız gerekli.">
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="form_lastname">Soyadınız *</label>
                    <input id="form_lastname" type="text" name="Soyadi" class="form-control" placeholder="Lütfen soyadınızı yazın *" required="required" data-error="Soyadınız gerekli.">
                    <div class="help-block with-errors"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label for="form_email">E-Posta Adresiniz *</label>
                    <input id="form_email" type="email" name="EPosta" class="form-control" placeholder="Lütfen E-Posta adresinizi yazın *" required="required" data-error="Geçerli bir E-Posta gerekli.">
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group">
                    <label for="form_phone">Telefon Numaranız</label>
                    <input id="form_phone" type="tel" name="Telefon" class="form-control" placeholder="Lütfen telefon numaranızı yazın">
                    <div class="help-block with-errors"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="form_message">Mesajınız *</label>
                    <textarea id="form_message" name="Mesaj" class="form-control" placeholder="Lütfen mesajınızı yazın *" rows="4" required="required" data-error="Lütfen mesajınızı yazın."></textarea>
                    <div class="help-block with-errors"></div>
                </div>
            </div>
            <div class="col-md-12">
                <input type="submit" class="btn btn-success btn-send" value="Mesajı Gönder">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <p class="text-muted"><strong>*</strong> Bu alanlar gereklidir. <a href="http://sukrukaya.com/bootstrap-ve-php-ile-iletisim-formu" target="_blank">sukrukaya.Net</a>.</p>
            </div>
        </div>
    </div>

</form>

Şimdi bu bulmacanın bütün parçalarına bir göz atalım:

  • İletişim formu bilgilerini POST metodu ile contact.php adlı PHP dosyasına  gönderiliyor. Sayfada daha fazla form olabilir (arama vb.), form #contact-form id ile isimlendirilmiştir.
  • AJAX aracılığıyla formu gönderdikten sonra başarı veya hata mesajını görüntülemek için boş div etiketleri de vardır.
  • Standart Bootstrap formları, satır, sütun, form grupları kullanır. Form grupları, formdaki Bootstrap yardımcılarıdır.
  • Alanların geçerliliği için Bootstrap doğrulayıcı kullanılır. Doğrulama kuralları, standart HTML5 öznitelikleri aracılığıyla form girdileri üzerinde belirtilmiştir.
  • data-error özniteliğinde komut dosyasına geçirilen her alan için özel hata iletileri kullanılır.
  • To display the possible errors, there is a <div class=”help-block with-errors”></div> block added to each form-group
    Olası hataları görüntülemek için, her bir form-groups eklenen bir <div class = "help-block with-errors"> </ div> bloğu vardır.
  • Also, note type=”email” and type=”tel” inputs that will enhance the user experience, especially if using the mobile device.
    Ayrıca, özellikle mobil cihazı kullanıyorsanız, kullanıcı deneyimini artıracak,  not type = "email" ve type = "tel" girdileri bulunmaktadır.

Bunlar, temel olarak formun HTML kısmı için yapılmalı ve aşağıda PHP betiği görülmektedir.

PHP betiği

E-posta gönderecek olan PHP betiği contact.php dosyasında bulunmaktadır.
Senaryonun ilk bölümünde, ihtiyaç duyulacak temel değişkenleri yapılandırılıyor.
Bunlar:
  • $from – e-postanın Kimden alanında olacak e-posta adresidir. Önemli Not: Spam olarak işaretlenmekten kaçınmak veya web barındırma sunucunuzdan e-posta gönderebilmek için, alan adınızda e-posta kullanın: eğer, benimsitem.com adında bir alan adında formu kullanacaksanız, bunun için ‘posta@benimsitem.com‘ gibi bir e-posta adresi kullanın. Kullanılacak bu e-posta adresi gerçekten var olmalıdır.
  • $sendTo – form çıktılı e-postayı alacak e-posta adresi. Kişisel e-posta adresiniz olabilir veya değişkenden $from değişkenindeki gibi adresle aynı olabilir. Bu e-posta gerçekte var olmalıdır.
  • $subject – e-postanın konusu.
  • $fields – form denetimi adlarının bir dizisi ve İngilizce benzerleri. Eğer <input name = "isim"> gibi bir girdi alanı varsa, örnekte e-postamızda; Müşteri Adı şöyle gelir: ‘name’ => ‘Müşteri Adı’.
  • $okMessage -ileti başarıyla gönderildiğinde web sayfasında görüntülenen ileti metni.
  • $errorMessage – bir hata durumunda görüntülenen mesajın metni.
Kod bloğunun tüm olası hatalarını yakalayacak olan try/catch yapısı bulunmaktadır.
  1. E-posta mesajı içeriğini $emailText‘te oluşturulmaya başlanır.
  2. $_POST (POST isteği yoluyla gönderilen tüm değerleri içeren dizi) üzerinden yineleme yapılır.
  3. $_POST dizisindeki öğenin anahtarı, $fields dizisinde varsa, bu $emailText içindeki ileti metnine eklenir.
  4. E-Posta PHP içinde bulunan mail() işlevi ile gönderiliyor. E-postaya $headers dizisi kullanılarak bazı önemli başlıklar eklenir (kodlama, başlığa, yanıt verme vb.).
  5. JavaScript fonksiyonu tarafından ele alınması için index.html dosyasına JSON yanıtı olarak geri gönderilecek $responseArray değişkenini oluşturuluyor.
  6. Eğer istek AJAX ile gelirse (Bu, PHP koşulu kullanılarak kontrol edilir. if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')) JSON yanıtı gönderilir, değilse, yalnızca ileti görüntülenir (bu, nadir bir durum olmalıdır – Örneğin, Devre dışı bırakılmış JavaSript olan kullanıcılar için).
<?php

// Ayarlar
$from = 'iletişim formu örneği <posta@domain.com>';
$sendTo = 'İletişim formu örneği <posta@domain.com>';
$subject = 'İletişim formundan yeni ileti';
$fields = array('Adi' => 'Şükrü', 'Soyadi' => 'Kaya', 'Telefonu' => '0555 666 77 88', 'EPosta' => 'posta@sukrukaya.com', 'Mesaj' => 'Merhebe, bu mesaj deneme amaçlıdır.'); // Dizi epostada isim => Metin şeklinde kullanılır
$okMessage = 'Mesajınız alındı. Teşekkürler. Size en kısa zamanda dönülecektir.!';
$errorMessage = 'İletişim formu gönderilirken bazı hatalar ile karşılaşıldı. Lütfen sonra tekrar deneyin.';

// Gönderiliyor

try
{
    $emailText = "İletişim formundan yeni bir mesajınız var\n=======================================\n";

    foreach ($_POST as $key => $value) {

        if (isset($fields[$key])) {
            $emailText .= "$fields[$key]: $value\n";
        }
    }

    $headers = array('Content-Type: text/plain; charset="UTF-8";',
        'From: ' . $from,
        'Reply-To: ' . $from,
        'Return-Path: ' . $from,
    );
    
    mail($sendTo, $subject, $emailText, implode("\n", $headers));

    $responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
    $responseArray = array('type' => 'danger', 'message' => $errorMessage);
}

if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    $encoded = json_encode($responseArray);

    header('Content-Type: application/json');

    echo $encoded;
}
else {
    echo $responseArray['message'];
}

 

PHP’nin teknik gereksinimleri şunlardır:
  • PHP> = 5.3
  • E-posta sunucusu kurulumu

Biraz da JavaScript

Bu yazının JavaScript bölümü, formun geçerliliğini ve AJAX aracılığıyla gönderilmesini yönetir. contact.js dosyasına kaydedilir.
Öncelikle, iletişim formunun doğruluğu kontrol edilir.
Ardından, formun AJAX isteği yoluyla gönderilmesinde bize yardımcı olacak bazı JavaScript eklenir.
Şu şekilde çalışır:
  1. #contact-form kimliği olan form gönderildiğinde, POST isteğini contact.php komut dosyasına gönderilir.
  2. Talep başarılı olursa, PHP betiği tarafından döndürülen JSON nesnesi ile çalışıyor. Nesnenin yalnızca iki özelliği vardır: type ve mesaj
  3. Kullanıcının görebileceği mesajı oluşturmak için typr ve mesaj kullanılıyor – hata durumunda alert-danger uyarısı gösteriliyor, başarı durumunda alert-success gösteriliyor.
  4. Mesaj gösterilir, Aynı mesajın gönderilmesini önlemek için, form girişleri sıfırlanır ve return false hata mesajı gönderilir;
$(function () {

    $('#contact-form').validator();

    $('#contact-form').on('submit', function (e) {
        if (!e.isDefaultPrevented()) {
            var url = "contact.php";

            $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function (data)
                {
                    var messageAlert = 'alert-' + data.type;
                    var messageText = data.message;

                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
                    if (messageAlert && messageText) {
                        $('#contact-form').find('.messages').html(alertBox);
                        $('#contact-form')[0].reset();
                    }
                }
            });
            return false;
        }
    })
});

 

Sonuç

Hepsi bu kadar. Çalışmakta ve web sitenizde hayata geçirilmeye hazır güzel bir iletişim formunuz oldu.

Güvenlik için captcha, farklı görünümler için farklı bootstrap temaları kullanabilirsiniz.

Kaynak : https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form

KategoriGenel

2 yorum

  • cenk dedi ki:
    24 Ağustos 2017, 15:00

    merhaba.siz bu uygulamayı denediniz mi? orjinal site de ki paketi olduğu gibi indirdim ve secret key olaylarını değiştirdim ve olduğu gibi kendi internet siteme yüledim.ancak form göndermeye çalıştığımda “There was an error while submitting the form. Please try again later” hatasını alıyorum.gönderme işlemi tamamlanamıyor.php ve javascript de çok iyi değilim.ama mantıken anladığım kadarıyla chapcha keylerini değiştirince çalışması gerekiyor.ancak ben başarıya ulaşamadım.yardımcı olabilirseniz çok sevinirim.

    Cevapla
  • Abdullah dedi ki:
    29 Mayıs 2021, 00:47

    peki hocam host kullanıcı bilgileri hangi kısımda olacak yada bunları nerden alıcak ta mail gönderimi yapacak

    Cevapla

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.