
ผมได้โจทย์มาจากคุณลูกค้าหลายๆรายที่มีความต้องการที่คล้ายกัน คือ อยากให้ลูกค้าของเขา กรอกแบบฟอร์มแล้วเด้งไปที่ LINE Group ทันที เพื่อให้เซลล์ของบริษัทติดต่อลูกค้าได้ทันทีโดยไม่ต้องรอ
โดยปกติแล้วถ้ามีคนกรอกแบบฟอร์มติดต่อเข้ามาในเว็บไซต์ของเรา ข้อมูลจะถูกส่งเข้าอีเมลใช่ไหมครับ แต่ถ้าเป็นยุคนี้ อาจจะดูเชยไปหน่อย เพราะใครๆเค้าก็ใช้ LINE Group ในการติดต่อสื่อสารกันทั้งนั้นแหละ หลายคนเอาไปใช้เป็นห้องคุยงานกับทีมงาน ทั้งๆที่มันก็ไม่ค่อยจะเหมาะสักเท่าไรก็ตาม
สารบัญ (เลือกอ่าน)
LINE Notify คืออะไร
LINE Notify คือบริการของ LINE อย่างหนึ่งที่ให้เราสามารถส่งข้อความ การแจ้งเตือนต่าง ๆ ไปยังบัญชีของส่วนตัว หรือกลุ่ม (LINE Group) ต่างๆ ผ่านทาง API
สำหรับบทความนี้ผมจะประยุกต์ใช้กับการทำแบบฟอร์มใน WordPress ซึ่งจริงๆแล้วมีปลั๊กอินหลายๆตัวที่มีฟีเจอร์เชื่อมต่อกับ LINE Notify API แบบง่ายๆอยู่นะครับ แต่ผมถนัดเขียนโค๊ดมากกว่า ซึ่งวิธีที่ผมจะทำนั้นสามารถทำได้หลายแบบดังนี้
1.สร้างแบบฟอร์มขึ้นมาเองโดยใช้วิธีเขียนโค๊ด HTML ลงในหน้า Page ของ WordPress
2.ใช้วิธีสร้างแบบฟอร์มด้วยปลั๊กอินสร้างแบบฟอร์มที่ยอดฮิต (ปลั๊กอินฟรี)
2.1 สร้างแบบฟอร์มโดยใช้ WPforms
2.2 สร้างแบบฟอร์มโดยใช้ Contact form7
2.3 สร้างแบบฟอร์มโดยใช้ Caldera Forms
หลักการก็ไม่ได้ยากอะไรครับมี 4 ขั้นตอนดังนี้
- สร้างกลุ่ม LINE และ Invite Line Notify เข้าไปที่กลุ่ม
- สร้าง LINE NOTIFY TOKEN
- สร้างแบบฟอร์มด้วยวิธีต่างๆตามที่ถนัด
- เขียน Hook เพื่อส่งข้อมูล
ขั้นตอนแรกสร้าง LINE Group และดึง Line Notify เข้ากลุ่ม
สร้าง LINE Notify Token
ธีการสร้างเข้าไปที่ https://notify-bot.line.me/ ล็อกอินเข้าระบบและเลือกที่ My page
Token คืออะไรผมคงไม่ต้องอธิบายเนอะ ผมคิดว่าโปรแกรมเมอร์ทุกคนน่าจะรู้จักกันดี

จากนั้นไปสร้าง Access Token โดย Click ที่ปุ่ม Generate Token

จะมีป็อบอัพเด้งขึ้นมาให้เราระบุชื่อของ Lineเลือก LINE Group ที่จะใช้งาน
ทำการ Copy Token มาเก็บไว้ก่อน
สร้างแบบฟอร์ม
โดยการไปที่เมนู Page สร้างหน้าใหม่ขึ้นมา เขียนโค๊ดสร้างแบบฟอร์มตามที่ต้องการ
และนี่คือตัวอย่างโค๊ดที่ผมใช้สร้างแบบฟอร์มอย่างง่าย
เขียนโค๊ด HTML ลงในหน้า Page ของ WordPress
<form action="/wp-admin/admin-ajax.php?action=test_ajax_request" method="post"> First name:<br> <input type="text" name="firstname" value=""><br> Last name:<br> <input type="text" name="lastname" value=""><br><br> <input type="submit" value="Submit"> </form>
*ใช้ Method Post และกำหนด Form action ไปที่ /wp-admin/admin-ajax.php?action=test_send_form
*test_send_form เป็น Hook ที่เราจะเขียนเพื่อรับค่าจากแบบฟอร์ม

เขียน Function Hooks
เมื่อได้แบบฟอร์มแล้ว ขั้นต่อไปเราจะมาเขียนโค๊ดเพื่อใช้ในการรับข้อมูลจากแบบฟอร์มและส่งข้อมูลไปที่ LINE Group
เขียนโค๊ดเพื่อรับค่าจากแบบฟอร์มโดยเขียนฟังก์ชั่น Hooks ในที่นี้ผมจะลอง echo ค่า firstname และ lastname ออกมาเพื่อดูว่าฟังก์นี้ทำงานได้ปกติ
add_action( 'wp_ajax_nopriv_test_send_form', function() { $msg = "\r\n"."Name :".$_POST['firstname']."\r\n"; $msg .= "Surname :".$_POST['lastname']."\r\n"; echo $msg; });
ลองทำการทดสอบโดยพิมพ์ firstname และ lastname
จะเห็นว่ามีข้อมูลที่ส่งไปและในฟังก์ชั่นผมเขียน echo ออกมา

