WordPress Web Sitesinde veya Blogunda Özel Form Nasıl Oluşturulur
Yayınlanan: 2021-12-27
İlk blogunuzu yeni kurduysanız, o zaman şimdiye kadar bunun varsayılan bir iletişim formu ile geldiğini biliyor olurdunuz - premium temaların çoğu bir tane ile birlikte gelir. Şu ya da bu nedenle sizinle iletişim kurmak isteyen hedef kitleniz söz konusu olduğunda, iletişim formlarının önemli olduğu noktadır.
Dahası, iletişim formlarıyla kullanıcı katılımınız artmalı, bu yüzden blogunuzda bir tane kullanmanız çok önemli. Ancak yine de, kullanıcılarınızın sizinle iletişim kurmasını sağlamak için İletişim formu 7, hızlı güvenli iletişim formu gibi form eklentilerini de kullanabilirsiniz.
Dahası, bu iletişim formu, hedef kitlenizle doğrudan bağlantı kurmanıza ve pazarlamanızı kolaylaştırmanıza olanak sağlamalıdır.
Video öğretici
Sorun şu ki, varsayılan iletişim formlarının ve hatta eklentilerin çoğu aynı klişe formatta geliyor, bu yüzden WordPress'te kendi iletişim formunuzu oluşturma çizgisinde daha özel bir şey seçmek isteyebilirsiniz.
Eğer php konusunda oldukça yetenekliyseniz, bunu kolaylıkla yapabilmeniz gerekir, bu nedenle kullanıcılarınızın kullanması için kendi özelleştirilmiş formunuzu oluşturabilmeniz için makalenin geri kalanını okumanız çok önemlidir. seninle bağlantı kurmak için.
1. Form tasarımı:
Bunun için ayrı bir sayfa şablonu oluşturabilir veya WordPress sayfanıza bir HTML kodu yazabilirsiniz ve sonrakiler çok daha basit olduğundan, aynısını seçmek daha mantıklıdır.
Aşağıda listelenen adımları izleyerek WordPress'te özel bir form oluşturabilirsiniz. Ve her zaman olduğu gibi, başlamadan önce bilgilerinizi yedeklemeyi unutmayın.
- WordPress kontrol panelinizin altında verilen Sayfalar -> Yeni Ekle seçeneğine gidin.
- 'Müşteri bilgileri' veya 'müşteri ayrıntıları' gibi istediğiniz sayfanın başlığını verin.
- Şimdi HTML kodu yazmak için 'HTML' sekmesine gidin.
- WordPress'te istediğiniz özel bir form oluşturun.
- Bir "POST" yöntemi ekleyin, ona "customer_details" adını verin
- Daha sonra bazı JavaScript doğrulamaları eklemek ve eylemi vermek için onsubmit özelliğine "form_validation" işlevini ekleyin.
- Eylem, form gönderildiğinde yürütülecek PHP dosyasıdır.
- Bu noktada forma isim, e-posta, cinsiyet, yaş gibi bazı alanları eklemek ve formu kapatmak isteyebilirsiniz.
Son kod şöyle görünmelidir
Adınız: <br /> E-postanız: <br /> Cinsiyet: Erkek Kadın<br /> Yaşınız: <br />
2. Doğrulama:
Artık formu tasarladığınıza göre, aynısını doğrulamanın zamanı geldi. Kullanıcı verilerine asla 'olduğu gibi' güvenmeyin ve her zaman, aynısını veritabanınıza girmeden önce her zaman doğrulayın.
Bazı hızlı doğrulama için aşağıda listelenen kodu izlemeniz yeterlidir ve bu hile yapmalıdır. Bu doğrulama kodunu yazın ve sonunda kapatın.
function form_validation() {
/* Boş gönderim için Müşteri Adını kontrol edin*/
var müşteri_adı = belge.forms["müşteri_detayları"]["müşteri_adı"].değer;
if (müşteri_adı == “” || müşteri_adı == boş) {
alert(“İsim alanı doldurulmalıdır.”);
yanlış döndür;
}/* Geçersiz biçim için Müşteri E-postasını kontrol edin */
var customer_email = document.forms["customer_details"]["customer_email"].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position<1 || dot_position=customer_email.length) {
alert(“Verilen e-posta adresi geçerli değil.”);
yanlış döndür;
}
}
Bu, müşteri adını ve e-posta adresini kontrol edecek ve doğrulayacaktır. sonra bu kodu ekleyin. Böylece, WordPress'teki tam kod şöyle görünecek-
Adınız: <br />
E-postanız: <br />
Cinsiyet: Erkek Kadın<br />
Yaşınız: <br />
function form_validation() {
/* Boş gönderim için Müşteri Adını kontrol edin*/
var müşteri_adı = belge.forms["müşteri_detayları"]["müşteri_adı"].değer;
if (müşteri_adı == “” || müşteri_adı == boş) {
alert(“İsim alanı doldurulmalıdır.”);
yanlış döndür;
}
/* Geçersiz biçim için Müşteri E-postasını kontrol edin */
var customer_email = document.forms["customer_details"]["customer_email"].value;
var at_position = customer_email.indexOf(“@”);
var dot_position = customer_email.lastIndexOf(“.”);
if (at_position<1 || dot_position=customer_email.length) {
alert(“Verilen e-posta adresi geçerli değil.”);
yanlış döndür;
}
}
Şimdi, yapmanız gereken tek şey sayfayı yayınlamak ve bu, işi etkili bir şekilde yapmalıdır.
3. Sunucu tarafı komut dosyaları:
“müşteri detayları.php” den bahsettiğimiz kısmı hatırlıyor musunuz? Eh, o kısma da katılmamızın zamanı geldi.
Not Defteri'ni veya favori metin düzenleyicinizi açın ve aşağıda açıklanan kodu yazın ve dosyayı müşteri-detaylar.php olarak masaüstünüze kaydedin.
İlk olarak, $customer_name, $customer_email, $customer_sex, $customer_age adlı bazı değişkenleri tanımlayın ve değerleri HTML formu tarafından gönderilen ilgili alanlara atayın.
Örneğin $müşteri_adı = $_POST["müşteri_adı"], HTML formundaki değeri POST yöntemiyle yakalayacak ve bunu $müşteri_adı değişkenine atayacaktır.
Şimdi, aynısını diğer değerlerle de yapmanız gerekiyor. Şimdi mysqli_connect kullanarak PHP dosyasını veritabanına bağlamanız gerekiyor. Veritabanı yapılandırmasını hatırlamıyorsanız, bu ayarları WordPress kurulumunuzdan bulabilirsiniz.
FileZilla gibi favori FTP istemcinizi kullanarak wp-config.php dosyasını WordPress kurulumunuzdan masaüstünüze indirin. Not Defteri gibi favori metin düzenleyicinizi kullanarak wp-config.php dosyasını açın ve gerekli veritabanı ayarlarını bulacaksınız.
Veritabanı bağlantısından sonra, formdan toplanan verileri mysqli_query kullanarak WordPress veritabanına ekleyin.
Bu PHP kodunda isteğe bağlı bir adım vardır.
Form gönderildikten sonra kullanıcıya bir mesaj göstermek veya kullanıcıyı başka bir sayfaya yönlendirmek istiyorsanız, koda başlık (“Location: “) ekleyebilirsiniz. Bunun için daha sonra bir başarı sayfası oluşturmanız gerekecek.
Böylece, client-details.php'nin tamamı aşağıdaki gibi görünecektir.
// Veri al
$müşteri_adı = $_POST["müşteri_adı"];
$customer_email = $_POST["customer_email"];
$customer_sex = $_POST["customer_sex"];
$customer_age = $_POST["customer_age"];// Veritabanı bağlantısı
$conn = mysqli_connect(“Veritabanı Ana Bilgisayarı”,”Veritabanı Kullanıcı Adı”,”Veritabanı Şifresi”,”Veritabanı Adı”);
if(!$bağlantı) {
die('Veritabanı bağlantısında sorun: ' .mysql_error());
}
// Veritabanına veri ekleme
$query = “'Veritabanı Adı'na' GİRİN.'Tablo Adı' ( 'müşteri_adı', 'müşteri_email', 'müşteri_cinsi', 'müşteri_yaşı' ) DEĞERLER ( $müşteri_adı, $müşteri_epostası, $müşteri_cinsi, $müşteri_yaşı)”;
mysqli_query($bağlantı, $sorgu);
// Başarı sayfasına yönlendirme
başlık(“Yer: “);
Favori FTP istemcinizi kullanarak bu client-details.php dosyasını tema klasörüne yükleyin.
4. Başarı:
Başarı sayfası, bir kullanıcının formu gönderdikten sonra ayrıntılarıyla görüntüleyebileceği sayfadır; Bu sayfayı, "bilgileriniz başarıyla gönderildi" veya benzeri bir özel mesaj gösterecek şekilde ayarlayabilirsiniz.
Özel mesajla tamamlanmış kendi başarı sayfanızı oluşturmak için aşağıda yayınlanan kodu kullanabileceğiniz nokta.
Bir WordPress sayfası oluşturun, ona “Başarı Sayfası” gibi bir başlık verin, sayfa bilgisini 'başarı sayfası' veya başlıkta ne verdiyseniz ("Konum") ile eşleştirdiğinizden emin olun. Şimdi "işbirliğiniz için teşekkür ederim" gibi bir mesaj yazın veya bu satırlara uygun bir şey yazın ve hazır olmalısınız.
İletişim formunun olması gerektiği gibi çalışıp çalışmadığını kontrol etmek ve görmek için sitenizi her zaman yeniden yükleyebilirsiniz ve neredeyse tüm durumlarda gayet iyi çalışması gerekir. Ancak, birkaç sorunla karşılaşırsanız, her zaman çevrimiçi olarak kontrol edebilir veya özel formunuzu oluşturması için bir uzmana başvurabilirsiniz.
Bu dönüşüm oranlarını artırmaya yardımcı olabilmesi için, iletişim formunuzun bu konuda çok agresif veya müdahaleci görünmemesi önemlidir.
Dahası, bu özel formları, pazarlama kampanyalarınızı kolaylaştırmak için kullanabileceğiniz müşterileriniz hakkında veri ve bilgi toplamak için de kullanabilirsiniz.
Bu, formların, özellikle iletişim formlarının tüm bloglar için gerekli olmasının ana nedenlerinden biridir ve daha da önemlisi, burada listelenen kodlamayı yalnızca WordPress'te özel bir form oluşturmak için değil, gerçekte herhangi bir iletişim formu oluşturmak için kullanabilirsiniz. farklı parametreler.
Daha önce önerildiği gibi, çekirdek dosyalarınızla uğraşmadan önce tam bir yedekleme yapmak her zaman iyi bir fikirdir.
Formu hazırlayıp çalıştırdıktan sonra, söz konusu formun veri tabanınıza girmeden önce programlandığı şekliyle verileri doğrulayıp doğrulamadığını kontrol edebilmeniz gerekir.
Genel olarak, iletişim formları, müşterilerin size ulaşmasına yardımcı olduğundan ve uzun vadede daha iyi dönüşüm oranlarına yol açabileceğinden, bloglar ve web siteleri için oldukça önemlidir. Bu nedenle, yukarıda listelenen adımları denediğinizden ve özel iletişim formunuzun iyi çalıştığından emin olun.