วิธีการตั้งค่าแบบฟอร์มการติดต่อใน WordPress โดยใช้ธีมบริดจ์

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

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

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

ฟิลด์ทั้งหมดเป็นฟิลด์บังคับ และใช้ JavaScript เพื่อตรวจสอบความถูกต้อง นอกจากนี้ เราสามารถจัดคิวสินทรัพย์ JavaScript โดยใช้ WP_enqueue_script() ในฟังก์ชันหลักของ WordPress phptemplate.php ที่จุดเริ่มต้นของไฟล์นี้ มีเทมเพลตการติดต่อที่มีชื่ออยู่ในไฟล์ด้านบน ในการประมวลผลข้อมูลจากแบบฟอร์มการติดต่อและเมล ส่วนที่กำหนดไว้ในโค้ดด้วย WP_ajax action hooks ในการตั้งค่าหัวเรื่องอีเมลติดต่อและเนื้อหาเนื้อหา อีเมลจะได้รับข้อมูลแบบฟอร์ม ที่อยู่ผู้ส่งและผู้รับยังถูกตั้งค่าเมื่อมีการตั้งค่าส่วนหัวของเมล ใน WordPress คุณสามารถส่งอีเมลโดยใช้ SMTP

ฉันจะรวมแบบฟอร์มการติดต่อใน WordPress ได้อย่างไร

รูปภาพโดย – https://stackoverflow.com/questions/54128005/how-to-integrate-contact-form-7-with-woocommerce

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

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

ใส่รหัสต่อไปนี้ในโพสต์หรือหน้าของคุณทันที คุณสามารถกรอก [contact-form-7] นอกเหนือจากการส่ง [contact-form-7] คุณจะต้องให้ข้อมูลพื้นฐานทันทีที่คุณอัปโหลดรหัสย่อ แบบฟอร์มการติดต่อจะขอให้คุณระบุชื่อของคุณ ที่อยู่อีเมลคือที่อยู่อีเมลที่จะใช้ในการส่ง ข้อมูลแบบฟอร์มการติดต่อ เมื่อคุณส่งแบบฟอร์มการติดต่อ คุณจะได้รับอีเมลที่มีหัวเรื่องว่า "คำขอที่อยู่" เมื่อคุณส่งแบบฟอร์มการติดต่อ คุณจะได้รับข้อความนี้ นอกจากนี้ ข้อมูลแบบฟอร์มการติดต่อจะต้องถูกส่งโดยใช้ URL ที่ให้ไว้ URL นี้ควรชี้ไปที่หน้าที่เหมาะสมบนหน้าที่แสดงแบบฟอร์ม เมื่อคลิกที่ปุ่ม “บันทึกการเปลี่ยนแปลง” หลังจากกรอกข้อมูลทั้งหมดของคุณแล้ว คุณสามารถทำการเปลี่ยนแปลงใดๆ ได้ตามต้องการ เมื่อคุณคลิกปุ่ม 'แสดงตัวอย่าง' แล้ว คุณจะเห็นแบบฟอร์มของคุณ ตอนนี้คุณสามารถเผยแพร่โพสต์หรือเพจได้ตราบใดที่ทุกอย่างดำเนินไปอย่างราบรื่น หากคุณต้องการใช้แบบฟอร์มการติดต่อในหน้าอื่นที่ไม่ใช่หน้าแรกของบล็อก คุณจะต้องเพิ่มรหัสพิเศษ ในขั้นตอนแรก ให้เขียนประโยคต่อไปนี้ = 'action' – 'name' – 'Contact-form' หากต้องการใช้แบบฟอร์มการติดต่อ โปรดป้อนชื่อผู้ติดต่อ แม้ว่าชื่อจะเป็นอะไรก็ได้ที่คุณต้องการ แต่ควรมีคำว่า 'ติดต่อ' เพื่อให้ชื่อโดดเด่น ตัวอย่างเช่น หากคุณต้องการใช้แบบฟอร์มติดต่อที่ http://www.example.com/contact-form/ คุณจะต้องเขียนบรรทัดต่อไปนี้ในโพสต์หรือเพจของคุณ: สิ่งที่คุณต้องทำคือการดำเนินการโทร * contact-form *name *contact-form-name *url *://www.example.com/contact-form/ หลังจากที่คุณเพิ่มบรรทัดแล้ว คุณจะต้องกรอกข้อมูลของคุณในแบบฟอร์ม ข้อมูลนี้สามารถพบได้ในการตั้งค่าบัญชี OptinMonster ข้อมูลนี้มีความสำคัญอย่างยิ่งเนื่องจากมีที่อยู่อีเมล หลังจากที่คุณกรอกข้อมูลทั้งหมดแล้ว ให้คลิกปุ่ม 'บันทึกการเปลี่ยนแปลง'

