วิธีสร้างแบบฟอร์มติดต่อใน WordPress อย่างง่ายดาย

เผยแพร่แล้ว: 2022-03-17

เมื่อคุณเรียกดูเว็บไซต์ใด ๆ ที่กำลังมองหาข้อมูลหรือผลิตภัณฑ์ คุณถูกทิ้งให้ต้องการทราบข้อมูลเพิ่มเติมหรือขอข้อมูลเพิ่มเติมมากกว่าหนึ่งครั้ง หากคุณต้องการป้องกันไม่ให้สิ่งนี้เกิดขึ้นบนเว็บไซต์ของคุณ ตรวจสอบให้แน่ใจว่าคุณมีสิ่งอำนวยความสะดวกทั้งหมดเพื่อให้ผู้เยี่ยมชมสามารถติดต่อคุณได้บนเว็บไซต์ของคุณ

สารบัญ

  • เหตุใดฉันจึงต้องมีแบบฟอร์มการติดต่อบนเว็บไซต์ของฉัน
  • เนลิโอ ฟอร์มส์
    • ติดตั้งปลั๊กอินแบบฟอร์ม Nelio
    • สร้างแบบฟอร์มแรกของคุณ
    • แก้ไขแบบฟอร์มการติดต่อ
    • การส่งแบบฟอร์มที่กรอกเสร็จแล้ว
    • เพิ่มแบบฟอร์มไปยังเพจและโพสต์ของคุณ
    • รับคำขอติดต่อจากผู้เข้าชมของคุณ
  • บทสรุป

เหตุใดฉันจึงต้องมีแบบฟอร์มการติดต่อบนเว็บไซต์ของฉัน

ไม่ว่าคุณจะมีธุรกิจขนาดเล็ก ร้านค้าออนไลน์ หรือบล็อกข้อมูล ไม่ช้าก็เร็ว คุณต้องการให้ผู้เยี่ยมชมติดต่อคุณได้ วิธีแก้ปัญหาที่เร็วและง่ายที่สุดคือการรวมที่อยู่อีเมลในเว็บของคุณเพื่อให้พวกเขาสามารถติดต่อคุณได้ แต่ฉันเกรงว่านี่อาจไม่ใช่ความคิดที่ดี: คุณจะได้รับสแปมจำนวนมาก คุณจะไม่รู้ว่าพวกเขาอยู่ที่ไหน พบคุณ (หากพวกเขามาเพราะพวกเขาเห็นที่อยู่บนเว็บหรือที่อื่น ๆ ) และแน่นอนว่าในอีเมลที่คุณได้รับ คุณจะไม่มีข้อมูลบางอย่างที่คุณต้องการทราบ

ตัวอย่างแบบฟอร์มการติดต่อ
ตัวอย่างแบบฟอร์มการติดต่อที่สร้างด้วย Nelio Forms

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

  • กำหนดรูปแบบต่างๆ ในหน้า โพสต์ วิดเจ็ต
  • ระบุข้อมูลที่จำเป็นที่คุณต้องการให้พวกเขากรอก
  • แสดงข้อความยืนยันหรือข้อผิดพลาดเมื่อกรอกแบบฟอร์ม
  • ระบุตำแหน่งที่คุณต้องการรับข้อมูลจากแบบฟอร์มที่กรอก
  • จัดเก็บข้อมูลการติดต่อตาม RGPD
  • ทราบที่มาของข้อมูลที่ได้รับ
  • ควบคุมสแปม
  • ส่งข้อมูลไปยังผู้ใช้หลายคน
  • รวมเข้ากับแพลตฟอร์มอื่น ฯลฯ

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

มีปลั๊กอินให้เลือกมากมาย ปลั๊กอินแบบฟอร์มการติดต่อที่ได้รับความนิยมมากที่สุดตัวหนึ่ง Contact Form 7 ใช้งานง่าย แต่ไม่มีโปรแกรมแก้ไขภาพเพื่อสร้างแบบฟอร์ม และคุณต้องเรียนรู้ไวยากรณ์ของมัน ทางเลือกอื่นที่นำเสนอโดยปลั๊กอินส่วนใหญ่ เช่น WPForms, Fomidable Form Builder, HubSpot หรือ Ninja Forms คือการเพิ่มกรอบงาน WordPress พร้อมแผงควบคุมสำหรับออกแบบแบบฟอร์มการติดต่อ

