[Workshop] เก็บข้อมูลจาก WordPress ลง Google Sheet ด้วย Activepieces

บทความนี้เป็นบทความประกอบ Video ส่งข้อมูลจาก WordPress เข้า Google Sheet แบบไม่ต้องเขียนโค้ดด้วย Activepieces ฟรี

Activepieces คือเครื่องมือทำ Automation แบบ No-Code สามารถสร้างระบบอัติโนมัติของตัวเองเพื่อลดงานซ้ำซ้อนที่ทำซ้ำ ๆ แล้วอาจจะเกิดความผิดพลาดได้ง่าย โดยมีจุดเด่นที่โปรแกรมเป็น Open Source ใช้งานได้ฟรี และรองรับการเชื่อมต่อกับ Gen AI อย่าง ChatGPT, Claude และอื่น ๆ ดูวีดีโอแนะนำ Activepieces ได้ที่นี่

ปรึกษาปัญหา หรืออยากเห็นเคสตัวอย่างจากผู้ใช้จริง ให้เข้าร่วมกลุ่ม Facebook Activepieces Facebook Community

ภาพรวม / Project Overview

โดยส่วนใหญ่แล้ว เว็บไซต์มักถูกพัฒนาขึ้นด้วย WordPress และสามารถส่งแบบฟอร์มติดต่อผ่าน Contact Form 7 (Plugin สำหรับสร้างแบบฟอร์มใน WordPress) ที่จะส่งข้อมูลเข้าไปที่อีเมลของผู้ดูแลระบบ ซึ่งไม่ค่อยสะดวกหากมีผู้ติดต่อเข้ามาจำนวนมาก (เพราะต้องมาเปิดอีเมลทีละอัน ๆ)

เพื่อให้ทีม Support ติดต่อลูกค้าที่เข้ามากรอกแบบฟอร์มได้อย่างเป็นระบบ เราจะทำให้แบบฟอร์มติดต่อ ส่งข้อมูลไปที่ Google Sheet แทน ผ่านการใช้เทคนิค Webhook

อธิบาย Webhook เพิ่มเติมโดย BorntoDev

ค่าใช้จ่ายที่อาจจะเกิดขึ้น / Cost Breakdown

1. Activepieces

ใน Project นี้เราจะใช้ Activepieces ในการรัน Automation ซึ่งมีค่าใช้จ่ายแล้วแต่วิธีการติดตั้ง โดยสามารถลองใช้งานได้ฟรี 1,000 tasks ต่อเดือนผ่านการใช้งานแบบ Cloud

• กรณีใช้ Self-host อ่านรายละเอียดค่าใช้จ่ายที่นี่
• กรณีใช้แบบ Cloud อ่านรายละเอียดค่าใช้จ่ายที่นี่

2. WordPress Hosting

ใน Project นี้จะใช้ WordPress สร้างเว็บไซต์ซึ่งเป็น Open Source ใช้งานได้ฟรี แต่ต้องรับผิดชอบค่าใช้จ่ายเรื่อง Hosting เอง โดยใน Workshop นี้จะใช้งาน WordPress บน Localhost แทน (ไม่มีค่าใช้จ่ายเพิ่มเติม ดาวน์โหลดมาและใช้ได้เลยผ่าน Localwp.com)

โดยหากใช้งานจริง ๆ จะใช้งานได้ผ่าน

• WordPress.com
  ใช้งานผ่าน Cloud ของ WordPress ราคาเริ่มต้นที่ 1,500 บาทต่อปี รายละเอียดราคา
• WordPress.org
  ต้องไป Hosting เอง เฉลี่ยราคาอยู่ที่ 1,200 – 1,500 บาทต่อปี

แนวคิดการพัฒนา / Task Breakdown

ขั้นตอนในการลงมือทำไล่เป็นขั้นตอนจากง่ายไปยาก โดยเริ่มจาก Setup ระบบ, สร้างแบบฟอร์มด้วย Contact Form 7, เปิดใช้งาน Webhook ใน Activepieces และบันทึกข้อมูลลงใน Google Sheet

