ワードプレス・プラグインでコンタクト・フォーム・マップを追加する方法

WordPressプラグインでコンタクトフォームマップを追加する方法

ワードプレスのプラグインを使って、コンタクトフォームに地図(グーグルマップのような)を追加したいですか?

問い合わせフォームの近くに地図を配置することで、ユーザーは自分の位置を明確に把握しやすくなり、より質の高いリードを獲得することができます。

このチュートリアルでは、WordPressのコンタクトフォームを地図付きで表示する方法を説明します。

WordPressフォームを今すぐ作成

なぜコンタクトフォームに地図を追加するのか?

確かに、ウェブサイトを持つ中小企業のオーナーのほとんどが、なぜ問い合わせフォームが必要なのかを知っているのは周知の事実だ。

しかし、なぜコンタクトフォームに地図を追加するのか不思議に思うかもしれません。コンタクトフォームに地図を追加するのは素晴らしいアイデアです。

その理由をいくつか挙げてみよう:

  • コンタクトフォームのマップは、タイプミスを減らし、より良いリードを獲得するのに役立ちます。
  • ユーザーが入力する場所を明確にする
  • 移動可能なピンで、ユーザーが正確な場所を見つけられるようにします。
  • WPFormsプラグインを使って)ボタンをクリックするだけで、とても簡単にできます。

WPForms Proを使えば、あなたのウェブサイトにマップをコーディングしたり、ウェブ開発者にお金を払ったりする代わりに、簡単にマップを作成することができます。WPFormsProはWordPressの地図プラグインの中でも最高のものの一つです。

次に、WordPressプラグインを使ってコンタクトフォームマップを追加する方法をご紹介します。

コンタクトフォームマップの追加方法

以下の簡単なステップバイステップの手順に従って、プラグインを使用してWordPressウェブサイトにコンタクトフォームマップを追加してください。

ステップ1: WPFormsプラグインをダウンロードする

まず最初に行う必要があるのは、WPFormsプラグインをインストールして有効化することです。WordPressのプラグインをインストールする方法のステップバイステップガイドはこちらです。

GeolocationアドオンにアクセスするにはWPForms Proが必要です。

ステップ2:ジオロケーションアドオンをオンにする

WPFormsプラグインを有効にしたら、WPForms"Addonsに 向かい、検索バーを使ってGeolocationアドオンを見つけます。アドオンのインストールをクリックしてアドオンをオンにしてください。

WPFormsジオロケーションアドオン

Geolocationアドオンには、あなたのウェブサイトで使える2つの素晴らしい機能があります:

1.フォーム入力のジオロケーション: フォームユーザーがどこから来たのかがわかるので、メールリストのセグメンテーションに役立ちます。

エントリーのWPFormsジオロケーション

2.住所オートコンプリート: ユーザーが住所を入力する際、入力が完了する前に自動的に住所を表示することができます。

WPFormsの住所オートコンプリート・ジオロケーション

あなたのウェブサイトにコンタクトフォームを設置したら、この2つのクールなツールを使うことができます。

ステップ 3: ジオロケーションアドオンのカスタマイズ

Geolocationアドオンを有効化したら、次はそれを設定してカスタマイズしましょう。

WPForms"Settingsに移動し、Geolocationタブをクリックします。

WPFormsのジオロケーション設定

ここで、位置情報を取得するプロバイダをPlaces Providerエリアで選択する必要があります。WPFormsはGoogle MapsとMapboxと統合しています。

GeolocationアドオンのPlaces ProviderとしてGoogle Placesを選択する

もし必要であれば、「現在地」チェックボックスをチェックすることで、ユーザーの現在地をフォームにあらかじめ入力しておくことができます。

WPFormsのGeolocationアドオンで位置検出を有効にする

この「現在地」ボックスにチェックを入れると、訪問者がお問い合わせフォームのあるページを開いたときに、このようなボックスが表示されます:

Google Chromeでジオロケーションのための位置情報サービスを許可する

