วิธีฝัง Google Map ในแบบฟอร์มการติดต่อ (ด้วยหมุดแผนที่)

คุณต้องการที่จะแสดงแผนที่ในแบบฟอร์มการติดต่อของเว็บไซต์ของคุณ?

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

ในบทความนี้ เราจะแสดงวิธีการฝัง Google Map ในแบบฟอร์มการติดต่อด้วยหมุดแผนที่

ทำไมต้องฝัง Google Map ในแบบฟอร์มการติดต่อของคุณ?

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

และหากธุรกิจของคุณมีสถานที่ตั้งจริง คุณก็อาจจะเช่นกัน เพิ่ม Google Map ของตำแหน่งของคุณเองเพื่อกระตุ้นให้ผู้คนมาเยี่ยมชมร้านค้าของคุณ

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

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

อย่างที่กล่าวไปแล้ว มาดูวิธีการฝัง Google Map ในแบบฟอร์มการติดต่อกัน

วิธีฝัง Google Map ในแบบฟอร์มการติดต่อ

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

มี WPForms เวอร์ชันฟรีพร้อมฟีเจอร์ทั้งหมดที่คุณต้องการเพื่อสร้างแบบฟอร์มการติดต่อพื้นฐาน อย่างไรก็ตาม สำหรับบทช่วยสอนนี้ เราจะใช้ WPForms Pro เนื่องจากมี Addon ของ Google Map

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

เมื่อเปิดใช้งาน คุณต้องไปที่หน้า WPForms » การตั้งค่า เพื่อป้อนรหัสใบอนุญาตของคุณ คุณสามารถค้นหาข้อมูลนี้ได้ในพื้นที่บัญชี WPForms ของคุณ ตรวจสอบให้แน่ใจว่าคุณคลิกปุ่ม 'ยืนยันรหัส' เพื่อเปิดใช้งานใบอนุญาตของคุณ

ถัดไป คุณต้องไปที่ WPForms » Addons และค้นหา Geolocation Addon คุณสามารถใช้ตัวเลือกการค้นหาที่ด้านบนของหน้าจอ หรือเพียงแค่เลื่อนดูส่วนเสริมที่มี

เมื่อคุณพบแล้ว คุณควรติดตั้งส่วนเสริมโดยคลิกปุ่ม 'ติดตั้งส่วนเสริม'

เมื่อเปิดใช้งานส่วนเสริมตำแหน่งทางภูมิศาสตร์แล้ว คุณจะต้องกำหนดการตั้งค่า โดยไปที่ WPForms » Settings และคลิกที่แท็บ Geolocation

ในหน้านี้ คุณต้องเลือกผู้ให้บริการระบุตำแหน่งทางภูมิศาสตร์ สำหรับบทความนี้ เราจะเลือก Google สถานที่ API

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

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

การสร้างคีย์ Google สถานที่ API

คุณสามารถรับคีย์ API สำหรับ Google สถานที่ได้โดยไปที่เว็บไซต์ Google Cloud Console

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

เมื่อคุณพร้อมที่จะไปยังขั้นตอนต่อไป ให้คลิกที่ 'ตกลงและดำเนินการต่อ'

ถัดไป คุณจะต้องเลือกโปรเจ็กต์สำหรับคีย์ API เพียงคลิกที่ 'เลือกโครงการ' และคลิกโครงการที่คุณต้องการใช้จากรายการ

หากคุณไม่เคยสร้างโครงการมาก่อน หรือนี่คือเว็บไซต์ใหม่ที่คุณยังไม่ได้เพิ่มลงใน Google คุณควรคลิก 'โครงการใหม่' เพื่อตั้งค่า

ตอนนี้คุณควรจะอยู่ในหน้า 'API & Services' ซึ่งคุณสามารถเปิดใช้งาน API ที่จำเป็นสำหรับการแสดง Google Maps บนไซต์ของคุณได้ คุณจะต้องคลิกปุ่ม '+ เปิดใช้งาน API และบริการ' ที่ด้านบนของหน้า

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

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

ก่อนอื่น คุณต้องค้นหาและเปิดใช้งาน Places API เมื่อคุณพบแล้ว คุณจะต้องคลิกมัน ในหน้าถัดไป คุณควรคลิกปุ่ม 'เปิดใช้งาน'

หลังจากนั้น คุณควรทำสิ่งเดียวกันกับ Maps JavaScript API และ Geocoding API

เมื่อคุณเปิดใช้งาน API ทั้งสามแล้ว คุณสามารถสร้างคีย์ API ได้

ในเมนูด้านซ้าย คุณต้องไปที่ APIs & Services » Credentials

จากที่นี่ คุณจะสามารถคลิกปุ่ม '+ สร้างข้อมูลรับรอง' ที่ด้านบนของหน้าจอ จากนั้นเลือกตัวเลือก 'คีย์ API'

คีย์ API ของคุณจะถูกสร้างขึ้นและแสดงในหน้าต่างป๊อปอัป

