วิธีสร้างแบบฟอร์มที่อยู่เติมข้อความอัตโนมัติของ Google Maps

เผยแพร่แล้ว: 2021-09-28

คุณต้องการเรียนรู้วิธีสร้างแบบฟอร์มที่อยู่เติมข้อความอัตโนมัติของ Google Maps หรือไม่?

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

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

สร้างแบบฟอร์มกรอกที่อยู่อัตโนมัติของคุณตอนนี้

นี่คือสารบัญหากคุณต้องการก้าวไปข้างหน้า:

  1. ติดตั้งปลั๊กอิน WPForms
  2. เปิดใช้งานส่วนเสริมตำแหน่งทางภูมิศาสตร์
  3. กำหนดการตั้งค่าตำแหน่งทางภูมิศาสตร์
  4. สร้างแบบฟอร์มที่อยู่เติมข้อความอัตโนมัติของ Google Maps
  5. เพิ่มฟิลด์ที่อยู่ในแบบฟอร์มของคุณ
  6. เปิดใช้งานคุณสมบัติเติมข้อความอัตโนมัติของที่อยู่
  7. เพิ่มแบบฟอร์มการเติมข้อความอัตโนมัติของ Google Maps บนเว็บไซต์ WordPress ของคุณ

ฉันจะสร้างแบบฟอร์มที่อยู่การเติมข้อความอัตโนมัติของ Google Maps ได้อย่างไร

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

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

แบบฟอร์มกรอกที่อยู่ Google Maps อัตโนมัติ

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

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

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

มาดูวิธีสร้างแบบฟอร์มที่อยู่เติมข้อความอัตโนมัติของ Google Maps ด้วย WPForms และส่วนเสริมตำแหน่งทางภูมิศาสตร์

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

สิ่งแรกที่คุณต้องทำคือติดตั้งปลั๊กอิน WPForms เมื่อติดตั้ง WPForms แล้ว ให้คลิกที่ปุ่มเปิดใช้งาน

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

ขั้นตอนที่ 2: เปิดใช้งานส่วนเสริมตำแหน่งทางภูมิศาสตร์

เมื่อติดตั้ง WPForms แล้ว คุณจะสามารถเปิดส่วนเสริม ตำแหน่ง ทาง ภูมิศาสตร์ ได้

ตอนนี้เพื่อเปิดใช้งาน addon ตรงไปที่แดชบอร์ด WordPress ของคุณและคลิกที่ WPForms » Addons

ส่วนเสริม WPForms

ในแถบค้นหา ให้พิมพ์ Geolocation แล้วกดเพื่อเปิดใช้งาน

เปิดใช้งาน wpforms geolocation addon

ขั้นตอนที่ 3: กำหนดการตั้งค่าตำแหน่งทางภูมิศาสตร์

เมื่อคุณเปิดใช้งานส่วนเสริมตำแหน่งทางภูมิศาสตร์แล้ว คุณต้องกำหนดการตั้งค่า ในการดำเนินการนี้ ให้คลิกที่ WPForms » การตั้งค่า

การตั้งค่า wpforms

ในหน้าการตั้งค่า WPForms คลิก ตำแหน่งทางภูมิศาสตร์ จากแท็บด้านบน

configuration-geolocation-addon

ที่นี่คุณจะเห็นตัวเลือกต่างๆ ในการกำหนดค่าส่วนเสริมตำแหน่งทางภูมิศาสตร์:

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

select-Google-Maps-provider

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

เปิดใช้งานตำแหน่งปัจจุบัน

  • Google สถานที่ API : ในการเปิดใช้งานคุณลักษณะการเติมที่อยู่อัตโนมัติและแสดง Google แผนที่ภายในแบบฟอร์มของคุณ คุณจะต้องสร้างคีย์ API และเชื่อมต่อกับ WPForms

เพิ่ม google-maps-api-key

มาดูขั้นตอนการสร้างคีย์ API แบบสมบูรณ์กัน

