วิธีฝัง 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