GravityPerks の GP Advanced Phone Field で国際電話番号を入力する

GP Advanced Phone Field

3022年8月23日に GravityPerks から新しいアドオン（GP Advanced Phone Field）が発表されましたのでご紹介します。

GP Advanced Phone Field の特徴

• 電話番号の検証
  国コードを自動的に検出し、その国の基準に従って番号をフォーマット
  libphonenumber(電話番号を検証するための Android 4.0 以降の Google のライブラリ)を使用
• 国旗付きの選択可能な国コード
  顧客は国コードを簡単に選択できます。
• デフォルトの国を自動検出
  訪問者の場所によって国コードを自動的に検出するか、デフォルトの国を設定することができます。
• フィルタリングされ、優先される国
  選択可能な国をあらかじめ設定し、優先する国を選択可能なリストの一番上に配置できます。
• 電話メタを取得
  電話の種類、場所、キャリアなどを取得します。
• 条件付きロジックで 電話番号のメタ情報を使用
  取得したメタデータに基づいて条件付きロジックを使用可能です。

デモ

実際のGP Advanced Phone Field を埋め込んでみましたので試してみてください。
注意：このフォームでは実際の電話番号を入力しても送信することはできません。

GP Advanced Phone Field の使い方

前提条件

• WordPressにGravity Formsが正常にインストールされ、アクティベートされていること
• GravityPerks が正常にインストールされ、アクティベートされていること

GP Advanced Phone Field のインストール

WordPress の管理画面左メニューから、「フォーム」>「Perks」を選択します。

GravityPerks の設定画面に遷移します。

「Install Perks」タブ、または「Let's go install some perks!」のテキストリンクをクリックします。
Perks のインストール画面に進みます。

下の長いリストから「GP Advanced Phone Field」を探し出し、「Install Perk」ボタンをクリックします。
インストールが開始されます。

インストールが完了すると「Activate Perk」ボタンが有効化されますので、これをクリックします。
これでインストールは完了です。

GP Advanced Phone Field の初期設定

次に、GP Advanced Phone Field の初期設定を行います。
WordPress 管理画面の左メニューから「フォーム」>「設定」を選択します。

Gravity Forms の設定画面が開きます。
この画面の左側メニューから「Adv Phone Field」を選択します。

初期設定の内容

初期設定の画面が開きますので、各々必要な設定を行います。

• Default Country（デフォルトの国）
  Select the default country that should be used for the country code selector.（国番号セレクターに使用するデフォルトの国を選択します。）
  ドロップダウンでデフォルトの国を設定することも可能ですが、デフォルトでは「訪問者の位置（GeoIP）で判断する」が選択されています。

• Preferred Countries（希望する国）
  Select the countries that should be listed first in the country code selector.（国名コードセレクターで最初に表示される国を選択します。）
  検索フォームが使用できますので、日本と入力すればすぐに日本が選択できます。

• Countries（ドロップダウンに表示する国）
  ドロップダウンに表示する国は以下の3つから選択が可能です。
  • Include all countries（すべての国を対象とする）
  • Only include the following countries（以下の国のみ含む）
  • Exclude the following countries（以下の国は除く）

設定が完了したら「設定を保存→」ボタンをクリックして設定を保存します。

フォームにフィールドを追加

次にGravity Forms のフォームに GP Advanced Phone Field を設置していきます。
Gravity Forms のフォームエディターで「高度なフィールド」の「電話」フィールドを追加します。

フィールドの設定

GP Advanced Phone Field を有効化する

追加した「電話番号」フィールドを選択した状態でフィールド設定を開き、「Perks」セクションに移動して、「Enable Advanced Phone Field」をオンにします。

「外観」を設定する

次に「外観」を設定します。
設定する項目は、「カスタム確認メッセージ」です。

• カスタム確認メッセージの設定
  「外観」の「カスタム確認メッセージ」でエラー時のメッセージを設定します。（デフォルトでは英語でエラー文言を表示します。）
  例：正しい電話番号を入力してください。

フォームの埋め込み

最後に、通常のGravity Forms のフォームと同様に固定ページや投稿にフォームを埋め込んで使用します。

投稿者プロフィール

DoL（CMSラボ所長）DoL（CMSラボ所長）

CMS Laboの所長。
所員はまだない。

DoLは Director of Laboratories の略です。

最新の投稿

投稿者アーカイブ

• GravityForms2023年2月13日スパムハニーポットの機能強化
• GravityForms2023年2月10日ブロックのテーマとスタイルの設定
• GravityForms2023年2月9日Gravity Formsのテンプレートライブラリを利用する
• GravityForms2023年2月8日Gravity Forms セットアップウィザード