ในโพสต์นี้ เราต้องการพูดคุยเกี่ยวกับปลั๊กอินแบบฟอร์มการติดต่อที่แตกต่างจากปลั๊กอินก่อนหน้านี้: Nelio Forms

เนลิโอ ฟอร์มส์

Nelio Forms เป็นปลั๊กอินที่เราเพิ่งเปิดตัว คุณมีเวอร์ชันฟรีในไดเรกทอรีปลั๊กอินของ WordPress

ปลั๊กอิน Nelio Forms ใน WordPress.org
ปลั๊กอิน Nelio Forms ใน WordPress.org

เหตุใดเราจึงเปิดตัวปลั๊กอินแบบฟอร์มการติดต่อใหม่ หากมีอย่างอื่นอยู่แล้ว เนื่องจากเราใช้ปลั๊กอินอื่นเพื่อสร้างแบบฟอร์มมาระยะหนึ่งแล้ว และประสบการณ์ของเราก็ไม่ใช่สิ่งที่เราจะชอบ Nelio Forms เป็นปลั๊กอินที่รวมเข้ากับตัวแก้ไขบล็อกของ WordPress ดังนั้นจึงไม่ได้ใช้เฟรมเวิร์กตัวสร้างแบบฟอร์มที่กำหนดเอง

มาดูกันว่าคุณต้องปฏิบัติตามขั้นตอนใดบ้างเพื่อสร้างแบบฟอร์มการติดต่ออย่างง่ายดายด้วย Nelio Forms

ติดตั้งปลั๊กอินแบบฟอร์ม Nelio

มีการติดตั้ง Nelio Forms เช่นเดียวกับปลั๊กอินอื่นๆ จากแดชบอร์ดของ WordPress ให้คลิกที่ "เพิ่มใหม่" และในเครื่องมือค้นหา พิมพ์ "Nelio Forms" จากนั้นติดตั้งและเปิดใช้งานปลั๊กอิน

ติดตั้งและเปิดใช้งานปลั๊กอิน Nelio Forms
ติดตั้งและเปิดใช้งานปลั๊กอิน Nelio Forms

สร้างแบบฟอร์มแรกของคุณ

เมื่อติดตั้งและเปิดใช้งานแล้ว ในแถบด้านข้างของเมนู คุณจะพบตัวเลือก Nelio Forms คลิกที่ "เพิ่มใหม่:"

เพิ่มแบบฟอร์มการติดต่อใหม่กับ Nelio Forms
เพิ่มแบบฟอร์มการติดต่อใหม่ด้วย Nelio Forms

ตัวแก้ไขบล็อกจะเปิดขึ้นและคุณจะสังเกตเห็นได้อย่างรวดเร็วว่าเครื่องมือดังกล่าวดูคล้ายกับตัวแก้ไขโพสต์และหน้า แต่ในกรณีนี้จะแสดงข้อมูลขั้นต่ำที่คุณต้องใส่ในรูปแบบใดๆ: ชื่อแบบฟอร์มเพื่อระบุตัวแก้ไข ฟิลด์ ( โดยค่าเริ่มต้นจะแสดงช่องข้อความ) เพื่อกรอกข้อมูลและปุ่ม "ส่ง"

สร้างแบบฟอร์มการติดต่อใหม่ด้วย Nelio Forms
การสร้างแบบฟอร์มการติดต่อใหม่ด้วย Nelio Forms

แก้ไขแบบฟอร์มการติดต่อ

หลังจากตั้งชื่อแบบฟอร์มของคุณแล้ว คุณควรเพิ่มป้ายชื่ออธิบายให้กับแต่ละฟิลด์หากคุณต้องการให้สามารถเข้าถึงได้ (คุณมีตัวเลือกว่าจะแสดงป้ายกำกับนี้ในแบบฟอร์มหรือไม่)

แต่ละช่องต้องมีป้ายอธิบาย
แต่ละช่องต้องมีป้ายอธิบาย

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

คุณสมบัติช่องป้อนข้อความ
คุณสมบัติช่องป้อนข้อความ

ในลักษณะเดียวกับที่คุณเพิ่มบล็อกใหม่ใดๆ ในตัวแก้ไขบล็อกของ WordPress คุณสามารถแก้ไขแบบฟอร์มโดยแก้ไขเค้าโครงและเพิ่มบล็อกต่างๆ

