Ninja Formsで承諾確認させたい

Ninja Formsについて

お問い合わせフォーム作成って敷居高くありませんか?
問い合わせフォームのプラグインも色々ありますが、「感覚で使えない」と感じる方も多いのではないでしょうか。

ContactForm7
お問い合わせフォームプラグイン。htmlに不慣れな方にとっては、感覚でわからないことも。

そんなハードルの高いお問い合わせフォーム作りですが、Ninja Formsは感覚で作れます!!
Ninja Formsで承諾確認のチェックボックスを作ってみましょう。
承諾確認画面

今回のポイント

色々難しい設定を考えてしまうかもしれませんが、シンプルにやるなら「同意する」チェックボックスを作り必須項目にして、自動返信メールにこの項目を入れないようにするだけでいいかと思います。

導入方法

  1. WordPress管理画面の左メニューから「プラグイン」→「新規追加」を開きます。
  2. 右上の検索ボックスに「Ninja Forms」を入力しEnterキーを押します。
  3. 多分一番に表示されると思います。「Ninja Forms – The Easy and Powerful Forms Builder」の「今すぐインストール」ボタンを押します。
    完了

基本設定・基本操作

今回割愛です^^;
デジタルマーケッター 松原 潤一さんの記事が分かりやすいです。

デジタルマーケティング専門家/デジタルマーケッター松原潤一のブログ

WordPressのお問合せフォーム、申込みフォーム作成プラグインといえば「Contact Form7」が一番メジャーで…

承諾確認を設定する方法

  1. 上記基本設定の紹介記事を参考に各フィールドを設定します。
  2. 「同意します」フィールドを作ります。
    お問い合わせフォーム作成画面(フィールドの設定・追加画面)の右下のプラスボタンを押し、「共通フィールド」の「個別チェックボックス」を画面左にドラッグします。
    NinjaForm画面
  3. ラベル「同意します」、ラベルの位置「要素の右」、必須フィールドをオンにします。
    NinjaForm画面_要素の設定
  4. 「プライバシーポリシーをお読みください」の文言を追加します。
  5. お問い合わせフォーム作成画面(フィールドの設定・追加画面)の右下のプラスボタンを押し、「レイアウトフィールド」の「HTML」を画面左にドラッグします。
  6. ラベルは空欄、規定値に「プライバシーポリシーをお読みいただき、「同意します」にチェック後送信ボタンを押してください。」のような文言を追加します。
    この規定値のエディタはWordPressの投稿編集画面と同様、htmlエディタ(ビジュアルエディタ)です。テキストエディタとの切り替えはボタンでできます(画像参照ください)。
    ninjaformエディタ
  7. 最後は見た目の調整です。
    NinjaForm Chromeで検証
    このままでは何だか微妙にズレてて見た目悪いです(見た目はOSやブラウザに依存すると思います。)
    【Fixefox】
    firefox検証
    【androidChrome】
    android_chrom検証
  8. とりあえず、自分の環境(Windows、Chrome&Android使用)で直しておきましょう。Ninja Formesをいったん公開(保存)して、検証ツールを使います。
    (Chromeの場合)画面上で右クリック→「検証」
    検証ツール(下画像)を開いたら、検証ツール上部にあるカーソルアイコンをクリック または「Ctrl+Sift+C」
    →格好悪いチェックボックスにカーソルを当てます。
    検証ツール
    ポップアップでなにやらコードが表示されるので、その中の「数字」を確認します。

    検証tool
    今回私の場合は「28」です。
  9. 数字を覚えたら、下記コードをコピーし、WordPressのテーマの追加CSSにペーストします。
    (THE THORだったら、「外観」-「カスタマイズ」-「追加CSS」)

    上記CSSコードの28の箇所を8で確認した数字に変えます。CSSを公開します。
  10. 完成です。
    承諾確認画面
補足です。
もしかするとスマートな設定でなないかもしれません・・。
実際ラベルを空欄にしていいのかも分からないですし、「その他のフィールド」に「確認」があり「同意します」という設定項目が設けられていてそちらがベストっぽいのですが、設定するとうまいこといかなかったので、この方法にしました。
「こうやった方が良いよ!」というアドバイスがあれば、ぜひ教えてください!

最後は自動返信メールの設定の手直しです

  1. NinjaFormesの「メールとアクション」を開き、自動返信メールの設定ボタンを押します。
    自動返信メール
  2. 「メール」の標準設定は「{fields_table}」=入力項目すべてお客様の自動返信メールに反映されます。
    「同意します」は自動返信メール本文に不要かと思うのでそれ以外の項目を手動で追加しましょう。

    フォームビルダー
    必要な項目をクリックすると、下のエディタに内容が反映されます。

確認作業

フォームからテスト送信し、

  • サンクス画面(成功メッセージ)が表示される
  • 自動返信メールが到着する
  • 自分へのメールが到着する

上記3点が問題なくできているか確認しましょう。

投稿者プロフィール

つるむらさき
つるむらさき
WordPress、マーケティングを勉強中の事務員&Web担当の保育園児ママです。

SNSやブログで知り合った方とも
情報共有できたり楽しくコミュニケーション取れたりできればうれしいです!!
サーバーはエックスサーバーが速くてお勧めです



Ninja Forms:快適なフォームにしてみよう
最新情報をチェックしよう!