Cara Membuat Formulir Kontak di WordPress

Formulir kontak adalah komponen penting dari situs web apa pun. Ini bertindak sebagai jembatan antara penyedia dan pelanggan. Membuat formulir kontak untuk platform WordPress adalah pekerjaan yang mudah. Anda hanya perlu melalui beberapa langkah yang harus diikuti untuk meluncurkan formulir kontak yang berhasil untuk situs WordPress.

Kami telah melihat terlalu banyak jenis contoh formulir kontak di inti PHP. Tidak peduli platform, framework atau CMS, tetapi konsepnya sama untuk menulis alur proses.

Jadi, jika Anda terbiasa dengan formulir kontak tentang cara kerjanya, maka mudah untuk memahami versi WordPress-nya.

Saya telah membuat templat kustom WordPress untuk UI formulir kontak ini. Kemudian, saya memetakan template untuk halaman kontak yang dibuat menggunakan panel admin.

Jika Anda mencari formulir kontak lengkap yang aman dan bebas spam, dapatkan Iris.

Apa yang ada di dalam?

1. Buat lingkungan WordPress
2. Buat halaman kontak baru menggunakan admin WordPress
3. Buat tema anak untuk tema aktif
4. Cara membuat template kontak
5. Kirim permintaan AJAX menggunakan kait wp_ajax
6. Keluaran formulir kontak WordPress

Buat lingkungan WordPress

Siapkan lingkungan WordPress untuk membuat formulir kontak di dalamnya. Prasyarat untuk menyiapkan WordPress adalah,

• PHP 7.4 ke atas.
• MySQL 5.6 dan yang lebih baru atau MariaDB 10.1 dan yang lebih baru.
• Apache atau Ngink (mod_rewrite diaktifkan)
• Dukungan HTTP.

Pada artikel sebelumnya, kita telah melihat cara menginstal WordPress. Artikel tertaut memiliki langkah-langkah untuk menginstal WordPress ke server Anda.

Anda dapat menemukan detail lebih lanjut tentang menyiapkan lingkungan WordPress dari dokumentasi resmi.

Buat halaman kontak baru menggunakan admin WordPress

Jika Anda baru mengenal WordPress, Anda harus memulai dengan panduan pemula untuk mempelajari cara membuat situs web WordPress.

Setelah instalasi, itu akan memungkinkan login ke panel admin WordPress.

Di menu sebelah kiri Pages->Add New navigasi untuk membuat halaman kontak baru. Ini akan meminta judul halaman dan konten.

Ada berbagai cara untuk menampilkan konten halaman kontak.

1. HTML kontak dapat langsung ditambahkan ke antarmuka buat-halaman baru dan admin.
2. Menampilkan tata letak kontak dengan file template WordPress.
3. Mendaftarkan kode pendek untuk membuat tata letak halaman kontak di frontend.

Dalam kode contoh ini, saya menggunakan file template WordPress untuk memuat tata letak kontak.

Buat tema anak untuk tema aktif

Saya telah membuat tema anak WordPress untuk menyesuaikan tema yang sedang diaktifkan.

Kami juga dapat membuat widget dengan formulir kontak dan merendernya ke tata letak tema.

Tangkapan layar di bawah ini menunjukkan struktur file tema dengan tema anak. Tema anak memiliki file template WordPress contact-template.php. File ini memiliki HTML kontak dengan skrip AJAX sisi klien.

Itu function.php file mengaitkan wp_ajax untuk memproses formulir kontak saat dikirim.

Ini adalah file template WordPress yang dibuat untuk contoh formulir kontak ini.

Itu memuat judul halaman dan konten halaman yang dibuat di panel admin WordPress untuk ditampilkan di halaman kontak.

Selain itu, ia memiliki HTML formulir kontak. Formulir berisi nama bidang dasar, email, dan lainnya. Semua bidang wajib dan divalidasi melalui JavaScript.

Skrip validasi ada di file template. Kami juga dapat mengantrekan aset JavaScript dengan menggunakan fungsi inti WordPress wp_enqueue_script().

contact-template.php

<?php
/* Template Name: Contact Template */
get_header();

/* Start the Loop */
while (have_posts()) :
    the_post();
    ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <header class="entry-header alignwide">
			<?php
    the_title('<h1 class="entry-title">', '</h1>');
    ?>
		</header>
    <!-- .entry-header -->
    <div class="entry-content">
 <?php
    the_content('<p>', '</p>');
    ?>
    <link rel="stylesheet" type="text/css"
            href="https://phppot.com/wordpress/wp-content/themes/twentytwentyone-child/style.css">
        <form name="contactForm" id="contactForm" method="post"
            onsubmit="return formValidation()"  action="">
            <div class="row">
                <div class="label">Name:</div>
                <input type="text" id="name" name="name">
            </div>
            <div class="row">
                <div class="label">Email:</div>
                <input type="text" id="email" name="email">
            </div>
            <div class="row">
                <div class="label">Subject:</div>
                <input type="text" id="subject" name="subject">
            </div>
            <div class="row">
                <div class="label">Message:</div>
                <textarea id="message" name="message" rows="5"></textarea>
            </div>
            <div class="row">
                <input type="submit" value="Submit"> <span id="status"></span>
            </div>
        </form>
    </div>