บล็อกที่สามารถเพิ่มลงในแบบฟอร์ม
บล็อกที่สามารถเพิ่มลงในแบบฟอร์มได้

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

  • ช่องป้อนข้อความ
  • ฟิลด์พื้นที่ข้อความ
  • ฟิลด์จดหมาย
  • สนามโทรศัพท์,
  • ฟิลด์รหัสผ่าน
  • ช่องทำเครื่องหมาย
  • ช่องตัวเลขและ
  • ช่อง URL
ช่องของแบบฟอร์มการติดต่อใน Nelio Forms
ช่องของแบบฟอร์มการติดต่อในแบบฟอร์ม Nelio

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

คุณสมบัติของช่องตัวเลขใน Nelio Forms
คุณสมบัติของช่องตัวเลขในแบบฟอร์ม Nelio

และในกรณีของช่องทำเครื่องหมาย คุณสามารถระบุได้ว่ามีการทำเครื่องหมายหรือไม่เลือกโดยค่าเริ่มต้น:

คุณสมบัติของช่องทำเครื่องหมายใน Nelio Forms
คุณสมบัติของช่องทำเครื่องหมายในแบบฟอร์ม Nelio

สุดท้าย คุณสามารถแก้ไขปุ่มส่งได้เหมือนกับปุ่มอื่นๆ กล่าวคือ คุณสามารถเปลี่ยนรูปแบบ สี เส้นขอบ ความกว้าง แบบอักษร หรือมิติข้อมูล รวมทั้งกำหนด URL หรือจุดยึดที่จะไปหลังจากส่งแบบฟอร์ม คุณยังสามารถเพิ่มคลาส CSS เพิ่มเติมเข้าไปได้อีกด้วย

คุณสมบัติปุ่มส่งแบบฟอร์มติดต่อ
คุณสมบัติของปุ่มส่งของแบบฟอร์มการติดต่อ

อย่างที่คุณเห็น การสร้างแบบฟอร์มอย่างที่คุณเห็นในภาพแรกของโพสต์นี้ทำได้ง่ายพอๆ กับการเขียนโพสต์ในตัวแก้ไขบล็อก

การแก้ไขแบบฟอร์มการติดต่อ Nelio Forms
การแก้ไขแบบฟอร์มการติดต่อ Nelio Forms

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

หลังจากสร้างแบบฟอร์มแล้ว คุณต้องระบุตำแหน่งที่คุณต้องการให้ส่งแบบฟอร์มเมื่อส่งแบบฟอร์มแล้ว ในการดำเนินการดังกล่าว คุณสามารถเพิ่ม “การดำเนินการส่ง” ใหม่หรือแก้ไขรายการที่มีอยู่

เพิ่มการดำเนินการส่งในแบบฟอร์มการติดต่อ
เพิ่มการดำเนินการส่งในแบบฟอร์มการติดต่อ

ในปลั๊กอินเวอร์ชันฟรี คุณสามารถเพิ่มได้เฉพาะการแจ้งเตือนทางอีเมลเท่านั้น เมื่อได้รับการแจ้งเตือนใดๆ คุณจะต้องกำหนดการตั้งค่าบางอย่าง เช่น ที่อยู่อีเมลของผู้รับ ผู้ส่งอีเมล หรือตัวข้อความเอง สำหรับแต่ละฟิลด์อีเมล คุณสามารถพิมพ์ที่อยู่อีเมลที่ถูกต้อง เลือกฟิลด์อีเมลจากแบบฟอร์มของคุณ หรือใช้อีเมลของผู้ดูแลไซต์

การแก้ไขการดำเนินการส่งอีเมลใน Nelio Forms
การแก้ไขการดำเนินการส่งอีเมลใน Nelio Forms

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

ช่องที่คุณสามารถเพิ่มในข้อความอีเมลที่ส่งจากแบบฟอร์มการติดต่อ
ช่องที่คุณสามารถเพิ่มในข้อความอีเมลที่ส่งจากแบบฟอร์มการติดต่อ

เมื่อคุณเพิ่มข้อมูลแล้ว แบบฟอร์มการติดต่อของคุณจะสมบูรณ์ ในทำนองเดียวกัน คุณสามารถสร้างแบบฟอร์มการติดต่อต่างๆ ได้มากเท่าที่ต้องการ และแบบฟอร์มทั้งหมดจะสามารถแก้ไขได้จากตัวเลือก "แบบฟอร์มทั้งหมด" ในเมนู Nelio Forms

