วิธีการฝังแบบฟอร์มบนเว็บไซต์ของคุณ (3 วิธี)

เผยแพร่แล้ว: 2022-09-01

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

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

สร้างแบบฟอร์ม WordPress ของคุณตอนนี้

ฉันจะเพิ่มแบบฟอร์มที่กรอกได้ในเว็บไซต์ของฉันได้อย่างไร

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

วิธีฝังแบบฟอร์มบนเว็บไซต์ของคุณ

เราจะแสดงให้คุณเห็น 3 วิธีในการเผยแพร่แบบฟอร์มใน WordPress อย่างง่ายดาย

ในบทความนี้

  • ฉันจะเพิ่มแบบฟอร์มที่กรอกได้ในเว็บไซต์ของฉันได้อย่างไร
  • ขั้นตอนที่ 1: ติดตั้งปลั๊กอิน WPForms
  • ขั้นตอนที่ 2: สร้างแบบฟอร์ม
  • ขั้นตอนที่ 3: ฝังแบบฟอร์มของคุณ
    • การใช้ปุ่มฝัง WPForms
    • การใช้ตัวแก้ไขบล็อก WordPress
    • การใช้รหัสย่อฝัง
  • ขั้นตอนที่ 4: เผยแพร่แบบฟอร์มของคุณ

มาเริ่มกันเลย.

WPForms เป็นปลั๊กอิน WordPress Form Builder ที่ดีที่สุด รับฟรี!

ขั้นตอนที่ 1: ติดตั้งปลั๊กอิน WPForms

WPForms home

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

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

ขั้นตอนที่ 2: สร้างแบบฟอร์ม

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

Add new form

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

เมื่อคุณวางเมาส์เหนือการเลือกของคุณ คุณจะเห็น 2 ตัวเลือก:

  1. ใช้เทมเพลต
  2. ดูการสาธิต

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

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

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

Preferred contact checkbox field

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

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

Conditional logic radio buttons

หากพวกเขาเลือกโทรศัพท์ พวกเขาสามารถให้หมายเลขโทรศัพท์ได้

ถึงเวลาเลือกวิธีที่คุณต้องการฝังแบบฟอร์มของคุณแล้ว

ขั้นตอนที่ 3: ฝังแบบฟอร์มของคุณ

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

การใช้ปุ่มฝัง WPForms

วิธีการฝังวิธีแรกคือเพียงใช้ปุ่ม ฝัง ที่ด้านบนของตัวแก้ไขแบบฟอร์ม

Template Embed Button

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

Embed to a Page

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

การใช้ตัวแก้ไขบล็อก WordPress

การฝังแบบฟอร์มจากตัวแก้ไขบล็อกของ WordPress เป็นอีกวิธีง่ายๆ ในการเพิ่มแบบฟอร์มของคุณลงในโพสต์หรือหน้า

เปิดหน้าที่คุณต้องการให้แบบฟอร์มปรากฏ แล้วคลิกไอคอนสีน้ำเงิน +

Embed from block editor

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

Widget embed options

หลังจากที่คุณทำการเลือกแล้ว คุณจะเห็นแบบฟอร์มที่ฝังอยู่ในเพจของคุณ

การใช้รหัสย่อฝัง

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

ปุ่มฝัง

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

Form short code embed option

รายการแบบฟอร์มของคุณในปลั๊กอิน WPForms

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

WPForms shortcode

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

Embed from block editor

แทนที่จะเลือกวิดเจ็ต WPForms อย่างที่เราเคยทำ เราจะเลือกวิด เจ็ ต Shortcode แทน

Embed a form with the shortcode widget

เมื่อคุณคลิกที่ช่องนั้น จะมีกล่องปรากฏขึ้นในตัวแก้ไขบทความของคุณ สิ่งที่คุณต้องทำคือวางรหัสย่อนั้นลงในช่อง

Embedding a form from shortcode

หากคุณดูตัวอย่างหน้า คุณจะเห็นว่าแบบฟอร์มถูกฝังเรียบร้อยแล้ว

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

Shortcode pasted in editor

และอีกครั้ง หลังจากวางในที่ที่คุณต้องการให้ปรากฏในเนื้อหา คุณสามารถดูหน้าตัวอย่างและดูว่าหน้านั้นถูกฝังไว้

วิธีนี้ใช้ได้ผลดีในการเพิ่มฟอร์มลงในส่วนท้ายของเว็บไซต์ของคุณ

ขั้นตอนที่ 4: เผยแพร่แบบฟอร์มของคุณ

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

Published contact form

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

สร้างแบบฟอร์ม WordPress ของคุณตอนนี้

ถัดไป รักษาความปลอดภัยแบบฟอร์มของคุณด้วย hCaptcha

คุณต้องการเพิ่มชั้นการป้องกันสแปมให้กับแบบฟอร์มของคุณหรือไม่? WPForms มีการผสานรวม hCaptcha ทำให้ง่ายต่อการทำ เรียนรู้วิธีรักษาความปลอดภัยแบบฟอร์ม WordPress ของคุณด้วย hCaptcha

พร้อมที่จะสร้างแบบฟอร์มของคุณแล้วหรือยัง? เริ่มต้นวันนี้ด้วยปลั๊กอินสร้างแบบฟอร์ม WordPress ที่ง่ายที่สุด WPForms Pro มีเทมเพลตฟรีมากมายและรับประกันคืนเงินภายใน 14 วัน

หากบทความนี้ช่วยคุณได้ โปรดติดตามเราบน Facebook และ Twitter เพื่อดูบทแนะนำและคำแนะนำเกี่ยวกับ WordPress ฟรีเพิ่มเติม