ต่อไปเราจะมาเขียนฟังก์ชั่นเพื่อส่งค่าไปที่ LINE Group กัน โดยเขียนโค๊ดที่ function.php ตามด้านล่างนี้
สร้างฟังก์ชั่น send_notify() เพื่อส่งข้อมูล
function send_notify($msg) { define('WLN_API_END_POINT', 'https://notify-api.line.me/api/notify'); $token = "ใส่ Access Token ของคุณตรงนี้"; $headers = array( 'Authorization' => 'Bearer '. $token, ); $args = array( 'method' => 'POST', 'timeout' => 45, 'httpversion' => '1.0', 'headers' => $headers, 'body' => array( 'message' => $msg ), ); $response = wp_remote_post( WLN_API_END_POINT, $args ); return $response; }
แก้โค๊ดที่ใช้รับค่าจากแบบฟอร์มดังนี้
add_action( 'wp_ajax_nopriv_test_send_form', function() { $msg = "\r\n"."Name :".$_POST['firstname']."\r\n"; $msg .= "Surname :".$_POST['lastname']."\r\n"; send_notify( $msg ); });
จากนั้นลองทดสอบกรอกข้อมูลอีกครั้งจะเห็นว่ามีข้อมูลส่งไปที่ LINE Group
เสร็จแล้วครับ ง่ายมากเลยใช่ไหมละครับ ทีนี้ก็อยู่ที่ว่าเราจะไปประยุกต์ใช้กับอะไร

ประยุกต์ใช้กับปลั๊กอินสร้างแบบฟอร์มที่ยอดฮิต (ปลั๊กอินฟรี)
เนื่องจากการที่เราจะมาเขียนโค๊ด HTML ยัดลงหน้าเพจนั้นอาจจะดูยุ่งยากไปหน่อย
และไม่น่าจะเป็นวิธีที่เหมาะเท่าไรนัก
ผมจึงอยากเพิ่มเติมในเรื่องของการใช้ Plugin ในการสร้างฟอร์ม ซึ่งมันจะง่ายและสะดวกกว่าการยัดโค๊ดลงไปในหน้าเพจ แต่ทว่า Plugin ที่นิยมใช้สร้างแบบฟอร์มนั้นก็มีเยอะแยะมากมาย ฉะนั้นผมขอยกตัวอย่างสัก 4 ตัวที่คิดว่าน่าจะคุ้นเคยกันเป็นอย่างดี
สร้างแบบฟอร์มโดยใช้ปลั๊กอิน WPforms + เขียน Function Hooks ส่งข้อมูลไปที่ LINE Group
ทำการติดตั้ง Plugin WPforms และเปิดใช้งาน

ทำการสร้างแบบฟอร์ม โดยผมจะเลือกแบบฟอร์มอย่างง่ายเพื่อมาทดสอบเท่านั้น

เมื่อสร้างแบบฟอร์มเสร็จแล้ว เขียน Function Hooks เพื่อรับค่าและส่งค่าไปที่ LINE Group ดังนี้
add_action( 'wpforms_process', 'wpf_dev_process', 10, 3 ); function wpf_dev_process( $fields, $entry, $form_data ) { // Optional, you can limit to specific forms. Below, we restrict output to // form #395. if ( absint( $form_data['id'] ) !== 395 ) { return $fields; } send_notify( $fields[1]['value'] ); }
จากนั้นทำการทดสอบและจะได้ผลลัพธ์ดังภาพ (จากโค๊ดด้านบนผมรับค่าจากฟอร์มและส่งเข้า LINE กลุ่ม แค่ฟิลด์เดียวนะครับ)


สร้างแบบฟอร์มโดยใช้ปลั๊กอิน Contact form7 + เขียน Function Hooks ส่งข้อมูลไปที่ LINE Group
ทำการติดตั้ง Contact form7 และเปิดใช้งานสร้างแบบฟอร์มเพื่อมาทดสอบ

เขียน Function Hooks เพื่อรับค่าและส่งค่าไปที่ LINE Group ดังนี้
add_action('wpcf7_before_send_mail', 'CF7_pre_send'); function CF7_pre_send($cf7) { $submission = WPCF7_Submission::get_instance(); $msg = "\r\n"."Name :".$_POST['your-name']."\r\n"; $msg .= "Email :".$_POST['your-email']."\r\n"; if ($submission) { $posted_data = $submission->get_posted_data(); $arrFields = array(); foreach ($posted_data as $key => $value) { //$strKeyVals .= $key.":".$value.", "; if ("_wp" != substr($key, 0, 3)) { $arrFields[] = $key . '${$' . $value; } } /* Here you can write curl and whatever you want */ send_notify($msg); } }
จากนั้นทำการทดสอบ
สร้างแบบฟอร์มโดยใช้ปลั๊กอิน Caldera Forms + เขียน Function Hooks ส่งข้อมูลไปที่ LINE Group

ทำการติดตั้งปลั๊กอินและสร้างแบบฟอร์มให้เรียบร้อยหลังจากเขียนโค๊ดตามตัวอย่างด้านล่างนี้แล้วทำการทดสอบ
add_action( 'caldera_forms_submit_complete', function( $form, $referrer, $process_id ) { //change your form ID here if( 'cf123..' != $form[ 'ID' ] ) { return; } //change your field ID here $fullname = Caldera_Forms::get_field_data( 'fld_9014900', $form ); $email = Caldera_Forms::get_field_data( 'fld_8004623', $form ); $phone = Caldera_Forms::get_field_data( 'fld_7285585', $form ); $line = Caldera_Forms::get_field_data( 'fld_3995931', $form ); $msg = "\r\n"."ชื่อ :".$fullname."\r\n"; $msg .= "อีเมล :".$email."\r\n"; $msg .= "เบอร์ติดต่อ :".$phone."\r\n"; $msg .= "LINE ID :".$line."\r\n"; send_notify($msg); }, 10, 3 );