WordPress 양식에 주소 자동 완성 필드를 추가하는 방법은 무엇입니까?

주소 자동 완성 WordPress 양식을 웹 사이트에 추가하는 방법이 궁금하십니까? 그렇다면 이 글은 바로 지금 당신에게 필요한 것입니다.

WordPress 양식에 주소 필드가 있는 경우 자동 완성 기능을 추가하는 것이 좋습니다. 이렇게 하면 사용자가 더 쉽게 주소 필드를 채우고 양식을 성공적으로 제출할 수 있습니다.

그래서 주소 자동 완성 WordPress 양식을 만드는 방법에 대한 자세한 가이드를 준비했습니다. 그러니 끝까지 읽으십시오.

하지만 자습서를 시작하기 전에 주소 자동 완성 기능의 이점과 이를 양식에 추가하는 가장 좋은 방법에 대해 논의해 봅시다.

주소 자동완성 옵션은 온라인 양식에서 어떻게 유용합니까?

모든 WordPress 양식에 일반 주소 필드를 사용할 수 있습니다. 그렇다면 주소 자동 완성 옵션을 추가하는 이유는 무엇입니까?

다음은 주소 자동 완성 옵션이 유용한 몇 가지 중요한 방법입니다.

• 주소 자동완성 필드는 입력을 기반으로 사용자에게 자동으로 장소를 제안합니다.
• 사용자는 사용 가능한 주소 제안 목록에서 정확한 주소를 선택할 수 있습니다.
• 사용자는 전체 주소를 입력할 필요가 없기 때문에 비교적 빠르게 양식을 작성할 수 있습니다.
• 자동 완성 기능을 사용하면 쉽고 빠르게 양식을 채울 수 있습니다. 이는 성공적인 양식 제출을 늘리고 양식 포기를 줄이는 데 도움이 될 수 있습니다.

따라서 양식에 자동 완성 주소 필드를 포함하는 것이 좋습니다.

그러나 WordPress는 기본적으로 이 기능을 제공하지 않습니다. 그렇다면 최선의 대안은 무엇입니까?

다음 섹션에서 주소 자동 완성 필드를 추가하는 가장 좋은 방법을 다룰 것입니다.

주소 자동 완성 WordPress 양식을 만드는 가장 좋은 방법

워드프레스는 기본적으로 주소 자동완성 기능을 추가하는 것을 허용하지 않기 때문에 대신 플러그인에 의존해야 합니다.

올바른 WordPress 플러그인을 사용하면 번거로움 없이 양식에 기능을 추가할 수 있습니다. 그러한 플러그인 중 하나는 Everest Forms입니다.

인기 있는 끌어서 놓기 양식 빌더 플러그인은 WordPress 웹사이트에 완벽하게 추가될 수 있습니다.

이 강력한 도구는 모든 작업을 수행합니다! 한 줄의 코드를 건드리지 않고 사용자 지정 양식을 만들 수 있습니다.

20개 이상의 양식 필드를 사용하여 연락처 양식, 요청 양식 남기기, 주문 양식 또는 필요한 모든 양식을 작성할 수 있습니다.

또한 자동 완성 옵션을 쉽게 활성화할 수 있는 주소 필드를 제공합니다. 따라서 양식에 이 기능을 갖추는 가장 좋은 방법으로 Everest Forms 플러그인을 권장합니다.

WordPress 양식에 주소 자동 완성 필드를 추가하는 방법은 무엇입니까?

이 자습서에서는 Everest Forms를 사용하여 주소 자동완성 WordPress 양식을 만드는 과정을 시연했습니다.

양식에 WordPress Google 주소 자동완성 옵션을 추가하려면 다음 7단계를 따르십시오.

1단계: Everest Forms Pro 설치 및 활성화

귀하의 사이트에 Everest Forms Pro 플러그인을 설치하고 활성화하여 시작하십시오. 이 프리미엄 버전은 핵심 무료 Everest Forms 플러그인 위에서 작동합니다.

따라서 주소 자동완성 기능이 작동하려면 플러그인의 무료 버전과 프리미엄 버전을 모두 설정해야 합니다.

귀하의 웹사이트에 Everest Forms Pro를 올바르게 설정하는 방법에 대한 별도의 가이드가 있습니다. 따라서 플러그인 설치 및 활성화에 도움이 필요한지 확인하십시오.

2단계: Geolocation 애드온 설치 및 활성화

Everest Forms Pro를 올바르게 설정했다면 사용 가능한 모든 추가 기능에 액세스할 수 있어야 합니다. 액세스할 수 있는 추가 기능은 구매한 요금제에 따라 다릅니다.

따라서 WordPress 대시보드에서 Everest Forms >> Add-ons 를 여십시오.

