[WP Ajax Basic] Membuat Contact Form di WordPress
Kali ini kita akan membuat WordPress Ajax Contact Form sederhana di WordPress. selanjutnya kita singkat menjadi ACF.
Langkah2nya:
1. define some constants.
define('ACF_PAGE_SLUG', 'contact'); /* page slug dimana nanti form akan dirender*/
define('ACF_EMAIL_RECEIVER','mymail@example.com'); /* email penerima contact*/
define('ACF_SUCCESS_MESSAGE','Pesan anda berhasil dikirim, terimakasih.');
define('ACF_ERROR_MESSAGE','Terjadi kesalahan, email tidak terkirim.');
?>
2. Render langsung script nya di footer, kalau udah Advanced sebaiknya pakai wp_enqueue_script (external file)
add_action('wp_footer', 'acf_form_js');
function acf_form_js(){ ?>
}
?>
3. Form HTML nya,
/* pake filter the_content, supaya nantinya form akan otomatis nempel di page dengan slug 'contact' atau whatever terserah anda, sesuai dengan ACF_PAGE_SLUG di atas*/
add_filter('the_content','render_contact_form');
function render_contact_form($content) {
if(is_page(ACF_PAGE_SLUG)) {
?>
}
else {
return $content;
}
}
?>
3. Sekarang bikin Ajax Callback nya.
add_action('wp_ajax_acf_form_submit', 'acf_callback');
add_action('wp_ajax_nopriv_acf_form_submit', 'acf_callback');
function acf_callback() {
if($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'){
$name = trim(strip_tags($_POST['name']));
$email = trim(strip_tags($_POST['email']));
$subject = trim(strip_tags($_POST['subject']));
$message = trim(htmlentities($_POST['message']));
$to = ACF_EMAIL_RECEIVER;
$header = "From: $email\r\n" .
"Reply-To: $email\r\n";
$result = Array(
'code'=>0,
'message'=>ACF_ERROR_MESSAGE);
if(!empty($email) AND !empty($message)){
if(@mail($to,$subject,$message,$header)){
$result['code'] = 1;
$result['message'] = ACF_SUCCESS_MESSAGE;
}
}
header('content-type: application/json; charset=utf-8');
echo json_encode($result);
}
exit;
}
?>
4. Cara Pakai
Bikin page/halaman dengan slug 'contact' atau lainnya, yang penting harus sesuai dengan ACF_PAGE_SLUG di atas.
Cara 1: Paste langsung di functions.php
Paste code2 diatas di functions.php di folder theme.
Cara 2: Jadikan sebagai plugin.
Jika ingim menjadikan script ini sebagai plugin, sehingga mudah di aktifkan/nonaktifkan. caranya cukup mudah, cukup menambahkan info Plugin Name pada file dan simpan ke folder wp-content/plugins
contoh info plugin
/*
Plugin Name: Ajax Contact Form
Author: takien
Author URI: http://takien.com/
*/
Code lengkap/yang udah jadi plugin bisa di lihat di https://github.com/takien/WordPress-Ajax-Contact-Form
Komentar (25)
Arsip Statis