</article>
<!-- #post-<?php the_ID(); ?> -->
<?php
endwhile
; // End of the loop.

get_footer();
?>

File di atas memiliki nama template kontak di awal. Ini membantu untuk menampilkan Templat daftar dropdown di admin.

Memilih EDIT CEPAT pilihan halaman kontak dari Halaman->Semua Halaman. Tangkapan layar di bawah ini menampilkan opsi untuk memilih templat kontak untuk halaman tersebut.

Di layar edit halaman kontak, ini menunjukkan nama template tema anak di dropdown.

Kirim permintaan AJAX menggunakan kait wp_ajax

Kode JavaScript ini memiliki dua fungsi. Itu formValidation() adalah untuk memvalidasi formulir kontak dan processContactSubmit() adalah memanggil wp_ajax untuk memproses formulir kontak di WordPress.

Permintaan AJAX meneruskan data formulir yang divalidasi ke sisi server. Ia memanggil admin_ajax.php dengan parameter aksi untuk mengaitkan wp_ajax.

skrip AJAX

<script>
function formValidation() {
	  event.preventDefault();
	  var name = document.forms["contactForm"]["name"].value;
	  var email = document.forms["contactForm"]["email"].value;
	  var subject = document.forms["contactForm"]["subject"].value;
	  var message = document.forms["contactForm"]["message"].value;
	  document.getElementById('status').innerHTML = '';
      var errorMessage="<span class="error">All fields are required.</span>";
	  var regEx = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+.([A-Za-z]{2,4})$/;

         if (name.trim() == "" ||email.trim() == "" || subject.trim() == "" || message.trim() == "") {
             document.getElementById('status').innerHTML = errorMessage;
             return false;
           }
       if (!regEx.test(email)) {
    	   var errorMessage="<span class="error">Invalid email.</span>";
 		    document.getElementById('status').innerHTML = errorMessage;
 		    return false;
 		  }
	  processContactSubmit();
      return true;
	}

function processContactSubmit() {
                var request = new XMLHttpRequest();
                request.open("POST", "/wordpress/wp-admin/admin-ajax.php?action=process_contact_form");
                request.onreadystatechange = function() {
                    if(this.readyState === 4 && this.status === 200) {
                        document.getElementById("status").innerHTML = this.responseText;
                    }
                };
                var myForm = document.getElementById("contactForm");
                var formData = new FormData(contactForm);
                request.send(formData);
}
</script>

function.php

Di functions.php, itu mengaitkan tindakan wp_ajax process_contact_form() saat meminta melalui AJAX.

Ini menerima data formulir untuk mengatur subjek email kontak dan konten isi utama.

Ini juga mengatur header email dan alamat email penerima untuk melewati fungsi pengiriman email.

Kode ini menggunakan wp_mail untuk mengirim email kontak menggunakan WordPress. Ada plugin WordPress untuk mengaktifkan SMTP untuk mengirim email.

<?php
add_action('wp_ajax_nopriv_process_contact_form', 'process_contact_form');

function process_contact_form()
{
    $to = "Recipient Email Address";
    $subject = $_POST["subject"];
    $headers = "Testing";
    $message = $_POST["message"];
    $attachments = "";
    $sent = wp_mail($to, $subject, $message, $headers, $attachments);
    if (! $sent) {
        echo "<span class="error">Problem in sending mail.</span>";
    } else {
        echo "<span class="success">Hi, thank you for the message.</span>";
    }
    wp_die();
}

Output formulir kontak menampilkan tata letak formulir kontak yang dibuat dengan file template WordPress.

Tangkapan layar di bawah ini menampilkan respons sisi klien dan sisi server saat mengirimkan data formulir.

Setelah menjalankan tindakan pengiriman email wp_ajax, ia mengembalikan respons boolean untuk memeriksa apakah email terkirim atau tidak.

Berdasarkan data pengembalian fungsi wp_mail, titik akhir AJAX menyiapkan respons. Angka menunjukkan keberhasilan atau kegagalan respons dari contoh formulir kontak WordPress ini.

Kesimpulan

Jadi, kami telah belajar cara membuat formulir kontak di WordPress. Saya harap, ini akan membantu Anda untuk mereplikasi hal yang sama di situs WordPress.

Kami telah melihat berbagai cara untuk merender formulir kontak atau tata letak apa pun di sisi pengguna. Langkah-langkah untuk membuat template kontak kustom dapat membantu untuk membuat template yang berbeda dan membuat kustomisasi.

Kode dengan kait tindakan wp_ajax mendefinisikan bagian untuk memproses data formulir kontak dan pengiriman email.

Dengan ide dasar ini, ini akan memungkinkan Anda menyiapkan penawaran harga, pertanyaan proyek, atau template UI berbasis formulir apa pun di WordPress.

Kembali ke Atas