Contact Form 7 คือ ปลั๊กอินที่ใช้สร้าง Contact form ตามชื่อเลยค่ะ โดยเมื่อผู้ติดต่อทำการกรอกข้อมูลในแบบฟอร์มติดต่อของเราและกดส่ง ข้อความนั้นก็จะถูกส่งไปยังอีเมลของเรา ซึ่งเราก็จะสามารถที่จะตอบผ่านอีเมลของเราได้เลย
ตัวอย่างการใช้งาน Contact Formหลังจากติดตั้งปลั๊กอินแล้ว ให้เราไปที่เมนู
Contact > Contact Forms

ปลั๊กอินจะสร้างฟอร์มพร้อมใช้ไว้ให้เราแล้ว 1 ฟอร์ม ซึ่งเป็นแบบฟอร์มติดต่อพื้นฐาน สามารถก๊อปปี้
Shortcode ไปใช้งานได้ ทันที โดยระบบจะตั้งค่าส่งไปยังอีเมลของแอดมินโดยอัตโนมัติ

การนำ Contact form ไปใช้ก็เพียงแค่วาง Shortcode ไว้ในหน้าและตำแหน่งที่เราต้องการให้แสดงแบบฟอร์ม

เราก็จะได้ Contact form ง่ายๆ ไว้ใช้งานแล้ว

การสร้างฟอร์มเรา สามารถที่จะแก้ไขฟอร์มเดิมที่มีอยู่แล้ว หรือสร้างฟอร์มใหม่ก็ได้ โดยในแต่ละเว็บอาจจะมีหลายฟอร์ม เช่น ฟอร์มสำหรับติดต่อธรรมดา ฟอร์มสำหรับติดต่อขอใช้บริการ ฟอร์มสำหรับติดต่อขอความช่วยเหลือ Support เป็นต้น
วิธีการสร้างฟอร์มก็ไปที่เมนู
Contact > Add New จากนั้นคลิกที่ปุ่ม Add New เลยก็ได้ หรือเลือกภาษาแล้วคลิกที่ปุ่ม Add New ที่อยู่ด้านข้าง

เสร็จแล้วก็กรอกชื่อฟอร์มในช่อง
Title

ระบบจะสร้างโครงสร้างของฟอร์มพื้นฐานไว้ให้เราเรียบร้อย

เพิ่มตัวเลือกฟอร์มที่เราต้องการ เช่น หากเราต้องการให้มีตัวเลือกแบบ
drop down menu ในฟอร์ม ก็คลิกเพื่อเพิ่ม

จากนั้นเราก็ทำใส่ค่าต่างๆ ที่เราต้องการให้มี โดยไม่จำเป็นต้องเปลี่ยนช่อง
Name นะคะ หากต้องการให้แบบฟอร์มนั้นจำเป็นต้องเลือก คือถ้าไม่เลือกก็จะไม่สามารถส่งข้อความได้ ก็ให้เราติ๊กที่ช่อง
Required field ด้วย จากนั้นก็คลิกที่ปุ่ม
Insert tag
ระบบ ก็จะทำการแทรกโค้ดของฟอร์มลงไปในแบบฟอร์มของเรา โดยเราสามารถที่จะเพิ่มข้อความได้ โดยใช้โค้ด html ง่ายๆ เราก็เพียงแค่ลอกจากแถวก่อนหน้าก็ได้

แบบฟอร์มที่เราสร้างเสร็จแล้ว

คลิกที่ปุ่ม
Save เพื่อนำฟอร์มไปใช้

ระบบก็จะสร้าง shortcode ให้เรานำไปใช้งาน

ฟอร์มที่ได้จากการสร้างก่อนหน้านี้

