WordPressのプラグイン MW WP Formの使い方（お問い合わせフォーム）

今回のはMW WP Formを使ったお問い合わせフォームの使い方です。

WordPressオリジナルテーマの作り方⑩（お問い合わせフォーム編）ではContact Form7というプラグインを使ってお問い合わせフォームを作りましたが、今回はMW WP Formというプラグインを使ってお問い合わせフォームを作っていきます。

Contact Form7との違いは確認画面や完了画面が標準で備えれらている点です。

1 MW WP Formをインストール～ショートコード貼り付け
2 フォームを作成
3 バリデーションルール
4 確認送信ボタンを設定
5 条件分岐の設定
6 自動返信メール設定
7 管理者宛メール設定

MW WP Formをインストール～ショートコード貼り付け

まずはプラグインをインストールして有効化までします。

すると左側にMW WP Formという項目が追加されます。

ちなみにその下にあるお問い合わせはContact Form7になります。

次の新規追加をクリックすると次の画面になります。

通常の投稿画面と似ていますが、右側のメニューがお問い合わせフォームのメール設定などになっています。

まずはここのタイトルを追加というところに「お問い合わせフォーム」とか分かりやすい名前で書いておきましょう。

そしてこれからフォームを作っていくのですが、ここに書いたものを表示させたい時にどうするかを最初に説明します。

この画面の右側にあるショートコードをコピーして、表示させたい箇所に貼るだけです。

Contact Form7と同じですね。

例えば固定ページに「お問い合わせ」というページを作り、そこに作成したフォームを載せたい時はこのようになります。

なんだか味気ないですがこれでOKです。

それでは実際にフォームを作っていきます。

フォームを作成

最初に名前入力欄を作りたいと思います。

まずはタイトルの下にあるメニューからテキストを選択し、フォームタグを追加をクリックします。

すると次のような画面が出てくるので、nameに「名前」と入力します。

またhtmlでこの名前のinputタグに「input-name」というclass名を付けたので、ここでも同じclass名を付けておきます。

こうすることによって、このclass名を使ったcssがここでも反映されるようになります。

出来たのがこのコードです。

そしてhtmlでは名前のフォームは次のように書いていたとします。

<div class="form-name">
  <label for="name">名前</label>
    <input
      class="input-name"
      name="name"
      type="text"
      value=""
    />
</div>

今回作ったのはこのinputの部分なので、このinputの部分を先ほどのコードに置き換えます。

<div class="form-name
 <label for="name">名前</label>
 　[mwform_text name="名前" class="input-name" size="60"]
</div>

これでデザインも反映されるようになりました（このコードはhtmlではなく、今作成しているお問い合わせフォームのテキストエディタに書くものです）

あとは追加したいフォームをそれに適したフォームタグを選択して追加していきます。

バリデーションルール

入力項目の中には必須項目にしたい物もあると思います。

そういった場合は編集画面の一番下にあるバリデーションルールで設定します。

バリデーションルールを追加をクリックしたら次の画像が出てくるので、バリデーションを適用する項目を入力します。

この名前には先ほどフォームタグを作成した時にnameに書いたものを書きます。

なのでここでは名前と入力します。

あとは必須項目にチェックを入れればOKです。

他にもカタカナ指定、電話番号、メールアドレスなど、項目に適したものにチェックを入れましょう。

またこの名前で作ったフォームタグはテキストですが、お問い合わせフォームでファイルを送付出来るようにする事も出来ます。

それにはフォームタグでファイルを選択して作成します。

そしてこのファイルには例えば報告書という名前を付けて、ファイルの種類はpdfのみ、ファイルサイズは10000バイトまでといった指定も次の画像のように設定すれば出来ます。

ファイルの種類は拡張子制限で設定しますが、右側の例にも書いてある通り複数指定することも出来ます。

確認送信ボタンを設定

次に確認送信ボタンを設定します。

これは送信ボタンの前に確認画面を表示させたい場合に使います。

ここでは確認ボタンと送信ボタンの文字を設定出来ます。