1. เตรียมระบบ
   1. Setup โปรแกรม WordPress ในเครื่องของเรา (Localhost)
      1. ดาวน์โหลด และสร้าง WordPress Project ด้วย Localwp.com
      2. ติดตั้ง Contact Form 7 Plugin และสร้าง Contact Form บนเว็บไซต์
      3. ติดตั้ง CF7 to Webhook Plugin เพื่อรอต่อกับ Activepieces
   2. เตรียมไฟล์ Google Sheet สำหรับเก็บข้อมูล
2. พัฒนา Automation ด้วย Activepieces
   1. สร้าง Trigger เป็น Webhook ที่รอ Request จาก WordPress
   2. สร้าง Action สำหรับบันทึกข้อมูลลง Google Sheet

สิ่งที่ต้องเตรียม / Project Prerequisites

• Activepieces account
  สมัครเข้าใช้งานที่นี่ https://activepieces.com/
• Localwp
  โปรแกรมสร้าง WordPress ใน localhost ดาวน์โหลดที่ https://localwp.com/
• Google account
  สำหรับสร้าง Google Form, Google Drive และ Google Sheet

ขั้นตอนการลงมือทำ / How to

Setup โปรแกรม WordPress ด้วย Localwp.com

ในขั้นตอนนี้เราจะ Setup โปรแกรม WordPress ขึ้นในเครื่องคอมพิวเตอร์ของเราก่อน เพื่อทดลองใช้งาน โดยไม่ต้องจ่ายค่า WordPress Hosting

ดาวน์โหลดโปรแกรม Local จาก Localwp.com เพื่อสร้าง WordPress Project ในเครื่อง ซึ่งสร้างได้ง่ายมาก ๆ แค่ติดตั้ง, ตั้งชื่อ Project , ตั้ง Admin account และ เลือก Preferred environment

ตัวอย่าง WordPress Project ที่สร้างและพร้อมใช้งานแล้ว

ติดตั้ง Contact Form 7 , CF7 to Webhook Plugin และสร้าง Contact Form

ในขั้นตอนนี้ เราจะสร้าง Page ใน WordPress ที่มีแบบฟอร์ม Contact Form สำหรับติดต่อกลับ ผ่านการติดตั้ง Plugin

• Contact Form 7 Plugin เป็น Plugin ใน WordPress สำหรับสร้างแบบฟอร์มบน WordPress เว็บไซต์ เมื่อติดตั้งแล้วสามารถตั้งค่าแบบฟอร์มได้ทันที
  รายละเอียดเกี่ยวกับ Contact Form 7
• CF7 to Webhook Plugin เป็น Plugin เสริมของ Contact Form 7 ที่ทำให้แบบฟอร์มส่งข้อมูลไปที่ Webhook ได้
  รายละเอียดเกี่ยวกับ CF7 to Webhook

เมื่อติดตั้ง Contact Form 7 Plugin แล้ว เราจะสามารถสร้างแบบฟอร์มติดต่อได้ และสามารถสร้าง Short code เพื่อเอา แบบฟอร์มไปติดใน Page บน WordPress ได้

ตัวอย่างการสร้าง Contact Form บน Page ใน WordPress ผ่านการใช้ Short code ใน Contact Form 7

• เพิ่ม Short code ของ Contact Form 7 ในหน้าที่ต้องการ
• เพิ่ม CSS style หรือปรับแต่งธีมเพิ่มเติม ตัวอย่างไฟล์ CSS ใน Contact Form

<style>
body {
	margin: 0 auto;
	font-family: verdana, sans-serif;
}
h1 {
	background: rgba(0,0,0,.3);
	padding: 1em;
	margin-bottom: 1em;
	text-align: center;
	box-shadow: 0 0 1em rgba(0,0,0,.3);
}

/* CF 7 override */
form.wpcf7-form{
	color: #2c569d;
	display: fixed;

}
form.wpcf7-form * {
	transition: 225ms;
}
form.wpcf7-form label {
	display: block;
	width: 100%;
	cursor: pointer;
}
form.wpcf7-form input,
form.wpcf7-form select,
form.wpcf7-form textarea {
	display: block;
	width: 100%;
	padding: .5em 0;
	margin-bottom: 1.5em;
	border: 0;
	border-bottom: 1px solid rgba(44,86,157,.5);
	background: transparent;
	font-size: 1em;
}
form.wpcf7-form input:hover,
form.wpcf7-form select:hover,
form.wpcf7-form textarea:hover {
	cursor: pointer;
	border-bottom: 2px solid rgba(44,86,157,1);
}
form.wpcf7-form input:focus,
form.wpcf7-form select:focus,
form.wpcf7-form textarea:focus {
	border-bottom: 1px solid #0099ff;
	box-shadow: inset 0 -2px 0 #333;
	outline: none;
}


