สร้างแบบฟอร์ม ใน WordPress +ส่งข้อมูลไปที่ LINE Group ด้วย LINE Notify API

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

เข้าสู่ระบบ