WordPressプラグイン「MW WP Form」で問い合わせフォームを作ってみた

  • 2015年7月15日
  • 2018年8月13日
  • IT
IT

GoogleフォームからMW WP Formへ

これまではGoogleフォームを使ってお問い合わせフォームを作成していました。

 

作り方が簡単で不満はなかったのですが、WordPressのプラグインでも同じことができることを知り試しに導入してみることに。

 

いくつかある中から選んだのは日本人の方が制作されていて自動送信メールの機能もあるということで「MW WP Form」というプラグイン。

MW WP Formで新しいフォームを作成

新規追加から新しいお問い合わせフォームを作ってみます。

 

スクリーンショット 2015-07-15 19.35.35

 

赤枠で囲った部分からお問い合わせフォームに追加する項目を選択していきます。

 

スクリーンショット 2015-07-15 19.41.04

 

フォームに設定できる項目は以下となります。

 

お問い合わせフォームには、「テキストフィールド」、「テキストエリア」、「ラジオボタン」を使いました。

 

スクリーンショット 2015-07-15 19.42.58

 

広告

 

テキストフィールド

会社名や名前などそれほど文字数が多くないものについてはテキストフィールドを使います。

 

「フォームタグを追加」をクリックすると以下の入力項目が出てきます。

 

「name」のところに項目名を入力し、その他は入力がなくてもいいので「insert」をクリック。

 

スクリーンショット 2015-07-15 19.46.14

 

これで「会社名」を入力する項目が作成されました。

 

何を入力するところなのか表示する必要があるので「会社名※必須」とテキスト入力するのを忘れないで下さい。

 

スクリーンショット 2015-07-15 20.03.34

 

あとテキストフィールドで追加するのは、「お名前」、「メールアドレス」、「メールアドレス(確認用)」です。

 

上記と同じように作成します。

ラジオボタン

ラジオボタンを使って問い合わせ項目を作成します。

 

スクリーンショット 2015-07-15 20.10.47

 

表示方法で「垂直に配置する」にチェックを入れるのを忘れないで下さい。

 

ここにチェックが入っていないとボタンが横一列に並んでしまいます。

 

広告

 

テキストエリア

問い合わせ項目に対して具体的な内容を記載する場所が必要なためテキストエリアを使って長い文章が書ける項目を作ります。

 

こちらも「name」以外は特に入力しなくてもいいかと思います。

 

スクリーンショット 2015-07-15 20.15.58

 

これでフォームの作成は終了です。

 

下にある完了画面メッセージにも入力しておきましょう。

 

スクリーンショット 2015-07-15 20.36.16

バリデーションルール

バリデーションルールで各項目に細かなルールを設定することができます。

 

スクリーンショット 2015-07-15 20.40.06

 

メールアドレスは2回入力してもらうので必ずルールを設定しておきましょう。

 

「バリデーションを適用する項目」、「一致する項目」にはこれまで作成した項目の「name」と同じ文字を入力します。

 

スクリーンショット 2015-07-15 20.51.38

 

広告

 

自動返信メール設定

件名などを入力していきます。

 

送信者は未入力だとサイトのタイトルになってしまいますので必要がある場合はきっちり入力しましょう。

 

スクリーンショット 2015-07-15 20.55.20

 

本文にはお礼の言葉を記載します。

 

あとは問い合わせをしてくれた方が入力した内容を確認事項として記載しておくといいかと思います。

 

「name」を{ }(かもめカッコというらしいです。)で囲むと入力内容が本文に自動で記載されます。

 

会社名:{会社名}という形です。

 

自動返信メールにメールアドレスの項目の「name」で設定したもの(今回はメールアドレス)を入力します。

 

問い合わせがあった時にそのアドレス宛にメールが送られます。

管理者宛メール設定

こちらで問い合わせがあった場合に自分宛てにメールを自動で送る設定ができます。

 

自分以外に送る相手がいる場合はCCにもメールアドレスを入力。

 

本文には問い合わせをしてくれた方の入力内容が表示されるようにしておきます。

 

ルールは自動返信メールと同じで「name」を{ }で囲みます。

 

スクリーンショット 2015-07-15 21.10.23

 

最後に固定ページを作成し、本文に「フォーム識別子」を貼り付けるとお問い合わせフォームが完成です。

 

スクリーンショット 2015-07-15 21.18.57

 

最新情報をチェックしよう!
広告