Cara Membuat Halaman Kontak Kami WordPress

Diterbitkan: 2021-04-21

Halaman hubungi kami WordPress adalah bagian penting dari situs bisnis, blog pribadi, atau halaman portofolio online. Formulir kontak memungkinkan audiens Anda menanyakan detail lebih lanjut tentang produk atau layanan Anda. Ini memungkinkan Anda meningkatkan kredibilitas situs Anda dan mengumpulkan lebih banyak detail tentang basis pelanggan Anda. Terlepas dari banyak manfaat formulir kontak, WordPress tidak menyertakan elemen ini secara default.

Tutorial ini memberikan petunjuk langkah demi langkah untuk membuat halaman kontak kami WordPress dengan dan tanpa menggunakan halaman kontak kami plugin WordPress.

Bagi Siapa Panduan Ini Akan Berguna?

Panduan berikut mencakup langkah-langkah mudah untuk membuat halaman kontak WordPress sendiri meskipun Anda belum ahli WordPress, yang akan sangat berguna bagi webmaster pemula. Dengan menggunakan panduan ini, Anda dapat melatih keterampilan pengembangan web Anda. Ini juga akan berguna bagi blogger dan bisnis mikro yang ingin mempertahankan situs WordPress mereka sendiri dan membuat sumber daya online mereka dapat digunakan dan seinformatif mungkin. Tidak peduli seberapa terampil atau berpengalaman Anda, teknik yang dijelaskan dalam artikel ini akan berguna bagi Anda.

Mengapa Anda Harus Menambahkan Halaman Hubungi Kami WordPress ke Situs Anda?

Halaman hubungi kami WordPress bermanfaat bagi pemilik bisnis dan pelanggan mereka karena berbagai alasan:

  • Blog atau situs bisnis Anda akan terlihat lebih profesional. Dengan begitu, audiens Anda akan tahu bahwa mereka dapat menghubungi Anda kapan pun mereka memiliki pertanyaan atau masalah yang terkait dengan ceruk mikro Anda.
  • Anda dapat membangun komunikasi yang lebih baik dengan audiens Anda sambil membiarkan pengguna mengakses Anda kapan pun mereka mau. Mereka hanya perlu mengisi beberapa kolom yang disediakan.
  • Halaman hubungi kami WordPress adalah sumber informasi yang berharga untuk merek. Jangan ragu untuk memutuskan informasi apa yang perlu dibagikan oleh pengguna. Mungkin alamat email pelanggan, nama pengguna, negara, dll.
  • Menggunakan halaman hubungi kami, Anda mencegah serangan spam.

Mempertimbangkan semua keuntungan di atas menggunakan plugin WordPress halaman hubungi kami, mari kita bahas:

  • Plugin apa yang harus dipilih untuk membuat halaman hubungi kami WordPress;
  • Cara membuat halaman hubungi kami untuk WordPress menggunakan template.
Cara Membuat Halaman Hubungi Kami di WordPress dengan Plugin

Ada banyak plugin WordPress halaman kontak yang tersedia, jadi mudah tersesat dalam kelimpahannya yang kaya. Kami telah memilih Formulir Kontak - Plugin Formulir Kontak WordPress untuk memfasilitasi pengambilan keputusan yang memudahkan untuk menambahkan formulir kontak ke situs Anda.

Ini adalah plugin WordPress premium dari Codecanyon dengan harga $24. Tidak seperti plugin WordPress gratis yang mudah ditemukan melalui pencarian sederhana melalui dasbor WP, Anda perlu mengunduh arsip plugin ke PC Anda dan mengunggahnya ke situs Anda sesudahnya. Setelah selesai, Anda dapat memilih dari beberapa cara untuk menambahkan formulir kontak ke situs Anda:

  • Gunakan kode pendek WordPress yang dapat Anda tambahkan ke halaman mana pun di situs WordPress Anda.
  • Plugin menyertakan elemen Visual Composer untuk membuat halaman hubungi kami dalam mode drag-and-drop.
  • Anda juga dapat menggunakan widget untuk menambahkan formulir kontak ke sidebar atau footer.

Anda mungkin menemukan banyak plugin formulir kontak lainnya di direktori plugin WordPress. Banyak dari mereka yang gratis dan mudah digunakan. Jika Anda memutuskan untuk membuat halaman hubungi kami menggunakan plugin khusus, Anda tidak akan menghadapi masalah apa pun.

Cara Membuat Halaman Kontak Kami di WordPress tanpa Plugin