แต่เดี๋ยวก่อน นี่เป็นเพียงแค่การสร้างฟอร์มเท่านั้น เรายังต้องสร้างเนื้อหาของอีเมลที่จะถูกส่งไปยังอีเมลของเราในขั้นตอนต่อไป
Mailหลังจากที่เราสร้างฟอร์เสร็จแล้ว ขั้นตอนต่อมาก็คือต้องมาสร้างโครงสร้างของเมลที่จะส่งไปหาเรา โดยการคลิกที่แท็บ
Mail เพื่อทำการตั้งค่า
ระบบ จะแสดง shortcode ของ Form แต่ละส่วนที่เราสร้างไว้ก่อนหน้านี้ โดยตรงที่เอามาใช้งานก็คือส่วนของ Name ที่เราบอกว่าไม่ต้องเปลี่ยนนั่นเองค่ะ โดยให้เราทำการนำแท็กเหล่านี้ไปวางในส่วนต่างๆ ที่เราต้องการ ส่วนช่อง
To ก็คืออีเมลที่จะถูกส่งไปถึงนั่นเอง ในรูปด้านล่างนี้เราไม่จำเป็นต้องแก้ไขอะไรเลยค่ะ ใช้ตามที่ระบบตั้งมาให้แล้วก็ได้

และในช่อง
Massage Body ก็ คือส่วนที่จะแสดงในส่วนของข้อความในอีเมลของเรานั่นเอง เราสามารถเรียงลำดับก่อนหลังยังไงก็ได้ หรือจะใส่ข้อความอะไรในอีเมลก็ได้ อันนี้แล้วแต่ความต้องการของเราค่ะ เมื่อเสร็จแล้วก็อย่าลืมกด
Save ด้วยนะคะ

ตัวอย่างเมลที่จะส่งถึงเราโดยจะเห็นว่ามีการเรียงเนื้อหาและข้อความตามที่เราได้เรียงไว้ก่อนหน้านี้ในส่วนของ
Mail นั่นเอง


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

การแนบไฟล์หากเราต้องการให้มีการส่งไฟล์ไปกับอีเมลได้ด้วย ในการการสร้างฟอร์ม ก็ให้เลือกแทรก
file ลงไปในฟอร์ม โดยกำหนดขนาดในช่อง
File size limit (bytes)ไฟล์ที่อนุญาติให้อัพโหลดในช่อง
Acceptable file types แล้วก็กด Insert ในฟอร์มเหมือนเดิม

ปรับแต่งข้อความตามต้องการ

ขั้นตอนต่อไปก็คือการตั้งค่าในส่วนของ
Mail เหมือนที่เราทำก่อนหน้านี้ เพียงแต่รอบนี้เราก๊อปปี้เอาแท็กของ
file ไปใส่ในช่อง
File Attachments แทน

อีเมลที่มีการแนบไฟล์มาด้วย
Captchaคือการให้ผู้ที่จะส่งเมล ต้องกรอกรหัส Captcha เสียก่อน ถ้ารหัสถูกต้องเมลถึงจะทำการส่งออกไปได้ ใช้ในการกรอง
spam ค่ะ
หากเราแทรก CAPTCHA ในฟอร์ม ระบบจะให้เราติดตั้งปลั๊กอิน
Really Simple CAPTCHA เสียก่อน ก็ให้เราติดตั้งให้เสร็จแล้วมากดแทรก captcha อีกครั้งค่ะ

ปกติ เราจะแทรก captcha ไว้ก่อนหน้าปุ่มกด ส่ง นะคะ captcha นี้จะไม่จำเป็นต้องใส่ใน Mail นะคะ จึงจะไม่มีโค้ดนี้ให้ใช้ในแท็บ Mail ค่ะ
CAPTCHA ที่ได้ก็จะเป็นแบบนี้ค่ะ
เพียงเท่านี้เราก็สามารถสร้างแบบฟอร์มสำหรับให้ผู้อ่านหรือลูกค้าส่งข้อความหาเราแบบง่ายๆ ได้แล้วค่ะ
หากมีปัญหาส่งเมลไม่ออก ลองติดตั้งและตั้งค่าปลั๊กอิน
Postman SMTP ดูค่ะ
ที่มา:
http://www.wpthaiuser.com/contact-form-7/