아래로 스크롤하여 Geolocation 애드온을 찾고 Addon 설치 를 클릭합니다. 설치를 완료하려면 나중에 활성화 버튼을 누르십시오.

이렇게 하면 WordPress 양식에서 사용할 추가 기능이 설정됩니다.

3단계: Google 콘솔에서 API 키 가져오기

세 번째 단계는 Google 콘솔에서 API 키를 가져오는 것입니다. 이렇게 하면 Everest Forms 플러그인을 Google 콘솔에 연결하는 데 도움이 됩니다.

먼저 Google 콘솔 대시보드를 방문합니다. 이 대시보드에 액세스하려면 Google 계정 을 통해 로그인해야 합니다.

그런 다음 대시보드 상단에서 프로젝트를 선택합니다.

아직 프로젝트가 없는 경우 새 프로젝트 를 클릭하여 프로젝트를 만들 수 있습니다. 다음으로 프로젝트 이름을 지정하고 만들기 를 누릅니다.

프로젝트를 선택하면 프로젝트의 API 및 서비스 페이지에 도착하게 됩니다.

이 페이지로 자동 리디렉션되지 않는다고 가정합니다. 이 경우 왼쪽 상단의 내비게이션 메뉴 에서 매년 열 수 있습니다.

메뉴를 누르고 API 및 서비스 >> 활성화된 API 및 서비스 를 엽니다.

여기에서 +APIS 및 서비스 활성화 를 클릭합니다.

API 라이브러리에서 Places API 를 검색하고 활성화 합니다.

참고: API를 성공적으로 활성화하려면 결제 계정이 있어야 합니다. 따라서 진행하기 전에 Google Cloud Console에 대한 결제를 활성화하세요.

API를 활성화한 후 APIs & Services >> Credentials 로 이동합니다. 이제 +Create Credentials 를 클릭한 다음 API Key 를 선택합니다.

이렇게 하면 새 API 키 가 생성됩니다. 그러나 API 키를 복사하기 전에 몇 가지 제한 사항을 추가해야 합니다. 이를 위해 Edit Key 를 클릭하십시오.

먼저 애플리케이션 제한을 설정 해야 합니다. 이렇게 하면 API 키를 사용할 수 있는 웹사이트, IP 주소 또는 앱을 제한할 수 있습니다. 우리의 경우 웹사이트 를 선택합시다.

다음으로 API 키가 유효한 웹사이트를 추가하고 완료 를 누릅니다. 필요한 경우 여러 웹사이트를 추가할 수 있습니다.

그런 다음 키 제한 라디오 버튼을 선택하여 API 제한 을 설정해야 합니다. 이렇게 하면 키가 호출할 수 있는 활성화된 API를 알 수 있습니다.

Places API만 필요하므로 드롭다운에서 선택하겠습니다. 요구 사항에 따라 Maps JavaScript API와 같은 더 많은 API를 활성화하고 추가할 수 있습니다.

마지막으로 저장 버튼을 누르십시오.

지금 해야 할 일은 나중에 사용할 수 있도록 키를 복사하는 것뿐입니다. 다음 단계에 필요하므로 안전하게 보관하십시오.

4단계: 지리적 위치 설정에 API 키 추가

WordPress 대시보드로 돌아가 Everest Forms >> Settings >> Geolocation 으로 이동합니다.

복사한 API 키 를 Google Places API 키 필드에 붙여넣습니다. 그런 다음 변경 사항 저장 버튼을 누릅니다.

이렇게 하면 Google Places API와 Everest Forms 간의 연결이 완료됩니다.

지리적 위치 설정에는 현재 위치 옵션이 하나 더 있습니다. 이 옵션을 켜면 양식이 주소 필드에서 사용자의 현재 위치를 자동으로 감지하고 채웁니다.

완전히 선택 사항이므로 켜는지 여부는 요구 사항에 따라 다릅니다.

5단계: 주소 필드가 있는 새 양식 만들기

Everest Forms를 Google Places API에 성공적으로 연결했습니다. 그러나 자동 완성 주소 기능이 적용되는 양식은 여전히 ​​필요합니다.

이를 위해서는 주소 필드가 있는 새 WordPress 양식을 만들어야 합니다.

문제는 어떤 유형의 양식을 만드느냐입니다. 글쎄, 그것은 전적으로 당신에게 달려 있습니다!

Everest Forms의 가장 좋은 점은 필요한 모든 유형의 양식을 만들 수 있다는 것입니다. 문의 양식, 설문 조사 양식, 입사 지원 양식, 예약 양식 등.

따라서 Everest Forms >> Add New 로 이동하십시오.

Everest Forms는 다양한 양식에 대해 미리 작성된 여러 템플릿을 제공합니다. 따라서 시간이 부족한 경우 그 중 하나를 사용자 지정할 수 있습니다.