สร้างคีย์ API จาก Google Developer Console

ไปที่ Google Developer Console และเลือกโครงการจากเมนู เลือกโครงการ ที่ด้านบน หากคุณไม่มีโปรเจ็กต์ที่สร้างไว้ก่อนหน้านี้ ให้คลิก โปรเจ็กต์ใหม่ เพื่อสร้าง โปรเจ็ กต์ใหม่

create-a-project-in-google-search-console

เมื่อคุณสร้างโครงการใหม่สำเร็จแล้ว ให้คลิก เปิดใช้งาน API และบริการ

เปิดใช้งาน api และบริการ

การดำเนินการนี้จะเปิด ไลบรารี Google API

google-api-library

จากที่นี่ คุณจะต้องเปิดใช้งาน 3 APIs:

  1. Geocoding API
  2. แผนที่ JavaScript API
  3. สถานที่ API

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

เปิดใช้งาน api

เมื่อคุณเปิดใช้งาน API ทั้งหมดของคุณแล้ว ให้กลับไปที่แดชบอร์ด Google Console และไปที่แท็บ ข้อมูลรับรอง

แท็บข้อมูลประจำตัวของคอนโซลการค้นหาของ Google

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

สร้างapi

ป๊อปอัปพร้อมคีย์ API จะเปิดขึ้น คลิกที่ตัวเลือก RESTRICT KEY ที่มุมล่างขวาของป๊อปอัป

จำกัด-api-key

หน้าใหม่จะเปิดขึ้น โดยคุณจะต้องกำหนดการตั้งค่าต่อไปนี้:

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

ข้อจำกัดของแอปพลิเคชัน

  • ข้อจำกัดของเว็บไซต์: เมื่อคุณเลือกผู้อ้างอิง HTTP ตัวเลือกใหม่จะปรากฏขึ้น ข้อจำกัดของเว็บไซต์ ที่นี่ คุณต้องเพิ่มชื่อโดเมนเว็บไซต์ของคุณเพื่อจำกัดคีย์ API ที่จะใช้โดยเว็บไซต์ที่ระบุเท่านั้น

เว็บไซต์ข้อจำกัด

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

จำกัด-api-key

การดำเนินการนี้จะเปิดดรอปดาวน์พร้อมตัวเลือก API หลายตัว เลือก API ต่อไปนี้จากดรอปดาวน์:

  • สถานที่ API
  • แผนที่ JavaScript API
  • Geocoding AP

เลือก Google APIs

เมื่อคุณเลือก API เสร็จแล้ว ให้คลิกปุ่ม บันทึก เพื่อบันทึกการตั้งค่าของคุณ

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

คัดลอกคีย์ api

ในการตั้งค่า WPForms ของคุณ ให้วางสิ่งนี้ลงในฟิลด์คีย์ API ใต้ Google สถานที่ API และคลิกที่ปุ่ม บันทึกการตั้งค่า

เพิ่มคีย์ Google Maps api ลงใน wpforms

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

ขั้นตอนที่ 4: สร้างแบบฟอร์มที่อยู่เติมข้อความอัตโนมัติของ Google Maps

เมื่อตั้งค่า API เสร็จแล้ว ก็ถึงเวลาสร้างแบบฟอร์มที่อยู่เติมข้อความอัตโนมัติของ Google Maps

ก่อนอื่นเราต้องสร้างแบบฟอร์มใหม่โดยใช้ WPForms ไปที่ WPForms » เพิ่มใหม่ เพื่อสร้างแบบฟอร์มใหม่

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

WPForms-template-library

คุณสามารถเลือกเทมเพลตใดก็ได้และใช้บนเว็บไซต์ของคุณ

ที่นี่เราจะเลือกเทมเพลต แบบฟอร์มการติดต่ออย่างง่าย คลิกที่เทมเพลตเพื่อดูแบบสดบนแดชบอร์ดของตัวสร้างฟอร์ม