ภายหลังในบทช่วยสอนนี้ คุณจะต้องคัดลอกคีย์นั้นไปยังการตั้งค่าของ WPForm ในตอนนี้ เรามาดูวิธีการวางข้อจำกัดบางประการเกี่ยวกับการใช้คีย์ API กัน

การจำกัดคีย์ Google สถานที่ API ของคุณ

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

ในการทำเช่นนั้น คุณต้องคลิกลิงก์ 'จำกัดคีย์' ที่ด้านล่างของป๊อปอัป 'คีย์ API ที่สร้าง' ในภาพหน้าจอด้านบน

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

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

ตอนนี้ คุณควรพิมพ์ชื่อโดเมนเว็บไซต์ของคุณลงในฟิลด์ 'New item' โดยใช้รูปแบบ *example.com/*

หากคุณจะใช้ Google Maps บนเว็บไซต์มากกว่าหนึ่งแห่ง คุณสามารถคลิกปุ่ม 'เพิ่มรายการ' และเพิ่มโดเมนได้มากเท่าที่คุณต้องการ

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

คุณต้องเลื่อนลงไปที่ส่วน "ข้อจำกัด API" ของหน้าและเลือกตัวเลือก "จำกัดคีย์" นี่จะแสดงรายการแบบเลื่อนลงที่คุณควรทำเครื่องหมายที่ช่อง 'Geocaching API', 'Maps JavaScript API' และ 'Places API'

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

โปรดทราบว่าการตั้งค่าอาจใช้เวลาถึง 5 นาทีจึงจะมีผล

การเพิ่มคีย์ Google API ในการตั้งค่า WPForms

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

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

ตอนนี้คุณต้องกลับไปที่เว็บไซต์ของคุณซึ่งควรจะยังอยู่ในหน้า WPForms » Settings » Geolocation

วางคีย์ลงในฟิลด์ Google สถานที่ API ในการตั้งค่า WPForms เมื่อคุณทำเสร็จแล้ว อย่าลืมคลิกปุ่ม 'บันทึกการตั้งค่า'

การสร้างแบบฟอร์มการติดต่อด้วย Google Map แบบฝังใน WordPress

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

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

เพียงลากบล็อคข้อความบรรทัดเดียวไปยังแบบฟอร์ม

ต่อไป เราจะปรับแต่งการตั้งค่าของฟิลด์ ในการทำเช่นนั้น คุณต้องคลิกที่ฟิลด์เพื่อแสดงการตั้งค่า Single Line Text

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

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

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

การเพิ่มแบบฟอร์มการติดต่อไปยังเว็บไซต์ของคุณ

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

ระบบจะถามคุณว่าจะเพิ่มแบบฟอร์มลงในแบบฟอร์มที่มีอยู่หรือสร้างหน้าใหม่

สำหรับบทช่วยสอนนี้ เราจะคลิกปุ่ม 'สร้างหน้าใหม่'

ถัดไป คุณควรตั้งชื่อเพจแล้วคลิกปุ่ม 'ไปกันเถอะ!' ปุ่ม.

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

สิ่งที่คุณต้องทำคือคลิกปุ่ม 'เผยแพร่' เพื่อเผยแพร่แบบฟอร์ม

การดู Google Map ในแบบฟอร์มการติดต่อ

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

หากพวกเขาคลิกปุ่ม 'อนุญาต' ตำแหน่งปัจจุบันของพวกเขาจะถูกป้อนลงในฟิลด์ที่อยู่ และหมุดของตำแหน่งนั้นจะถูกเพิ่มลงในแผนที่

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

หากจำเป็นต้องเปลี่ยนที่อยู่ ก็สามารถพิมพ์ที่อยู่ใหม่หรือลากหมุดไปยังตำแหน่งอื่นบนแผนที่ได้

วิธีดูข้อมูลตำแหน่งของผู้ใช้ในแบบฟอร์ม

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

คุณจะต้องไปที่ WPForms » รายการ จากนั้นคลิกที่แบบฟอร์มการติดต่อของคุณ

ตอนนี้คุณจะเห็นรายการของข้อมูลที่ผู้ใช้กรอกสำหรับแบบฟอร์มนั้น

หากต้องการดูรายการใดรายการหนึ่ง เพียงคลิกลิงก์ 'ดู' ทางด้านขวา

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

ซึ่งรวมถึงหมุดบน Google แผนที่ ตำแหน่งของผู้ใช้ รหัสไปรษณีย์ และประเทศ ตลอดจนละติจูดและลองจิจูดโดยประมาณ

แน่นอน หากผู้ใช้ไม่ได้อนุญาตให้แบบฟอร์มทราบตำแหน่งของพวกเขา ข้อมูลตำแหน่งจะไม่ปรากฏ

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

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

หากคุณชอบบทความนี้ โปรดสมัครรับข้อมูลจากบทแนะนำวิดีโอ YouTube Channel สำหรับ WordPress คุณสามารถหาเราได้ที่ Twitter และ Facebook