그러나 처음부터 양식을 디자인하는 것은 그만큼 쉽습니다! 필요한 필드를 드래그 앤 드롭하고 사용자 지정하기만 하면 됩니다.

이 가이드를 위해 처음부터 주소 필드가 있는 간단한 연락처 양식을 만들 것입니다.

따라서 처음부터 시작 을 클릭하십시오. 그런 다음 양식 제목을 입력하고 계속 을 누르십시오.

이렇게 하면 양식 작성기로 이동합니다. 보시다시피 모든 양식 필드는 왼쪽에 그룹화되어 있습니다. 오른쪽에 있는 양식 행으로 끌어다 놓을 수 있습니다.

따라서 Name , Email , Subject , Message 및 가장 중요한 Address 와 같은 필요한 필드를 양식에 추가하십시오.

주소 자동 완성 워드프레스 양식이 완성되면 상단의 저장 버튼을 눌러 새 양식을 저장합니다.

6단계: 주소 필드에 대한 주소 자동완성 활성화

각 필드에는 다양한 사용자 지정 옵션이 있습니다. 마찬가지로 주소 필드에 대한 몇 가지 옵션이 있으며 그 중 하나는 주소 자동 완성 기능입니다.

여기서는 주소 필드에 중점을 두고 있지만 다른 필드도 사용자 지정해야 합니다.

편집하려는 필드를 클릭하십시오. 사용자 지정 옵션이 왼쪽에 열립니다.

여기에서 Label , Description , Field Visibility 등의 필드를 변경할 수 있습니다. Required , Enable Tooltip , Hide Label 을 활성화하고 CSS 클래스 를 추가할 수도 있습니다.

또한 개별 필드에 대한 조건부 논리도 설정할 수 있습니다.

하지만 여기서 하이라이트 필드로 돌아가 보겠습니다. 주소 필드를 클릭하면 필드 옵션 에 위에서 설명한 것과 유사한 옵션이 표시됩니다.

그러나 고급 옵션 에는 주소 필드에 맞게 선별된 일부 기능이 포함되어 있습니다.

예를 들어 주소 입력란 1 , 주소 입력란 2 , 국가 등에 대한 자리 표시자 및 기본값 을 변경할 수 있습니다. 또한 기본 국가 목록 에서 사용자에게 제공할 국가를 선택할 수 있습니다.

가장 중요한 것은 확인란을 선택하기만 하면 주소 자동완성 기능을 활성화할 수 있다는 것입니다.

저장 버튼을 누르면 주소 필드가 양식을 작성하는 사용자에게 자동으로 장소를 제안합니다.

7단계: 사이트에 주소 자동완성 WordPress 양식 표시

축하해요! 이 튜토리얼의 마지막 단계에 있습니다!

주소 자동 완성 WordPress 양식이 준비되었으므로 웹 사이트의 프런트 엔드에 추가해야 합니다.

Everest Forms를 사용하면 몇 가지 간단한 단계로 이를 수행할 수 있습니다.

WordPress 양식을 추가하려는 페이지나 게시물을 열어 시작합니다.

Gutenberg 편집기에서 블록 삽입기( + ) 버튼을 선택합니다.

Everest Forms 블록을 검색하고 클릭하여 페이지/게시물에 추가합니다.

그런 다음 드롭다운에서 주소 자동 완성 필드가 있는 양식을 선택합니다. 페이지/게시물에 양식이 자동으로 추가됩니다.

마지막으로 상단의 업데이트 버튼을 누르십시오.

완전히 새로운 페이지/게시물에 양식을 추가할 수도 있습니다. 동일한 단계를 따르고 마지막에 게시 버튼을 누르십시오. 그리고 끝났습니다!

주소 자동 완성 WordPress 양식은 이제 프런트 엔드에서 사용자에게 액세스할 수 있습니다.

마무리

지금까지 알 수 있듯이 WordPress Google 주소 자동 완성 양식을 작성하는 것은 매우 쉽습니다. 특히 Everest Forms 플러그인이 있는 경우 더욱 그렇습니다.

이 놀라운 플러그인을 사용하면 양식을 Google 콘솔에 빠르게 연결할 수 있습니다. 따라서 사용자는 자동 완성 기능을 사용하여 주소 필드를 쉽게 채울 수 있습니다.

하지만 알고 계셨나요? Everest Forms는 훨씬 더 많은 것을 제공합니다.

이를 사용하여 이메일 템플릿을 사용자 지정하고, 양식 제출을 예약하고, 양식 필드를 자동으로 채우는 등의 작업을 수행할 수 있습니다.

블로그에서 이 플러그인에 대한 모든 내용을 읽어보세요. 시각적 학습자라면 YouTube 채널에서 쉬운 비디오 자습서를 확인하십시오.

또한 주간 게시물에 대한 업데이트를 보려면 Twitter 및 Facebook을 팔로우하십시오.