วิธีสร้างปลั๊กอินใหม่ใน WordPress

สร้างปลั๊กอิน WordPress ใหม่ หากคุณต้องการใช้ WordPress เป็นเว็บไซต์ ส่วนปลั๊กอินสามารถพบได้ที่มุมบนขวาของหน้า “WPForms” สามารถพบได้โดยคลิกใหม่ เปิดใช้งานปลั๊กอินและไปที่เมนูการตั้งค่าเพื่อดูการตั้งค่าของคุณ หากต้องการเพิ่มแบบฟอร์ม ให้ไปที่ส่วน "แบบฟอร์ม" แล้วคลิกปุ่ม "เพิ่มใหม่" ในช่อง "ชื่อแบบฟอร์ม" กรอกข้อมูลต่อไปนี้ ที่ปุ่ม "ไดนามิก" ให้ระบุฟิลด์ "ประเภทแบบฟอร์ม" ป้อนวลี "ข้อความ" ลงในฟิลด์ "ประเภทฟิลด์" คุณจะป้อนบริบทหากคุณป้อน "FIELD NAME" ในช่อง "MEMORY NAME" สามารถเลือกปุ่ม "เพิ่ม" ได้ เลือกส่วน "แบบฟอร์ม" ของปลั๊กอิน WPForms จากเมนู "การตั้งค่า" ปุ่ม "เพิ่มใหม่" จะปรากฏในส่วน "แบบฟอร์ม" ป้อนข้อมูลต่อไปนี้ในช่อง "ชื่อแบบฟอร์ม": ในการกรอกแบบฟอร์ม ป้อนข้อมูลต่อไปนี้ในฟิลด์ "ประเภทแบบฟอร์ม" เมื่อคลิก "URL" คุณจะสามารถเข้าถึงเมนูแบบเลื่อนลง "ประเภทฟิลด์" หลังจากป้อนข้อมูลของคุณแล้ว คุณสามารถเลือกฟิลด์ต่อไปนี้: ” ชื่อฟิลด์” ป้อนข้อมูลต่อไปนี้ในฟิลด์ "GET Variable": *br ในฟิลด์ "Path" ป้อนข้อมูลต่อไปนี้ ในฟิลด์ "Query String" คุณสามารถป้อนข้อมูลต่อไปนี้: หลังจากคุณคลิก "เพิ่ม" คุณจะได้รับแจ้งให้เพิ่มเนื้อหาของคุณเอง เมื่อคลิกที่ปุ่ม "แก้ไข" คุณสามารถเปลี่ยนการตั้งค่าสำหรับส่วน "แบบฟอร์ม" โดยการเลือก "บริบท" คุณสามารถเปลี่ยนฟิลด์ "ฟิลด์แบบฟอร์ม" ป้อนข้อมูลต่อไปนี้ลงในส่วน "ค่าแบบฟอร์ม": *br. เมื่อป้อนข้อมูลต่อไปนี้ลงในช่อง "ส่งแบบฟอร์ม" คุณสามารถดำเนินการส่งแบบฟอร์มได้ หลังจากคลิกปุ่ม "อัปเดต" คุณจะเข้าสู่หน้าต่างใหม่ที่คุณสามารถอัปเดตได้ ทั้งหมดที่เราต้องการคือการเสร็จสิ้นอย่างรวดเร็ว แบบฟอร์มนี้จะส่งข้อมูลจากตัวแปร GET "บริบท" ไปยังบัญชีผู้ติดต่อคงที่ของคุณ


ฉันสามารถฝังแบบฟอร์มการติดต่อลงในไฟล์เทมเพลตของฉันได้หรือไม่

ภาพโดย – https://www.mybloggertricks.com/2011/07/create-contact-form-with-file-upload.html

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

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