แบบฟอร์มการติดต่อแบบง่าย

ด้านล่างนี้คุณสามารถตรวจสอบแดชบอร์ดตัวสร้างแบบฟอร์ม WPForms จากตัวสร้างนี้ คุณสามารถเพิ่มฟิลด์เพิ่มเติมในแบบฟอร์มการติดต่อของคุณได้

กรอกที่อยู่แบบฟอร์มอัตโนมัติ

ขั้นตอนที่ 5: เพิ่มฟิลด์ที่อยู่ในแบบฟอร์มของคุณ

ตอนนี้เรามีแบบฟอร์มของเราพร้อมแล้ว เราต้องเพิ่ม ฟิลด์ที่อยู่

ทางด้านซ้าย จากส่วน ฟิลด์แฟนซี ให้ลากฟิลด์ที่อยู่และวางไว้บนแบบฟอร์มของคุณ

Add-Address-Field-to-WPForms

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

  • ปรับแต่งข้อความฉลาก
  • เลือกรูปแบบโครงร่างสำหรับช่องที่อยู่
  • ปรับแต่งขนาดฟิลด์
  • ซ่อนป้ายกำกับ
  • ซ่อนป้ายกำกับย่อย

ขั้นตอนที่ 6: เปิดใช้งานคุณสมบัติเติมข้อความอัตโนมัติของที่อยู่

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

ขั้นสูงแท็บที่อยู่ฟิลด์

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

ที่อยู่-การเติมข้อความอัตโนมัติ-คุณสมบัติ-ของ-wpform

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

display-google-maps-with-contact-form

คลิกที่ปุ่ม บันทึก ที่ด้านบนเพื่อให้ทุกอย่างเรียบร้อย

ขั้นตอนที่ 7: เพิ่มแบบฟอร์มการเติมข้อความอัตโนมัติของ Google Maps บนเว็บไซต์ WordPress ของคุณ

เมื่อแบบฟอร์มกรอกที่อยู่อัตโนมัติของคุณพร้อมแล้ว ก็ถึงเวลาเพิ่มลงในเว็บไซต์ของคุณ

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

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

ดูตัวอย่างแบบฟอร์มที่กรอกอัตโนมัติ

มาเพิ่มแบบฟอร์มการเติมข้อความอัตโนมัติของ Google Maps ในหน้าของคุณ

สร้างหน้าใหม่หรือเปิดหน้าที่มีอยู่บนเว็บไซต์ WordPress คลิกที่ไอคอน “+” และเพิ่ม บล็อก WPForms จากตัวแก้ไขบล็อก

เลือกกรอกแบบฟอร์มที่อยู่อัตโนมัติ

เลือกแบบฟอร์มของคุณและเผยแพร่หน้า

กรอกแบบฟอร์มที่อยู่อัตโนมัติ

งานเด็ด! คุณได้สร้างแบบฟอร์มที่อยู่เติมข้อความอัตโนมัติของ Google แผนที่สำเร็จแล้ว

ถัดไป ติดตามการแปลงแบบฟอร์ม WordPress ของคุณ

แล้วคุณล่ะ! ด้วย WPForms Geolocation addon คุณสามารถเปิดใช้งานคุณสมบัติการเติมที่อยู่อัตโนมัติบนแบบฟอร์มการติดต่อเว็บไซต์ของคุณและปรับปรุงประสบการณ์ของผู้เยี่ยมชมของคุณได้อย่างง่ายดาย

สร้างแบบฟอร์มกรอกที่อยู่อัตโนมัติของคุณตอนนี้

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

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

ดังนั้นสิ่งที่คุณรอ? เริ่มต้นด้วยปลั๊กอินฟอร์ม WordPress ที่ทรงพลังที่สุดวันนี้

และอย่าลืม ถ้าคุณชอบบทความนี้ โปรดติดตามเราบน Facebook และ Twitter