あとは確認ボタン→送信ボタンをクリックした後の完了画面で表示するテキストもバリデーションルールの上にある完了画面メッセージで設定できるので、書いておいた方が親切かと思います。

条件分岐の設定

例えばラジオボタン(category)の項目で撮影予約とお問い合わせの2種類があったとします。

この時、撮影予約にチェックを入れた時のみ、あとで出てくる予約日時(reservation)の入力を必須にしたいと思うので、

撮影予約にチェック → 予約日時必須
お問い合わせにチェック → 予約日時必須ではない

という感じにしたいと思います。

まずラジオボタンを作ります。

選択肢は書いてある通り1項目につき1行となり、ここでは2つだけですがもちろん増やせます。

そしてコードは次のようになります。

[mwform_radio name=”category” children=”撮影予約,お問い合わせ”]

そしてラジオボタンはバリデーションルールの設定から必須にしておきます。

予約日時の項目に関しては条件分岐となるので、バリデーションルールでは必須にしなくてOKです。

ここからが少し難しい所ですが、functions.phpを編集していきます。

まずは結果から載せます。

functions.php

<?php
// MW WP Form条件分岐
function my_required_reservation( $validation, $data ) {
  $category = $data['category'];
  if( isset( $category ) && $category === '撮影予約') {
    $validation->set_rule( 'reservation', 'noEmpty', array( 'message' => 'お問い合わせ内容に撮影予約を選択した場合、予約日時は必須です。') );
  }
  return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-1665', 'my_required_reservation', 10, 2 );
?>

これを1つずつ見ていきます。

function my_required_reservation( $validation, $data )

ここのreservationに関しては特に決まりはないので分かりやすい名前を付けておきましょう。

今回は条件分岐させたい予約日時のnameであるreservationにしました。

$category = $data['category'];

この ‘category’ にはラジオボタンのnameを入れます。

[mwform_radio name=”category” children=“撮影予約,お問い合わせ”]

左右同じにしておいた方が分かりやすいでしょう。

if( isset( $category ) && $category === '撮影予約')

この ‘撮影予約’ には、予約日時を必須にしたい時の項目を入れます。

ここではnameではなく、以下のchildrenの中にある項目名となります。

[mwform_radio name=”category” children=”撮影予約,お問い合わせ”]

$validation->set_rule( 'reservation', 'noEmpty',
 array( 'message' => 'お問い合わせ内容に撮影予約を選択した場合、予約日時は必須です。') );

ここの ‘reservation’ には予約日時のフォームタグのnameを入れます（下のフォームタグは

今初めて出てきました）

[mwform_text name=”reservation” size=”60″]

そしてメッセージ部分は、ラジオボタンで撮影予約を選択したのに予約日時を入力せずに確認ボタンを押したときに出るエラーメッセージです。

add_filter( 'mwform_validation_mw-wp-form-1665', 'my_required_reservation', 10, 2 )

ここの1665という数字ですが、これは最初の方にも書いたフォーム識別子のショートコードに書いてある数字になります。

またラジオボタンの選択肢が3つあり、そのうち2つを選んだ時に必須にしたい場合は同様にif分を追加すればOKです。

例えば撮影予約、宿泊予約、お問い合わせの3つがあり、そのうち撮影予約と宿泊予約を選択した時のみ予約日時を必須にしたい場合は以下のようになります。

functions.php

<?php
// MW WP Form条件分岐
function my_required_reservation( $validation, $data ) {
  $category = $data['category'];
  if( isset( $category ) && $category === '撮影予約') {
    $validation->set_rule( 'reservation', 'noEmpty', array( 'message' => 'お問い合わせ内容に撮影予約を選択した場合、予約日時は必須です。') );
  }
  if( isset( $category ) && $category === '宿泊予約') {
    $validation->set_rule( 'reservation', 'noEmpty', array( 'message' => 'お問い合わせ内容に宿泊予約を選択した場合、予約日時は必須です。') );
  }
  return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-1081', 'my_required_reservation', 10, 2 );
?>