Mari kita lihat cara membuat halaman Hubungi Kami yang berfungsi penuh di WordPress. Kami akan menambahkan formulir kontak tanpa plugin apa pun. Sebagai gantinya, kami akan membuat templat halaman hubungi kami khusus untuk mencapai tujuan kami.

Apa itu Template Halaman WordPress?

Di WordPress, ini adalah file php yang bertanggung jawab atas tata letak dan fungsionalitas halaman web (kita berbicara tentang halaman dan bukan posting). Semua tema WordPress dilengkapi dengan file Page.php yang merupakan template halaman default. Template Halaman adalah fitur yang sangat kuat yang memungkinkan pengembang menyesuaikan tema sesuai dengan kebutuhan mereka. Dalam tutorial ini, kita akan memeriksa cara membuat template custom contact us.

Langkah 1: Buat Template Hubungi Kami

Arahkan ke folder Tema, Buat file Kosong dan beri nama contact.php (Anda dapat menggunakan nama yang berbeda). File php akan menampung Form HTML Markup dan kode PHP untuk memproses input pengguna. Tulis kode berikut di bagian atas file php.

 <?php /* Nama Template: Hubungi Kami */ ?>

WordPress menggunakan blok komentar ini untuk mengidentifikasi Template Halaman Kustom kami secara unik. Selanjutnya, salin dan tempel kode berikut ke file file contact.php:

 <?php
/*
Nama Templat: Hubungi Kami
 */
get_header(); ?>
<div id="utama">
<div id="konten" peran="main">
</div><!-- #content -->
</div><!-- #primer -->
<?php get_footer(); ?>

Dengan kode ini, kami menambahkan struktur ke Templat Halaman Kontak. Sekarang, template kita memiliki bagian footer dan header. Pada langkah selanjutnya, mari kita lihat bagaimana menambahkan bagian konten ke halaman kita.

Langkah 2: Menambahkan Formulir HTML

Formulir kontak adalah elemen sederhana dengan bidang standar. Dalam panduan ini, kita tidak akan fokus pada bagian styling. Cukup tambahkan kode berikut ke Content Div yaitu (div)

 <form method="post" id="contactus_form">
Nama Anda:<input type="text" name="yourname" id="yourname" rows="1" value="" />
<br /><br />
Email Anda:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Subjek:<input type="text" name="subject" id="subject" rows="1" value=""></p>
<br /><br />
Tinggalkan Pesan:<textarea name="message" id="message" ></textarea>
<br /><br />
<input type="kirim" nama="kirim" id="kirim" nilai="Kirim"/>
</form>

Kode ini cukup jelas. Kami telah menggunakan Empat bidang dalam formulir - Nama, Email, Subjek dan Teks. Pada langkah selanjutnya, kita akan menambahkan beberapa kode php untuk memproses input form.

Langkah 3: Tambahkan Kode PHP untuk memproses input Formulir.

Kode PHP akan menangani dua bagian:

  • Validasi.
  • Mengirim surat yang sebenarnya.
Validasi

Kami menggunakan dua jenis validasi:

  • Bidang Wajib: - ini akan memeriksa apakah bidang diisi atau tidak.
  • Field Format: ini akan memeriksa apakah nilai yang dimasukkan sudah sesuai dengan format yang diinginkan atau tidak.

    • Kami akan menerapkan kedua kondisi di semua 3 bidang input kecuali untuk "Tinggalkan kami Pesan" .

    Logika Validasi

    Dalam logika validasi kami, kami telah menggunakan variabel flag. Nilainya akan berupa 0 atau 1. Jika validasi kita berhasil, flag akan disetel ke 1. Jika terjadi kesalahan, nilai flag disetel ke 0. Logika standar yang bagus. Berikut adalah kode untuk mengimplementasikan logika ini.

    Validasi diterapkan ke Bidang Nama
     if($_POST['namaanda']=='')
{$bendera=0;
echo "Silakan Masukkan Nama Anda<br>";
}
else if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['namaanda']))
{$flag=0;echo "Silakan Masukkan Nama yang Valid<br>";}
    Validasi diterapkan ke Bidang Email
     if($_POST['email']=='')
{
$flag=0;echo "Silakan Masukkan Email<br>";
}
else if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-] +)*(.[az]{2,3})$", $_POST['email']))
{
$flag=0;echo "Silahkan Masukkan E-Mail yang Sah<br>";
}
    Validasi diterapkan ke Bidang Subjek
     if($_POST['subjek']=='')
{
$flag=0;echo "Silakan Masukkan Subjek<br>";
}
    Validasi diterapkan ke Bidang Pesan

    Tidak perlu menerapkan validasi bidang format untuk bidang kotak pesan seperti yang telah kami sebutkan.

     if($_POST['pesan']=='')
{
$flag=0;echo "Silakan Masukkan Pesan";
}

    Semua potongan kode cukup jelas. Cukup pastikan bahwa kolom input tidak kosong dan menampilkan format yang benar (tidak ada karakter khusus yang digunakan).

    Memproses Masukan Formulir

    Sekarang, input kami divalidasi dengan benar. Kami perlu memberi tahu Administrator. Kode berikut akan memproses data formulir dan akan mengirimkan email rincian seperti Nama, Subjek Email dan Pesan ke Administrator.

    Kami akan menggunakan fungsi wp_mail untuk mengirim email. Untuk mengetahui lebih lanjut tentang wp_mail, klik di sini.

     <?php