Geolocationアドオンのセットアップに関する完全なドキュメントをチェックして、使用する位置情報サービスプロバイダとそのセットアップを完了する方法の詳細を確認してください。

Geolocationアドオンの設定でロケーションプロバイダの設定がすべて完了したら、コンタクトフォームマップを作成する準備ができました。

ステップ 4: コンタクトフォームの作成

それでは早速、地図付きのお問い合わせフォームを作ってみましょう。この部分は5分もかかりません。

新しいフォームの作成を始めるには、新規追加ボタンをクリックしてWPFormsフォームビルダーを起動します。

新規フォームの追加

フォームの名前を入力フィールドに入力します。この例では "Contact Us "とします。

フォームに名前を付ける

フォーム名の下にある、使いたいテンプレートをクリックして選択します。シンプルなコンタクトフォームを作りましょう。

シンプルなコンタクトフォームのテンプレートを選択する

次に、シンプルコンタクトフォームテンプレートには、以下のようないくつかの標準フィールドが入力されます:

  • 氏名(姓)
  • 電子メール
  • コメントまたはメッセージ

Simple Contact Form テンプレートで作られたフォーム

さて、他にも通知や確認など、設定したいフォームの設定がいくつかあることでしょう。そのような場合は (ぜひお勧めします)、最初のフォーム作成に関する詳細なガイドをご覧ください。

よくやった!次は、マップ表示オプションを有効にするフィールドをフォームに追加しましょう。

ステップ5:地図表示オプションをオンにする

フォームが読み込まれると、ビルダーの左側にフォームに追加できるすべてのフィールドが表示されます。フォームでマップ表示オプションを使用するには、住所フィールドまたは一行テキストフィールドのいずれかを追加する必要があります。

このチュートリアルでは、住所が1行で表示されるように、1行テキスト・ フィールドを使用します。

このフィールドをフォームに追加するには、フィールド名をクリックするか、左側のパネルから右側のフォームにドラッグ&ドロップします。

コンタクトフォームに一行テキストフィールドを追加する

フィールドが不要ですか?フォームからフィールドを削除するには、フィールドにカーソルを合わせて赤いゴミ箱ボタンをクリックしてください。

一行テキストフィールドの削除

さて、一行テキストフィールドを追加したら、次はフォームに地図を表示させましょう。

単一行テキスト・フィールドをクリックしてフィールド・オプション・タブを開き、ラベルを編集して "Address "などと表示する。そしてAdvancedをクリックする。

単一行テキストフィールドの詳細オプションを開く

いくつかのオプションが表示されるので、一番下までスクロールし、アドレスのオートコンプリートを有効にするオプションを有効にする。

単一行テキストフィールドのアドレスオートコンプリートを有効にする

次に「地図を表示」設定をオンに切り替えます。そのすぐ下にあるドロップダウンを使って、マップを入力フィールドの上に表示するか下に表示するかを選ぶことができます。

一行テキストフィールドに地図を表示する

あとはフォームに好きな変更を加えて、気に入ったら右上の「保存」をクリックしてください。

フォームの保存

よくやった。あなたのフォームはデビューする準備ができている。

ステップ 6: コンタクトフォームマップを公開する

地図付きのお問い合わせフォームを公開する準備はできましたか?WPForms Proプラグインを使えば、あなたのサイトにフォームを埋め込むのはとても簡単です。

フォームが思い通りに表示され、保存されたら、右上の埋め込み ボタンをクリックしてください。

埋め込みフォームボタン

ここでは、既存のページでも新しいページでも、好きなWordPressページを選択することができます。

このチュートリアルでは、新規ページの作成をクリックします。

新しいページを作成する

次に、自分のページに好きな名前をつけて、「Let's Go」をクリックする!

フォームを埋め込む新しいページに名前を付ける

ほら。これでWordPressのページに地図付きのコンタクトフォームが自動的に追加されます。

次に、Publish(既存のページを使用している場合は更新)をクリックして、フォームをインターネット上に公開します。

