การสร้างแบบฟอร์มติดต่อด้วย Elementor

วิธีการสร้างแบบฟอร์มติดต่อด้วย Form Widget ของ Elementor Pro

1. Login เข้าสู่ WordPress Admin เพื่อจัดการเว็บไซต์

2. (1) กดเมนู Page เพื่อสร้างหน้าเว็บไซต์ หรือหน้าเว็บไซต์ที่ต้องการสร้างแบบฟอร์มติดต่อ
    (2) เลือกหน้าที่ต้องการสร้างแบบฟอร์มติดต่อ

3. กด Edit with Elementor

4. กดแท็บ Elementor ในช่อง Search Widget ให้พิมพ์ Form จากนั้นลาก Form Widget มาวางบนหน้าเว็บไซต์ โดยจะเป็นแบบฟอร์มเริ่มต้นตามรูปด้านล่าง

แต่หากต้องการปรับแต่งแบบฟอร์มด้วยตัวเองก็สามารถทำได้ครับ

บทความนี้จะสอนวิธีการสร้างแบบฟอร์มที่มีรูปแบบดังต่อไปนี้

1. Name (ชื่อผู้ส่ง)
2. Surname (นามสุกลผู้ส่ง)
3. Subject (หัวข้อเรื่องที่ต้องการติดต่อ)
4. Email (อีเมลผู้ส่ง)
5. Message (เนื้อหา)

เพิ่มเติม คือ นำ Subject ที่กรอกในฟอร์มมาแสดงใน Mail Subject เมื่อส่งถึงปลายทาง และเสริมด้วย reCAPTCHA

วิธีการปรับแต่งแบบฟอร์มติดต่อให้เป็นในแบบของคุณเอง

1. Input Name

• Type : Text (ประเภทของ Input)
• Label : Name (ชื่อของ Input)
• Placeholder : กรุณากรอกชื่อ (คำอธิบายของ Input)
• Required : Yes (ตัวกำหนดบังคับการกรอกข้อมูลหรือไม่)
• Column Width : 50% (ตั้งค่าความกว้างของช่องกรอกข้อมูล)

2. Input Surname

• Type : Text
• Label : Surname
• Placeholder : กรุณากรอกนามสกุล
• Required : Yes
• Column Width : 50%

3. Input Email

• Type : Email (ต้องกรอก Email ให้ถูกตรง Format เช่น example@bangmod)
• Label : Email
• Placeholder : กรุณาระบุอีเมล
• Required : Yes
• Column Width : 100%

4. Input Subject

• Type : Text
• Label : Subject
• Placeholder : กรุณาระบุเรื่องที่ต้องการติดต่อ 
• Required : Yes
• Column Width : 100%

5. Input Message

• Type : Textarea (สามารถพิมพ์ข้อความยาวๆได้)
• Label : Message
• Placeholder : กรุณาระบุเรื่องที่ต้องการติดต่อ 
• Required : Yes
• Column Width : 100%
• Rows: 4 คือความสูงของช่องกรอก Message นี้สูง 4 แถว

วิธีการสร้าง reCAPTCHA V3 ให้กับหน้าแบบฟอร์มของเว็บไซต์

1. กดที่กล่องข้อความของแบบฟอร์ม
   กด Add Item

2. เลือก Type เป็น reCAPTCHA V3
Label : reCAPTCHA V3

เมื่อเสร็จสิ้นขั้นตอนที่ 2 แล้วจะพบข้อความแจ้งเตือนดังรูป เพราะว่ายังไม่ได้มีการลงทะเบียนและใส่ API Key ของ reCAPTCHA

ขั้นตอนการขอ API Key ของ Google reCAPTCHA

ไปที่เว็บไซต์ Google reCAPTCHA และ Login ด้วยอีเมลของ Google

กด เครื่องหมายบวก เพื่อเพิ่มโดเมน

• ป้ายกำกับ ให้ใส่ชื่อเว็บไซต์
• ประเภท reCAPTCHA เลือก reCAPTCHA เวอร์ชัน3
• โดเมน ทำการเพิ่มโดเมนที่ต้องการให้มี reCAPTCHA
• กดส่ง

เมื่อลงทะเบียนแล้วจะได้ Website Key และ Secret Key มา (ดังรูป) ให้ดำเนินการต่อจากข้อ 2

3. ไปที่ WordPress Admin กดเมนู Elementor > Intergrations

4. หัวข้อ reCAPTCHA V3 ให้กรอก Site Key และ Secret Key ที่ได้รับจากการลงทะเบียน ส่วน Score Threshold ให้ใส่ค่าระหว่าง 0-1 และ Default คือ 0.5 

5. เลื่อนลงไปด้านล่างและกด Save Changes