form.wpcf7-form input,
form.wpcf7-form textarea{
	background: rgba(0,0,0,.03));
}

form.wpcf7-form input[type="submit"] {
	padding: 1em;
	margin-bottom: 0;
	text-transform: uppercase;
	font-size: 110%;
	border: 2px solid #fff;
	box-shadow: none;
	background: #0099ff;
	color: #fff;
	line-height: 1.2em;
        border-radius: 0.5rem;
}
form.wpcf7-form input[type="submit"]:hover {
	background-color: #0099ff;
	font-weight: 900;
}


span.wpcf7-not-valid-tip {
	position: relative;
	top: -1em;
	color: #e87676;
}
div.wpcf7-response-output {
	padding: 1em !important;
	margin: 0 !important;
}

div.wpcf7 .ajax-loader {
	display:none;
   background: none;
  -webkit-animation: spin 1s ease-in-out infinite;
  animation: spin 1s cubic-bezier(0.36, 0.09, 0.27, 0.97) infinite;
  border: 3px solid #dedede;
  border-top: 3px solid #000000;
  border-radius: 50%;
  height: 1em;
  width: 1em;
  margin: 0;
  vertical-align: middle;
}

@-webkit-keyframes spin {
  50% {
    border-top-color: #a7005d;
  }
  100% {
    border-top-color: #000000;
   -webkit-transform: rotate(360deg);
           transform: rotate(360deg);
  }
}

@keyframes spin {
  50% {
    border-top-color: #a7005d;
  }
  100% {
    border-top-color: #000000;
   -webkit-transform: rotate(360deg);
           transform: rotate(360deg);
  }
}


.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
    opacity: .75;
}
</style>

สร้าง Flowใน Activepieces

เปิด Flow / Project ใหม่ใน Activepieces

• เข้าสู่ระบบ Activepieces
• ไปที่ Menu Flows และกด New Flow
• กดสร้าง + From scratch
• ตั้งชื่อ Flow เป็น CF7 to GSheet

ใช้ Catch Webhook | Webhook เป็น Trigger Node

ในขั้นตอนนี้เราจะเพิ่ม Webhook เข้ามาใน Activepieces Project เพื่อรอรับข้อความจาก WordPress

สร้าง Webhook ใน Activepieces เป็น Trigger Node โดย Webhook จะเป็นการสร้าง URL พิเศษที่รอทำงานเมื่อเข้าตามเงื่อนไขบางอย่าง (ตรง Live URL หากใส่ /test ต่อท้ายจะสามารถใช้งาน Webhook โดยยังไม่ publish ได้)

หลังจากนั้นสามารถเอา URL นั้นไปใส่ใน Webhook URL ของ Webhook Contact Form 7 และทดสอบส่งข้อมูลจาก WordPress ได้เลย

สร้าง Google Sheet สำหรับเก็บข้อมูล

ในขั้นตอนนี้ เราจะสร้าง Google Sheet สำหรับเก็บข้อมูลแบบฟอร์มที่มาจาก WordPress

ตัวอย่างไฟล์ Google Sheet ที่ใช้ใน Project นี้

สร้างไฟล์ Google Sheet : contact-wordpress-google-sheet

สร้าง Sheet : data

โดยสามารถสร้างไฟล์ที่มี Column ดังนี้

• name
• email
• subject
• message

ในตัวอย่าง Workshop มีการใส่ Id เพื่อสร้างรหัสสำหรับการติดต่อแต่ละครั้ง ซึ่งจะใส่หรือไม่ใส่ก็ได้

รับค่าจาก Webhook ไปเก็บใน Google Sheet ด้วย Insert Row Node

ในขั้นตอนนี้ เราจะเอาข้อมูลจาก Webhook Node ใน Activepieces ไปบันทึกใน Google Sheet ด้วย Insert Row | Google Sheet โดยสร้าง Google Sheet เพื่อเก็บข้อมูล

ในตัวอย่างมีการใส่ Node Get Current Date เพิ่มเติมเพื่อบันทึกวันเวลาที่รับข้อความด้วยซึ่งไม่จำเป็นต้องใส่ก็ได้