住所オートコンプリートフォームの公開

おめでとう、あなたの地図付きコンタクトフォームは今インターネット上で生きている!

これがそのイメージだ:

地図付きお問い合わせフォーム

以上です!これで、WordPressプラグインを使って簡単にコンタクトフォームマップを作成する方法がわかりました。

WordPressフォームを今すぐ作成

今すぐコンタクトフォームマップを作ろう

独自のコンタクトフォームマップを作るのはとても簡単です。

今すぐWPForms Proを入手してGeolocationアドオンを利用しましょう。他にも便利な機能がたくさんあります。

また、WPForms Proにはコンタクトフォームマップの他に、以下の機能があります:

  • 使いやすいビルダー - 1行もコードを書くことなく、数分で独自のフォームを作成できます。
  • アンケート-アンケートや投票を通じてデータを収集し、美しいレポートで確認できます。また、長時間のアンケートに保存して続行する機能を追加して、ユーザーが一時停止して後でフォームを完了できるようにすることもできます。
  • フォームページ- ワンクリックで邪魔にならないフォームページを作成し、より多くの人にフォームを完了してもらいましょう。
  • 注文フォーム- Stripe(全プラン)、Square(Pro)、PayPal(Pro)をフォーム上で統合し、オンラインで支払いを受け付けます。
  • ユーザージャーニーレポート - フォームに入力する前に、サイト内のどの位置にいたかを確認できます。
  • セキュアフォーム- カスタムキャプチャ、hCaptcha、Google reCAPTCHA v2またはv3などのスパム対策オプションでフォームを保護します。
  • 会話型フォーム- 非常に魅力的でモダンなフォームでコンバージョン率が急上昇します。
  • 2,000以上のテンプレート- 最も一般的なフォームタイプのテンプレートがあらかじめ用意されているので、一からフォームを作成する必要がありません。
  • プレミアムサポート- ウェブサイトのフォームでお困りのことがあれば、フレンドリーで知識豊富なチームが適切な方向へご案内します。
  • ...その他いろいろ。

実際、WPForms LiteとProを比較すると、Proが人気な理由がたくさんあることがわかります。

次に、WordPressのフォームに画像を追加します。

この記事で、プラグインを使ってWordPressウェブサイトにコンタクトフォームマップを追加することがいかに簡単か(そして有益か)ご理解いただけたと思います。

フォームにロゴや画像を追加したいですか?WordPress のフォームに画像を追加する方法をご覧ください。

何を待っているのですか?今すぐ最強のWordPressフォームプラグインを使い始めましょう。

この投稿が気に入ったら、Facebookや TwitterでWordPressの無料チュートリアルをフォローしてください。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。WPFormsがどのように資金を調達しているのか、なぜそれが重要なのか、そしてどのように私たちをサポートできるのかをご覧ください。

レニー・デコスキー

2001年からブログを始め、2007年からWordPressを使っています。WordPressプラグインについて書いていないときは、本を読んだり、ロータリーを楽しんだりしています。 もっと知る

最高のWordPressドラッグ&ドロップフォームビルダープラグイン

簡単、速い、安全。WPFormsを信頼する600万人以上のWebサイトオーナーの仲間入りをしてください。

このフォームを入力するには、ブラウザのJavaScriptを有効にしてください。

2 comments on "WordPressプラグインでコンタクトフォームマップを追加する方法"

  1. こんにちは、
    ユーザーによって入力された住所が特定のエリア内にあるかどうかをチェックするために、カスタムマップをベースリファレンスとして使用することは可能ですか?

    1. こんにちは、Elia - 現在、ユーザーが入力した住所がエリア内にあるかどうかを確認するために、カスタムマップを参照として使用するオプションはありません。これは便利だと思うので、開発者の目に留まるよう、機能リクエストトラッカーに追加しておきます。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。

このフォームはCloudflare Turnstileによって保護されており、Cloudflareプライバシーポリシーおよび利用規約が適用されます。