6. กลับไปที่หน้าเว็บไซต์ที่สร้างฟอร์มติดต่อ จะพบว่าใช้งาน reCAPTCHA V3 ได้แล้ว

ตั้งค่าการส่งอีเมลของ WordPress ด้วย Plugin WP Mail SMTP

วิธีการติดตั้งและเปิดใช้งาน Plugin WP Mail SMTP

1.  Login เข้าสู่ WordPress Admin เพื่อจัดการเว็บไซต์

2. (1) กดเมนู Plugin
(2) กดเมนู Add New

3. ในช่อง Search Plugins ให้พิมพ์ WP Mail SMTP

4. กด Install Now เพื่อติดตั้ง Plugin WP Mail SMTP

5. กด Activate เพื่อเปิดใช้งาน Plugin WP Mail SMTP 

วิธีการสร้าง Email Account บน Next Generation WordPress Hosting

1. Login เข้าสู่ Hosting ด้วย DirectAdmin Control Panel 

2. ในหัวข้อ E-mail Manager เลือก E-mail Accounts

3. กด CREATE ACCOUNT

4. ใส่ Username และ Password ที่ต้องการสร้าง และกด CREATE ACCOUNT

5. จะปรากฎหน้าต่างรายละเอียดการใชังานอีเมลหลังจากที่กดสร้าง

วิธีการตั้งค่า WP Mail SMTP เพื่อให้เว็บไซต์ WordPress สามารถส่งอีเมลได้

1. Login เข้าสู่ WordPress Admin เพื่อจัดการเว็บไซต์
2. กดที่เมนู WP Mail SMTP เพื่อทำการ Settings
3. กรอกข้อมูล From Name เป็นชื่อผู้ส่งที่แสดงเมื่อข้อความถึงปลายทาง

4.  เลือก Mailer เป็นบริการอีเมล สามารถเลือกใช้บริการส่งอีเมลของผู้ให้บริการรายใด
    กรณีนี้ให้เลือก Other SMTP เพราะเป็นการส่งอีเมลจากโฮสติ้งผ่าน SMTP Protocol

5. ใส่ SMTP Host, Encryption, SMTP Port, SMTP Username และ SMTP Password ซึ่งข้อมูลเหล่านี้จะได้รับหลังจากการสร้าง E-mail Account ซึ่งเราได้สร้าง E-mail Account ไว้ในขั้นตอนก่อนหน้าแล้ว ก็จะใส่ข้อมูลดังนี้

• SMTP Host : mail.bangmod.in.th
• Encryption : None
• SMTP Port : 587
• Auto TLS : No
• SMTP Username : mean@bangmod.in.th
• SMTP Password : รหัสผ่านของอีเมล

6. กด Save Settings

วิธีการทดสอบส่งอีเมล

เพื่อทดสอบว่าการตั้งค่าถูกต้องและใช้งานได้หรือไม่ สามารถทดสอบการส่งอีเมลผ่าน Email Test ของ Plugin WP Mail SMTP โดยกดที่แท็บ Tools > Email Test ใส่อีเมลที่ต้องการจะส่ง และกด Send Email

หากตั้งค่าถูกต้องและส่งอีเมลสำเร็จ หน้าตาของอีเมลที่ได้รับจะเป็นดังภาพครับ

วิธีการตั้งค่าการส่งข้อความจากแบบฟอร์มติดต่อไปยังอีเมลที่ต้องการ

1. กดที่แท็บ Email เพื่อตั้งค่าให้เวลาที่มีคนส่งข้อความผ่านฟอร์มแล้วมีการส่งข้อความไปที่อีเมลนั้น

• To คืออีเมลที่ต้องการให้รับข้อความ
• Subject คือเรื่องที่ต้องการให้แสดงเมื่อข้อความถึงอีเมลของผู้รับ
• From Email คือระบุในอีเมลว่าแบบฟอร์มนี้ถึงส่งถึงผู้รับด้วยอีเมลใด
• From Name คือระบุในอีเมลว่าแบบฟอร์มนี้ส่งถึงผู้รับด้วยชื่อใด
• Cc และ  Bcc หากมีอีเมลที่ต้องการ Cc และ Bcc ให้ระบุอีเมลนั้นลงไปครับ
• Meta Data เป็นข้อมูลเพิ่มเติมที่ต้องการส่งไปในอีเมลเช่น วันเวลา, หมายเลขไอพี หรือหน้าเว็บไซต์ที่ส่งแบบฟอร์ม เป็นต้น

หากต้องการใช้ Subject เป็นข้อความที่มีคนกรอกมาจาก Input Subject สามารดำเนินการได้ดังนี้

• ไปที่ Form Fields เลือก Input Subject
• กด ADVANCED
• คัดลอก Shortcode

• กลับมาที่แท็บ Email นำ Shortcode ที่คัดลอกมาวางในช่อง Subject