รายการแบบฟอร์มที่สร้างด้วย Nelio Forms
รายการแบบฟอร์มการติดต่อที่สร้างด้วย Nelio Forms

เพิ่มแบบฟอร์มไปยังเพจและโพสต์ของคุณ

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

เพิ่มแบบฟอร์มการติดต่อ block
เพิ่มบล็อกแบบฟอร์มการติดต่อ

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

ตัวเลือกในการเพิ่มแบบฟอร์ม Nelio Forms ใหม่
ตัวเลือกในการเพิ่มแบบฟอร์ม Nelio Forms ใหม่

เมื่อแทรกแล้ว ข้อดีอย่างหนึ่งของ Nelio Forms คือคุณสามารถแก้ไขแบบฟอร์มได้โดยตรงในขณะที่แก้ไขหน้าเหมือนกับบล็อกอื่นๆ เมื่อแก้ไข คุณจะเห็นว่าในปุ่ม "อัปเดต" จุดสีขาวปรากฏขึ้นทางด้านซ้ายของคำ (คล้ายกับการอัปเดตเทมเพลต) ซึ่งระบุว่าคุณต้องการบันทึกการเปลี่ยนแปลงที่คุณทำในแบบฟอร์มเองหรือไม่

ด้วยวิธีนี้ คุณสามารถเพิ่ม แก้ไข และแสดงแบบฟอร์มบนเพจของคุณได้ในลักษณะเดียวกับที่คุณทำกับบล็อกอื่นๆ ที่คุณมี

การแก้ไขหน้าแบบฟอร์ม Nelio
การแก้ไขหน้าแบบฟอร์ม Nelio

รับคำขอติดต่อจากผู้เข้าชมของคุณ

แค่นั้นแหละ! เราต้องเผยแพร่หน้าหรือโพสต์ที่มีแบบฟอร์มที่สร้างขึ้นเท่านั้น หากผู้เข้าชมกรอกแบบฟอร์มไม่ถูกต้อง จะมีการเตือนให้ตรวจสอบข้อมูลที่กรอก

แจ้งข้อผิดพลาดในการกรอกแบบฟอร์ม
แจ้งข้อผิดพลาดในแบบฟอร์มที่กรอก

ในไม่ช้า คุณจะได้รับการแจ้งเตือนพร้อมข้อมูลที่ผู้เยี่ยมชมกรอกในแบบที่คุณระบุไว้ในแบบฟอร์ม

ตัวอย่างอีเมลที่ได้รับจากแบบฟอร์มการติดต่อบนเว็บไซต์ Nelio Popups
ตัวอย่างอีเมลที่ได้รับจากแบบฟอร์มการติดต่อบนเว็บไซต์ Nelio Popups

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

บทสรุป

เราได้เห็นแล้วว่าการสร้างแบบฟอร์มการติดต่อด้วย Nelio Forms ด้วยการผสานรวมกับตัวแก้ไข WordPress นั้นทำได้ง่ายเหมือนกับการสร้างหน้าหรือโพสต์ใดๆ

สำหรับตอนนี้ เวอร์ชันฟรีนั้นเรียบง่ายมาก แต่มีทุกสิ่งที่คุณต้องการเพื่อสร้างแบบฟอร์มการติดต่อที่เว็บไซต์ของคุณต้องการ แบบฟอร์มการติดต่อทั้งหมดที่คุณจะพบบนเว็บไซต์นี้ เช่น สร้างด้วย Nelio Forms

สำหรับเวอร์ชันพรีเมียม เราหวังว่าจะมีคุณสมบัติอื่นๆ อีกมากมายที่คุณจะพบได้อธิบายไว้ในหน้า Nelio Forms แน่นอน หากคุณคิดว่าคุณต้องการฟังก์ชันเพิ่มเติม และ/หรือสนใจในเวอร์ชันพรีเมียม เราขอเชิญคุณกรอกแบบฟอร์มในหน้านั้น แล้วเราจะติดต่อกลับไป

อย่าลังเลที่จะติดตั้งและทดสอบปลั๊กอิน Nelio Forms (อย่าลืมว่าใช้งานได้ฟรี!) และแบ่งปันความประทับใจของคุณที่นี่

ภาพเด่นโดย Brooke Cagle บน Unsplash