jika($bendera==1)
{
wp_mail(get_option("admin_email"),trim($_POST[namaanda])." mengirimi Anda pesan dari ".get_option("namablog"),stripslashes(trim($_POST[pesan])),,"Dari: ". trim($_POST[namaanda])." <".trim($_POST[email]).">rnReply-To:".trim($_POST[email]));
echo "Surat Berhasil Terkirim";
}
?>
    Kode akhir Template Hubungi Kami

    Versi terakhir dari kode yang terdapat dalam file php template contact us terlihat seperti ini:

     <?php
/* Nama Template: Hubungi Kami */
get_header(); ?>
<div id="utama">
<div id="konten" peran="main">
<font color="#FF0000">
<?php
if(isset($_POST['kirim']))
{
$bendera=1;
if($_POST['namaanda']=='')
{
$bendera=0;
echo "Silakan Masukkan Nama Anda<br>";
}
else if(!preg_match('/[a-zA-Z_x7f-xff][a-zA-Z0-9_x7f-xff]*/',$_POST['namaanda']))
{
$bendera=0;
echo "Silahkan Masukkan Nama Yang Valid<br>";
}
if($_POST['email']=='')
{
$bendera=0;
echo "Silakan Masukkan Email<br>";
}
else if(!eregi("^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-] +)*(.[az]{2,3})$", $_POST['email']))
{
$bendera=0;
echo "Silahkan Masukkan E-Mail yang Valid<br>";
}
if($_POST['subjek']=='')
{
$bendera=0;
echo "Silakan Masukkan Subjek<br>";
}
if($_POST['pesan']=='')
{
$bendera=0;
echo "Silakan Masukkan Pesan";
}
jika ( kosong($_POST) )
{
print 'Maaf, nonce Anda tidak diverifikasi.';
KELUAR;
}
kalau tidak
{
jika($bendera==1)
{
wp_mail(get_option("admin_email"),trim($_POST[namaanda])." mengirimi Anda pesan dari ".get_option("namablog"),stripslashes(trim($_POST[pesan])),,"Dari: ". trim($_POST[namaanda])." <".trim($_POST[email]).">rnReply-To:".trim($_POST[email]));
echo "Surat Berhasil Terkirim";
}
}
}
?>
</font>
<form method="post" id="contactus_form">
Nama Anda:<input type="text" name="yourname" id="yourname" rows="1" value="" />
<br /><br />
Email Anda:<input type="text" name="email" id="email" rows="1" value="" />
<br /><br />
Subjek:<input type="text" name="subject" id="subject" rows="1" value=""></p>
<br /><br />
Tinggalkan Pesan:<textarea name="message" id="message" ></textarea>
<br /><br />
<input type="kirim" nama="kirim" id="kirim" nilai="Kirim"/>
</form>
</div><!-- #content --></div><!-- #primary -->
<?php get_footer(); ?>
    Tangkapan Layar Terakhir dari halaman Hubungi Kami.

    Ini adalah bagaimana formulir kontak Anda akan terlihat

    Cara Membuat WordPress Hubungi Kami Halaman 1

    Langkah 4: Menggunakan Template Hubungi Kami

    Buka dasbor WordPress Anda. Buat Halaman baru dan jangan lupa untuk memilih template "Hubungi Kami" di dalam kotak atribut halaman. Lihat cuplikannya di bawah ini.

    Cara Membuat WordPress Hubungi Kami Halaman 2

    Sekarang, publikasikan halaman dan tambahkan ke menu. Hasilnya, Anda mendapatkan halaman hubungi kami yang berkilau dan berfungsi penuh yang Anda buat tanpa menggunakan plugin. Ada banyak hal lain yang dapat Anda tambahkan ke halaman hubungi kami WordPress Anda. Satu hal yang terlintas dalam pikiran adalah menambahkan captcha atau validasi lain untuk mencegah spam.