# สร้างและฝังแบบฟอร์มการสมัครสมาชิก

Pushwoosh ให้ความยืดหยุ่นในการสร้างแบบฟอร์มการสมัครสมาชิกสำหรับสถานการณ์การลงทะเบียนที่แตกต่างกัน, ปรับแต่งฟิลด์ที่คุณรวบรวม, และแสดงแบบฟอร์มเป็นวิดเจ็ตโมดัลหรืออินไลน์บนเว็บไซต์ของคุณ

## วิธีสร้างแบบฟอร์ม

ในการสร้างแบบฟอร์มการสมัครสมาชิกใหม่:

1. ไปที่ **Audience → Subscription forms**
2. คลิก **Create form**

<img src="/subscription-forms-1.webp" alt="หน้าแบบฟอร์มการสมัครสมาชิกพร้อมการ์ด Double Opt-In และ Subscription forms, ลิงก์ How to use, และปุ่ม Create form"/>
3. กำหนดค่าแบบฟอร์ม การแสดงตัวอย่างสดจะปรากฏทางด้านขวาและอัปเดตเมื่อคุณเปลี่ยนการตั้งค่า

### กำหนดค่าการตั้งค่าทั่วไป

กำหนดค่าฟิลด์ต่อไปนี้

> **ทุกฟิลด์ในส่วนนี้จำเป็นต้องกรอก**

