ผมได้โจทย์มาจากคุณลูกค้าหลายๆรายที่มีความต้องการที่คล้ายกัน คือ อยากให้ลูกค้าของเขา กรอกแบบฟอร์มแล้วเด้งไปที่ 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 ขั้นตอนดังนี้

1. สร้างกลุ่ม LINE และ Invite Line Notify เข้าไปที่กลุ่ม
2. สร้าง  LINE NOTIFY TOKEN
3. สร้างแบบฟอร์มด้วยวิธีต่างๆตามที่ถนัด
4. เขียน 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 );