เลือก Insert Row | Google Sheet โดยเลือกข้อมูลที่จะส่งเข้าไปใน Google Sheet ให้ถูกต้อง และตั้งค่าดังนี้

• Connection: เลือก Account ของตัวเอง
• Spreadsheet: เลือกข้อมูลของตัวเอง
• Sheet: เลือกข้อมูลของตัวเอง
• As String: เลือกเป็น True
• Does the first row contain headers?: เลือกเป็น True
• เลือกข้อมูลให้ตรง Column ที่ต้องการ

เมื่อตั้งค่าเสร็จแล้ว ลองกดทดสอบ และกด Publish เพื่อใช้งานจริง

ไฟล์สำเร็จรูป และแหล่งอ้างอิงอื่น ๆ

ยังไม่มี

แนวทางการต่อยอดเพิ่มเติม และข้อจำกัดใน Project นี้

การเพิ่มความปลอดภัยให้กับ Webhook ด้วยการเพิ่ม Authentication

เพราะ Webhook โดยทั่ว ๆ ไปแล้วหากใครมี URL ของเราก็สามารถส่งข้อมูลมาได้ ดังนั้นถ้าเป็นไปได้ เราจะเพิ่มระบบ Authentication อย่างง่ายไว้ โดยมีหลักการคือคนที่ใช้ URI Webhook นี้ได้ต้องส่งรหัสอะไรบางอย่างมาด้วย ในที่นี่จะใช้เป็น Header Auth

ตัวอย่างการส่ง Header Auth

และใน WordPress เราจะส่งค่านี้มาใน WordPress ด้วย ดังตัวอย่างในภาพ

ตัวอย่างการใส่ข้อมูลใน Headers KEY: 123456

คำถามที่พบบ่อยเกี่ยวกับ Project นี้

ยังไม่มี

บทความที่เกี่ยวข้อง

June 12, 2025June 23, 2025Activepieces 40

[Workshop] สร้างระบบแจ้งเตือน Telegram bot เมื่อใกล้กำหนดส่งงาน แบบ No-Code ด้วย Activepieces ใน 30 นาที

เรียนรู้แนวทางการสร้าง Workflow ส่งข้อความแจ้งเตือนส่งงานผ่าน Telegram Bot แบบอัตโนมัติ ด้วย Activepieces โดยไม่ต้องเขียนโค้ด

June 2, 2025June 2, 2025Activepieces 51

แจกโปรแกรม No-Code ฟรี ‘Activepieces’ ช่วยลดงานซ้ำซ้อนในงานรูทีนให้เสร็จไวขึ้น

แนะนำ Activepieces โปรแกรมสร้าง Automation น้องใหม่แบบ Low-Code ที่มีฟรี Plan เหมือน Make.com แต่สามารถ Self-host ได้แบบ n8n ทำให้เหมาะกับทั้งมือใหม่ และมือเก๋า

May 17, 2025June 12, 2025Activepieces 73

[Workshop] สร้างระบบส่งเกียรติบัตร (Certificate) อัตโนมัติผ่าน Email ด้วย Activepieces ฟรี !

เรียนรู้แนวทางการสร้าง Workflow สร้างเกียรติบัตร (Certificate) แบบอัตโนมัติพร้อมส่ง Gmail ฟรี ด้วย Activepieces โดยไม่ต้องเขียนโค้ด

May 1, 2025May 16, 2025Activepieces 607

[Workshop] สร้างระบบตรวจสลิปปลอมฟรีแบบอัติโนมัติด้วย Activepieces และ SlipOK

เรียนรู้แนวทางการสร้าง Workflow ตรวจสอบสลิปโอนเงินแบบอัตโนมัติด้วย Activepieces ฟรี ด้วยการใช้ SlipOK API โดยไม่ต้องเขียนโค้ด

• Facebook
• Twitter
• Line

Activepieces AI Automation Low-Code No-Code Workshop

Worakarn Ounhattapradit

พีเตอร์ ผู้ตัดสินใจกระโดดข้ามสายงานจากนักออกแบบ มาสู่โลกแห่งเทคโนโลยี สนใจในเทคโนโลยีใหม่ ๆ ที่จะพัฒนาคุณภาพชีวิตคนให้ดีขึ้น อ่านรายละเอียดเพิ่มเติม