- **Internal form name:** ใช้ภายใน Pushwoosh เท่านั้น, ไม่แสดงให้ผู้สมัครสมาชิกเห็น ตัวอย่าง: "Newsletter signup"
- **Display type:** เลือกวิธีที่แบบฟอร์มจะปรากฏบนเว็บไซต์ของคุณ:
  - **Modal popup:** ป๊อปอัปโอเวอร์เลย์ที่ปรากฏทับหน้าเว็บเมื่อ **Trigger** ที่คุณตั้งค่าทำงาน, ตัวอย่างเช่น **Immediately** หรือหลังจากไม่กี่วินาที (ดู [ตั้งค่าเวลาของ Modal popup](#set-modal-popup-timing)) เหมาะสำหรับการสมัครรับจดหมายข่าวหรือข้อเสนอโปรโมชั่นที่คุณต้องการให้ผู้เข้าชมสังเกตเห็น
  - **Embedded inline:** แบบฟอร์มจะอยู่ในเนื้อหาของหน้าเว็บของคุณ (เช่น ในแถบด้านข้างหรือที่ด้านล่างของบทความ) ผู้เข้าชมจะเห็นเป็นส่วนหนึ่งของเลย์เอาต์หน้าเว็บ, ไม่ใช่ป๊อปอัปแยกต่างหาก
- **Privacy policy URL:** แบบฟอร์มจะแสดงช่องทำเครื่องหมายยินยอม ("I agree to the Privacy Policy") ที่ลิงก์ไปยัง URL นี้ ตัวอย่าง: `https://example.com/policy`


<img src="/subscription-forms-2.webp" alt="อินเทอร์เฟซการสร้างแบบฟอร์มการสมัครสมาชิกพร้อมชื่อแบบฟอร์มภายใน, ประเภทการแสดงผล, URL นโยบายความเป็นส่วนตัว, และการกำหนดค่าฟิลด์แบบฟอร์ม"/>


#### ตั้งค่าเวลาของ Modal popup

สำหรับ **Modal popup** เท่านั้น:

1. กำหนดว่าป๊อปอัปจะปรากฏบนหน้าเว็บเมื่อใด ในดรอปดาวน์ **Trigger** เลือก:
  - **Immediately** (ค่าเริ่มต้น)
  - After 3 seconds
  - After 5 seconds
  - After 10 seconds
2. ในดรอปดาวน์ **Frequency** เลือกความถี่ที่ผู้เข้าชมแต่ละคนจะเห็นป๊อปอัป:
  - **Once per visitor** (ค่าเริ่มต้น): หนึ่งครั้งต่ออุปกรณ์
  - **Once per session**: หนึ่งครั้งต่อเซสชันเบราว์เซอร์
  - **Always**: ทุกครั้งที่เข้าชมหน้าเว็บ

<img src="/subscription-forms-3.webp" alt="สร้างแบบฟอร์มการสมัครสมาชิกด้วยประเภทการแสดงผล Modal popup, ดรอปดาวน์ Trigger และ Frequency, และปุ่ม Add field"/>

### กำหนดค่าฟิลด์แบบฟอร์ม

แต่ละแบบฟอร์มจะมีฟิลด์ **Email** เป็นค่าเริ่มต้น (ไม่สามารถลบออกได้) คุณสามารถเพิ่มฟิลด์ได้อีกสูงสุดสี่ฟิลด์, รวมเป็นห้าฟิลด์

คลิก **+ First name**, **+ Last name**, **+ Phone number**, หรือ **+ Custom field** เพื่อเพิ่มฟิลด์

<Aside type="note">
ค่าจากฟิลด์ในตัวเหล่านี้จะถูกบันทึกไปยังแท็กมาตรฐาน: `first_name`, `last_name`, และ `phone` ฟิลด์ที่กำหนดเองจะบันทึกค่าไปยังแท็กที่คุณเลือกในการตั้งค่า **Linked tag**
</Aside>

สำหรับแต่ละฟิลด์, เลือก **Required** หากผู้เข้าชมต้องกรอก (ฟิลด์ที่จำเป็นจะแสดงเครื่องหมายดอกจัน `*`) ใช้ไอคอนถังขยะเพื่อลบฟิลด์

<img src="/subscription-forms-4.webp" alt="รายการฟิลด์แบบฟอร์มพร้อม Email, First name, Phone number, Last name, City และการกำหนดค่าฟิลด์สำหรับฟิลด์ที่เลือก"/>

#### สร้างฟิลด์ที่กำหนดเอง

1. คลิก **+ Custom field** ในรายการฟิลด์
2. ใต้ **Linked tag**, เลือกแท็ก Pushwoosh ที่จะเก็บค่าที่ส่งมาจากฟิลด์นี้ (ตัวอย่างเช่น `birthday`) คุณต้องสร้างแท็กไว้ล่วงหน้า
3. ตั้งค่า **Field label**: ข้อความที่ผู้เข้าชมเห็นถัดจากช่องป้อนข้อมูล (ตัวอย่างเช่น `Date of birth`)
4. ตั้งค่า **Placeholder (optional)** (ไม่บังคับ): ข้อความแนะนำภายในฟิลด์ที่ว่างเปล่า (ตัวอย่างเช่น `MM/DD/YYYY`)
5. เปิดหรือปิด **Required**

<img src="/subscription-forms-7.webp" alt="การกำหนดค่าฟิลด์ที่กำหนดเองพร้อม Linked tag, Field label, Placeholder, และช่องทำเครื่องหมาย Required"/>

### ปรับแต่งป้ายกำกับแบบฟอร์ม

โดยค่าเริ่มต้น, ข้อความทั้งหมดในแบบฟอร์มเป็นภาษาอังกฤษ หากต้องการแปลแบบฟอร์มเป็นภาษาอื่นหรือเปลี่ยนข้อความใดๆ, คลิก **Customize labels** ใต้การแสดงตัวอย่างสด

<img src="/subscription-forms-16.webp" alt="ไดอะล็อก Customize form labels พร้อมฟิลด์ Heading, Button, Privacy Policy Text, Privacy Policy Link Text, Success Message, Double Opt In Message, Email Label, และ Email Placeholder"/>

ในไดอะล็อก **Customize form labels**, คุณสามารถแก้ไข:

- **Heading**
- **Button**
- **Privacy Policy Text**
- **Privacy Policy Link Text**
- **Success Message**
- **Double Opt In Message** (ใช้ได้เฉพาะเมื่อเปิดใช้งาน double opt-in)
- **Label** และ **Placeholder** (ไม่บังคับ) สำหรับแต่ละฟิลด์

คลิก **Save** เพื่อใช้การเปลี่ยนแปลงของคุณ การเปลี่ยนแปลงจะปรากฏทันทีในการแสดงตัวอย่างสด แบบฟอร์มที่เผยแพร่จะอัปเดตหลังจากที่คุณบันทึกหรือเผยแพร่แบบฟอร์มการสมัครสมาชิก

### ดูตัวอย่างและบันทึกแบบฟอร์ม

การแสดงตัวอย่างสดจะปรากฏทางด้านขวาของอินเทอร์เฟซการสร้างแบบฟอร์มการสมัครสมาชิกและอัปเดตเมื่อคุณเปลี่ยนการตั้งค่า ใช้ **Reset preview** ใต้การแสดงตัวอย่างเพื่อคืนค่าการแสดงตัวอย่างเริ่มต้น

<Aside type="note">
การส่งทดสอบจาก **Preview** จะไม่สร้างผู้สมัครสมาชิกในโปรเจกต์ของคุณ
</Aside>

<img src="/subscription-forms-5.webp" alt="สร้างแบบฟอร์มการสมัครสมาชิกพร้อมการแสดงตัวอย่างสดทางด้านขวา, Reset preview, และปุ่ม Create ที่มุมบนขวา"/>

เมื่อคุณกำหนดค่าแบบฟอร์มเสร็จแล้ว, คลิก **Create** ที่มุมบนขวา

### คัดลอกโค้ดฝังและเพิ่มลงในเว็บไซต์ของคุณ

<Aside type="caution" icon="setting" title="ต้องการความช่วยเหลือจากนักพัฒนา">
คุณจะต้องได้รับความช่วยเหลือจากทีมนักพัฒนาของคุณเพื่อเพิ่มโค้ดฝังลงในเว็บไซต์ของคุณ
</Aside>

ไดอะล็อกจะเปิดขึ้นพร้อมโค้ดฝังสำหรับแบบฟอร์มของคุณ คลิก **Copy code** เพื่อคัดลอก snippet ไปยังคลิปบอร์ด

<img src="/subscription-forms-11.webp" alt="ไดอะล็อกโค้ดแบบฟอร์มโมดัลพร้อม snippet สคริปต์, คำแนะนำให้วางก่อนแท็ก body ปิด, และปุ่ม Copy code"/>

#### ตำแหน่งที่จะวางโค้ดฝังบนเว็บไซต์ของคุณ

เพิ่มสคริปต์ไปยัง HTML ของหน้าที่ควรจะทำงาน

- สำหรับ **Modal popup**, การวางสคริปต์ก่อนแท็ก `</body>` ปิดเป็นวิธีปกติ

- สำหรับ **Embedded inline**, วาง snippet ในตำแหน่งที่แน่นอนในมาร์กอัปของคุณที่คุณต้องการให้บล็อกแบบฟอร์มปรากฏ

<Aside type="tip" title="ปรับแต่งวิดเจ็ตด้วย CSS">
คุณสามารถลบล้างสไตล์เริ่มต้น (สี, ตัวอักษร, ระยะห่าง, และโมดัล) บนเว็บไซต์ของคุณได้โดยการตั้งค่าคุณสมบัติที่กำหนดเองของ CSS บนองค์ประกอบ `pushwoosh-subscribe-widget` [เรียนรู้เพิ่มเติม](/th/product/audience-data-and-segmentation/subscription-forms/customize-widget/)
</Aside>

### ลักษณะการแสดงผลประเภทต่างๆ บนเว็บไซต์ของคุณ

ตัวอย่างเหล่านี้แสดงให้เห็นว่าแบบฟอร์มแต่ละประเภทสามารถปรากฏบนหน้าเว็บจริงได้อย่างไร ป้ายกำกับฟิลด์และเครื่องหมายบังคับจะตรงกับที่คุณกำหนดค่าในตัวสร้างแบบฟอร์ม

<Tabs>
<TabItem label="Modal popup">

<img src="/subscription-forms-14.webp" alt="โอเวอร์เลย์การสมัครรับจดหมายข่าวแบบโมดัลบนหน้าเว็บพร้อมฟิลด์อีเมล, ชื่อ, โทรศัพท์, ช่องทำเครื่องหมายนโยบายความเป็นส่วนตัว, และปุ่ม Subscribe"/>

</TabItem>
<TabItem label="Embedded inline">

<img src="/subscription-forms-15.webp" alt="แบบฟอร์มการสมัครรับจดหมายข่าวแบบอินไลน์ในเนื้อหาหน้าเว็บพร้อมฟิลด์อีเมล, ชื่อ, โทรศัพท์, ช่องทำเครื่องหมายความเป็นส่วนตัว, และปุ่ม Subscribe"/>

</TabItem>
</Tabs>

## ขั้นตอนต่อไป

- [เปิดใช้งาน double opt-in](/th/product/audience-data-and-segmentation/subscription-forms/double-opt-in/) เพื่อต้องการการยืนยันทางอีเมลก่อนที่จะเพิ่มผู้สมัครสมาชิก
- [ปรับแต่งวิดเจ็ตแบบฟอร์มการสมัครสมาชิก](/th/product/audience-data-and-segmentation/subscription-forms/customize-widget/) เพื่อให้แบบฟอร์มเข้ากับเว็บไซต์ของคุณ
- [ตรวจสอบประสิทธิภาพของแบบฟอร์มและส่งออกผู้สมัครสมาชิก](/th/product/audience-data-and-segmentation/subscription-forms/form-analytics-and-export/) เพื่อติดตามผลลัพธ์และดาวน์โหลดข้อมูลผู้สมัครสมาชิก