วิธีการส่งแบบฟอร์มโดยไม่มีการรีเฟรชหน้าใน WordPress

ส่งแบบฟอร์มโดยไม่มีการรีเฟรชหน้า


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

ในบทความนี้เราจะแสดงวิธีเปิดใช้งานการส่ง Ajax ในแบบฟอร์ม WordPress ของคุณและป้องกันไม่ให้หน้าโหลดซ้ำ.

ทำไมเปิดใช้งานการส่งแบบฟอร์ม Ajax ใน WordPress

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

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

การส่งแบบฟอร์ม ajax

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

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

ในการเริ่มสร้างแบบฟอร์มคุณจะต้องติดตั้งก่อน ปลั๊กอิน WPForms บนเว็บไซต์ WordPress ของคุณ.

ไม่แน่ใจเหรอ ไม่มีปัญหา. คุณสามารถข้ามไปยังคำแนะนำของเราเกี่ยวกับวิธีการติดตั้งปลั๊กอิน WordPress เพื่อแยกสิ่งนั้นออกได้.

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

WPForms เสนอแม่แบบฟอร์ม 7 แบบให้เลือก ลองเลือก แบบฟอร์มการติดต่อง่าย ตัวเลือกสำหรับบทช่วยสอนนี้แล้วเพิ่มเขตข้อมูลอัปโหลดไฟล์ไปยังแบบฟอร์ม.

ตั้งค่าฟอร์ม WPForms

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

ลบเขตข้อมูลจาก wpforms

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

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

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

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

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

แบบฟอร์มอัพโหลดไฟล์

ขั้นตอนที่ 3: เปิดใช้งานการส่งแบบฟอร์ม Ajax

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

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

เปิดใช้งานการส่งแบบฟอร์ม ajax

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

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

การตั้งค่าการยืนยันแบบฟอร์มการอัพโหลดไฟล์

ขั้นตอนที่ 4: เผยแพร่ฟอร์มของคุณด้วยการส่ง Ajax

ขั้นตอนสุดท้ายคือการเผยแพร่แบบฟอร์มการเปิดใช้งานการส่ง Ajax ของคุณบนเว็บไซต์ของคุณ หากต้องการไปที่หน้าที่คุณต้องการให้แบบฟอร์มปรากฏ.

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

แบบฟอร์มฝัง wpforms

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

จากนั้นคุณสามารถคลิกที่ ประกาศ ปุ่มสุดท้ายปล่อยให้ฟอร์มใช้งานได้.

นั่นเป็นเรื่องง่ายไม่เป็นเช่นนั้น?

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map