【WordPress】Ninja Formsプラグインで住所自動入力などお申し込みフォームを作るコツ

【WordPress】Ninja Formsプラグインで住所自動入力などお申し込みフォームを作るコツ

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

【WordPress】Ninja Formsプラグインはドラッグ&ドロップで簡単にフォームを作成できます。
お問い合せフォームを作成しながらNinja Formsの基本操作を関連記事で紹介しましたが、ここではお申し込みフォームを実践的に作成しながら住所の自動入力やラジオボタンなどで日本語が扱う方法や送信履歴の活用について、知らないと躓きそうな部分について紹介していきます。

住所の自動入力

「zipaddr-jp」プラグインのインストール

郵便番号から住所を自動入力するには「zipaddr-jp」プラグインを使って実現します。


WordPressの管理画面からプラグインを新規で追加します。
キーワード「zipaddr-jp」で「今すぐインストール」してプラグインを有効にします。

Ninja Formsで自動入力の設定

郵便番号から住所を自動入力できるように、Ninja Formsで「zipaddr-jp」に対応したフィールドを追加していきます。

  1. 郵便番号フィールド 123-4567(ハイフン付)、1234567(ハイフン無)どちらでも対応していますが、ここではハイフン無で統一したいので、表示の説明欄を利用して説明を追加しました。
  2. 一行テキストフィールド ラベルを必ず都道府県とする必要があります。
  3. 市町村フィールド 市町村フィールを追加します。
  4. 住所フィールド 住所フィールドを追加します。自動入力では町名までしか対応していないので、番地やビル名などを追加入力する説明を追加しました。

自動入力用の各フィールドが追加できたら「公開」でフォームを保存して、プレビューで自動入力ができてるか確かめて下さい。

ラジオボタンなどの不具合と日本語表示

ラジオボタンなどで、日本語の選択項目を使うと不具合が起こる場合があります。
不具合を解消して日本語の項目が使えるように設定していきます。

Ninja Formsの設定を編集する

Ninja Formsの設定を編集

Ninja Forms>設定>詳細設定
「Form Builder “Dev Mode”」にチェックを入れます。

フィールドの編集画面にラベルと値が表示される

フォームビルダー「開発モード」を有効にすると、ラジオボタンリスト(選択肢から1つ選択)・チェックボックスリスト(選択肢を複数選択)・複数選択の各フィールドの編集画面では、値とラベルが表示されます。

値の文字が優先されて不具合は解消されますが、値には半角小文字英数字と一部の記号しか利用でませんので、このままでは管理者メールや自動返信メールには値の内容だけが表示されてしまいます。

ラベルの項目を表示させる方法

フレームキーのカスタマイズ

完成したフォームの自動返信メールのメールフィールドキーに:labelを追加して、値でなくラベルが表示されるようにします。

講習会 {field:field_1699161757052:label}
時間帯 {field:field_1699161808821:label}

※使用例 フィールドキーはフォームより異なります。

メールにフィールドキーの挿入する場合、項目名がチェックボックスリスト・ラジオボタンリストとしか表示されていませんので間違えないようにして下さい。
また、メール本文の既定で表示されている {fields_table} ではラジオボックリストなどの項目は値が表示されてしまいますので注意して下さい。

送信履歴管理

送信履歴管理

Ninja Forms>①ダッシュボード
フォームの②歯車アイコン(Edit)をクリックすると、左から編集・複製・フォームのプレビュー・送信データを表示・削除 の項目が表示されます。
送信履歴を見るには③「送信データを表示」をクリックします。

送信履歴一覧

送信履歴一覧を見ることができます。
また「すべての送信データをダウンロード」をクリックするとパソコンにCSV形式でダウンロードすることができます。

送信履歴をExcelに読み込み

送信履歴をExcelに読み込み

ダウンロードしたCSV形式のファイルは、そのままでは文字化けして正しくExcelに読み込みできません。

  1. Excelファイルを新規作成(空白のブック)で新しいブックを開き、データタブをクリックします。
  2. データ>テキストまたはCSVからをクリックして、Ninja FormsからダウンロードしたCSVファイルを「インポート」します。
  3. 文字コードや区切りが適切に選択されていると、読み込み後のイメージが表示されます。
  4. 問題がなければ「読み込み」をクリックしてExcelに読み込みます。

最後に

Ninja Formsプラグインは日本語に対応していますが、しらないと戸惑うポイントや便利な活用方法を紹介しました。
Ninja Formsプラグインの基本操作については関連記事をご覧下さい。

市民パソコン教室長野校では、WordPress作成講座をおこなっています。ホームページの作成で困っているなどのサポートもおこなっていますので、お気軽にお問い合せ下さい。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.