Merhabalar!
Bu yazımda, ister kişisel ister kurumsal bir web sitesine sahip olun, sitenize iletişim formu ekleyerek ziyaretçilerle doğrudan iletişime geçmenin ne kadar kolay olduğunu anlatacağım. Böylece hem etkileşimi artırabilir hem de daha dinamik ve profesyonel bir site deneyimi sunabilirsiniz.
Üstelik bu rehberde, ekstra bir SMTP yapılandırmasına ihtiyaç duymadan, sadece PHP ve temel HTML bilgisiyle form verilerinizi e-posta adresinize nasıl gönderebileceğinizi adım adım göstereceğim.
Şimdi gelin, birlikte nasıl yapılacağını detaylı şekilde öğrenelim.
Öncelikle web sitenize örnek olması adına aşağıdaki gibi iletişim formu eklemeniz gerekiyor.
<!-- Form Alanını Saran Sütun Yapısı --> <div class="col-lg-6 col-md-12 col-sm-12 form-column"> <div class="contact-form-area"> <!-- Başlık --> <h2>Mesaj Gönderin</h2> <!-- İletişim Formu Başlangıcı --> <form method="post" action="php-email-form/contact.php" id="contact-form" class="php-email-form"> <!-- Ad Soyad ve E-Posta için Satır --> <div class="row"> <!-- Ad Soyad Alanı --> <div class="col-md-6 form-group"> <input type="text" name="name" class="form-control" placeholder="Adınız Soyadınız *" required> <!-- Kullanıcının adını girmesi gereken alan. Zorunlu alan. --> </div> <!-- E-Posta Alanı --> <div class="col-md-6 form-group"> <input type="email" name="email" class="form-control" placeholder="E-Posta Adresiniz *" required> <!-- Kullanıcının geçerli bir e-posta adresi girmesi gereken alan. Zorunlu. --> </div> </div> <!-- Telefon Numarası --> <div class="form-group mt-3"> <input type="text" name="phone" class="form-control" placeholder="Telefon Numaranız"> <!-- Telefon numarası isteğe bağlı. Doğrulama zorunlu değil. --> </div> <!-- Konu Başlığı --> <div class="form-group mt-3"> <input type="text" name="subject" class="form-control" placeholder="Konu *" required> <!-- Mesajın konusu. Zorunlu alan. --> </div> <!-- Mesaj İçeriği --> <div class="form-group mt-3"> <textarea name="message" rows="5" class="form-control" placeholder="Mesajınız *" required></textarea> <!-- Gönderilecek mesaj. En az 5 satır. Zorunlu alan. --> </div> <!-- Sistem Yanıtları (Yükleniyor, Hata, Başarı) --> <div class="my-3"> <div class="loading" style="display: none;">Yükleniyor...</div> <!-- Form gönderildiğinde "Yükleniyor" animasyonu burada gösterilir. --> <div class="error-message" style="display: none;"></div> <!-- Gönderim başarısız olursa hata mesajı burada gösterilir. --> <div class="sent-message" style="display: none;">Mesajınız gönderildi. Teşekkürler!</div> <!-- Gönderim başarılı olursa bu mesaj gösterilir. --> </div> <!-- Gönder Butonu --> <div class="form-group text-center"> <button type="submit" class="theme-btn">Mesaj Gönder</button> <!-- Formu sunucuya gönderen buton. --> </div> </form> <!-- Form Sonu --> </div> </div>
Bu kodu footer alanına eklemeniz gerekiyor.
<script src="/php-email-form/validate.js"></script>
Daha sonra contact.php dosyamızı hazırlıyoruz aşağıdaki gibi.
<?php
// Alıcı e-posta adresini tanımlayın
$receiving_email_address = 'info@ibrahimtonca.com';
// PHP e-posta formu kitaplığının yolunu belirleyin
$php_email_form = __DIR__ . '/php-email-form.php';
// Kitaplık dosyasını kontrol edin ve dahil edin
if (file_exists($php_email_form)) {
include($php_email_form);
} else {
die('PHP E-posta Formu Kitaplığı yüklenemedi!');
}
// PHP_Email_Form sınıfından bir nesne oluşturun
$contact = new PHP_Email_Form;
$contact->ajax = true; // Eğer form AJAX ile gönderiliyorsa true kalmalı
// Formdan gelen verileri güvenli biçimde al ve işle
$contact->to = $receiving_email_address;
$contact->from_name = htmlspecialchars($_POST['name'] ?? '');
$contact->from_email = filter_var($_POST['email'] ?? '', FILTER_VALIDATE_EMAIL);
$contact->subject = htmlspecialchars($_POST['subject'] ?? 'İletişim Formu');
if (!$contact->from_email) {
// Geçersiz bir e-posta adresi girilmişse işlemi durdur
die('Geçerli bir e-posta adresi girilmedi.');
}
// (İsteğe bağlı) SMTP üzerinden e-posta göndermek için bu kısmı açabilirsiniz:
/*
$contact->smtp = array(
'host' => 'smtp.firmaadi.com', // SMTP sunucusu
'username' => 'info@firmaadi.com', // SMTP kullanıcı adı
'password' => 'E-POSTA-ŞİFRENİZ', // SMTP şifreniz
'port' => '587' // SMTP portu (genellikle 587 veya 465)
);
*/
// Kullanıcıdan gelen form bilgilerini mesaj içeriğine ekleyin
$contact->add_message($_POST['name'] ?? '', 'Ad Soyad');
$contact->add_message($_POST['email'] ?? '', 'E-posta Adresi');
$contact->add_message($_POST['phone'] ?? '', 'Telefon Numarası');
$contact->add_message($_POST['subject'] ?? '', 'Konu');
$contact->add_message($_POST['message'] ?? '', 'Mesaj', 10); // Mesaj alanı daha uzun olduğu için öncelik verildi
// Formu gönder ve sonucu yazdır (başarılıysa "OK", hata varsa detay)
echo $contact->send();
?>
Bu alanı, ziyaretçilerin mesajlarını almak istediğiniz kendi e-posta adresinize göre güncellemeniz gerekir. Örneğin şirket e-posta adresiniz, destek hattınız ya da kişisel e-posta adresiniz olabilir.
$receiving_email_address = 'info@ibrahimtonca.com';
Daha sonra php-email-form.php dosyamızı oluşturuyoruz. Kodları çok uzun olduğu için indirmek bağlantısını paylaşıyorum.
Daha sonra, form doğrulaması için validate.js dosyasını oluşturacağız. Bu dosyada herhangi bir değişiklik yapmanıza gerek yoktur; varsayılan haliyle sorunsuz çalışacaktır.
(function () {
"use strict";
let forms = document.querySelectorAll('.php-email-form');
forms.forEach( function(e) {
e.addEventListener('submit', function(event) {
event.preventDefault();
let thisForm = this;
let action = thisForm.getAttribute('action');
let recaptcha = thisForm.getAttribute('data-recaptcha-site-key');
if( ! action ) {
displayError(thisForm, 'The form action property is not set!');
return;
}
thisForm.querySelector('.loading').classList.add('d-block');
thisForm.querySelector('.error-message').classList.remove('d-block');
thisForm.querySelector('.sent-message').classList.remove('d-block');
let formData = new FormData( thisForm );
if ( recaptcha ) {
if(typeof grecaptcha !== "undefined" ) {
grecaptcha.ready(function() {
try {
grecaptcha.execute(recaptcha, {action: 'php_email_form_submit'})
.then(token =&gt; {
formData.set('recaptcha-response', token);
php_email_form_submit(thisForm, action, formData);
})
} catch(error) {
displayError(thisForm, error);
}
});
} else {
displayError(thisForm, 'The reCaptcha javascript API url is not loaded!')
}
} else {
php_email_form_submit(thisForm, action, formData);
}
});
});
function php_email_form_submit(thisForm, action, formData) {
fetch(action, {
method: 'POST',
body: formData,
headers: {'X-Requested-With': 'XMLHttpRequest'}
})
.then(response =&gt; {
if( response.ok ) {
return response.text();
} else {
throw new Error(`${response.status} ${response.statusText} ${response.url}`);
}
})
.then(data =&gt; {
thisForm.querySelector('.loading').classList.remove('d-block');
if (data.trim() == 'OK') {
thisForm.querySelector('.sent-message').classList.add('d-block');
thisForm.reset();
} else {
throw new Error(data ? data : 'Form submission failed and no error message returned from: ' + action);
}
})
.catch((error) =&gt; {
displayError(thisForm, error);
});
}
function displayError(thisForm, error) {
thisForm.querySelector('.loading').classList.remove('d-block');
thisForm.querySelector('.error-message').innerHTML = error;
thisForm.querySelector('.error-message').classList.add('d-block');
}
})();
Dosya yapısı aşağıdaki gibi olmalıdır.
İletişim formunun sorunsuz çalışabilmesi için dosyaları doğru dizinlere yerleştirmeniz çok önemlidir. Aksi halde form çalışmayabilir ya da doğrulama işlemi gerçekleşmeyebilir.
Lütfen dosya ve klasör isimlerini aynen aşağıdaki gibi kullanmaya özen gösterin:
iletisim.php -> İletişim Formu Sayfanız olacaktır.contact.php: Form verilerinin işlendiği ana PHP dosyasıdır.php-email-form.php: Mail gönderim işlevini gerçekleştiren yardımcı PHP dosyasıdır.validate.js: Form doğrulama işlemlerini yapan JavaScript dosyasıdır.
Tüm bu dosyalar belirtilen dizinlerde yer alırsa iletişim formu problemsiz şekilde çalışacaktır.
Github üzerinden proje dosyalarını indirmek için tıklayın.
Bu rehberin sizler için faydalı olmasını umuyorum.
İletişim formunu sitenize entegre ederken herhangi bir adımda takılırsanız, lütfen aşağıya yorum bırakmaktan çekinmeyin. Elimden geldiğince yardımcı olmaktan memnuniyet duyarım.
