MW WP Formの使い方を簡単に教えて欲しい！できれば設定方法もつけて解説して欲しいな
今回はそういった疑問にお答えします。
この記事ではサンプルとして実際に入力画面と完了画面に分けたお問い合わせを作っていきながら内容を解説していきます。
ただしHTMLのコードをわかっていないといけないので苦手な場合はもう少し簡単なContact Form 7というプラグインがあるのでそちらの方がおすすめです。
このページの目次
MW WP Formの使い方と設定方法
MW WP Formの使い方と設定方法をそれぞれ解説していきます。まずは基本的なMW WP Formの使い方をご紹介します。
MW WP Formの使い方
MW WP Formの使い方の流れですが、プラグインをインストールし有効化して設定をしていきますのでまずはインストールと有効化作業を行なっていきます。
インストール方法
1まずはWordPressの管理画面左のサイドバーより「プラグイン」→「新規追加」をクリックします。
2検索欄に「MW WP Form」をコピペします。
有効化
1「有効化」をクリックします。
MW WP Formの設定方法
ここからMW WP Formの設定を解説していきます。MW WP Formの特徴としてお問い合わせの入力画面、完了画面などそれぞれの画面を指定できるのが最大のメリットです。
ここでは実際に簡単なフォームを作成してみます。まずは完成後のフォームをみてみましょう。
完成後のフォーム
個人のお問い合わせだと名前やメールアドレス、お問い合わせ内容を入力するのが一般的かと思いますので項目はその3つを選びました。装飾などは特に加えていないのでシンプルなお問い合わせです。
入力画面の作り方
まずは基本となる入力画面から作っていきます。
1管理画面左のサイドバーより「MW WP Form」→「新規追加」をクリックします。
この画面でフォームを作っていきます。
2「タイトル」は複数作った時にでもわかりやすいタイトルをつけてください。
ここでは「メインお問い合わせ」とつけました。
3続いてフォームの内容を決めていきます。要素を追加する場合は「メディアを追加」の下部に表示されている「選択してください」をクリックして追加したい要素を選びます。
先ほどの完成画面にしたがって名前を入力できる要素を追加したいので「テキスト」を選択し「フォームタグを追加」をクリックします。
4要素の設定をします。今回はテスト用のフォームなので必須項目のname要素だけ「name」と入力しました。
詳しくは以下の表に簡単に意味を書いたのでカスタマイズしたい場合の参考にしてください。
| name | 出力されるinputのnameの値 |
|---|---|
| id | 要素に任意のidを付与 |
| class | 要素に任意のclassを付与 |
| size | inputのsizeの値 |
| maxlength | 入力できる文字数の上限 |
| 初期値 | あらかじめ任意の初期値を配置 |
| placeholder | inputのplaceholderの値 |
| エラー表示 | チェックを入れるとエラーが非表示 |
| 半角英数字に変換 | チェックを入れいると半角英数字に変換 |
5「Insert」をクリックします。
これで名前の項目が挿入されました。続いて他の項目も同じ手順で入力していきましょう！
メールアドレスは「メール」を選択しnameに「mail」、お問い合わせ内容は「テキストエリア」を選択しnameに「text」、最後に送信ボタンは「送信ボタン」を選択しnameに「send」を入力し追加してください。
あとはわかりやすいように要素の前にそれぞれ要素名を入力し改行を入力しておきました。そうすると以下のようなコードになるかと思います。
<p>お名前</p><br>
[mwform_text name="name" size="60"]
<p>メールアドレス</p><br>
[mwform_email name="mail" size="60"]
<p>内容</p><br>
[mwform_textarea name="text" cols="50" rows="5"]
[mwform_bsubmit name="send" value="send"]送信する[/mwform_bsubmit]6最後に「公開」をクリックし保存します。
これで入力画面が完成したので実際に画面に表示するために画面右に表示されているフォーム識別子のコードをコピーしておきます。
次に票するためのページを作成します。固定ページと投稿どちらでも作成できますが、固定ページがおすすめです。特に不都合がなければ固定ページで作りましょう！
1画面左の「固定ページ」→「新規追加」をクリックします。
2「タイトル」や「パーマリンク」は任意でつけれますがここではそれぞれ「お問い合わせ」、「cotact-form」としました。
3先ほどのショートコードを入力欄に貼り付けます。
コードを貼り付けるときはHTMLを入力できるテキストタブにしてから貼り付けましょう。
4「更新」をクリックして保存します。
完成したページを見てみる
保存が終わったら作成したページを見てみましょう。以下のような画面が表示されていれば成功です。
またこの時点では送信ボタンを押してもエラーが表示されますが、後ほどメールアドレスの設定を行うと治りますので安心してください！
画面が表示されない場合はパーマリンクで設定したURLになっていること、コピペしたショートコードが間違っていないことをそれぞれ確認してみましょう。
完了画面
次にお問い合わせを入力し送信ボタンを押した後に表示される完了画面を作っていきます。先ほどのMW WP Formを設定した画面に戻りましょう。
1「完了画面メッセージ」までスクロールします。
2完了画面に表示したい内容を入力します。今回は以下のような文章を入力してみたので文章が浮かばない場合は以下をコピペしてカスタムしてみてください。
<p>お問い合わせありがとうございます。内容を確認し返信させて頂きます。
もし返信がない場合は正しくフォームが動いていない可能性があるので大変お手数ですが、以下までご連絡をお待ちしています。</p>
<p>xxxx@gmail.com</p>
1続いて１つ下の「URL設定」を設定していきます。この設定項目で画面を別々のURLに振り分けることができます。
今回はせっかくなので入力画面と完了画面の２つに分けて作成していきましょう。
入力画面URLには先ほど作って確認した入力画面のURL、完了画面にはこれから新しくページを作る完了画面のURLを入力します。ここでは「https://ドメイン名/cotact-complete/」と入力しました。
何も入力しない場合は同じURLで表示され、URLを入力したら画面を別々のページに分けることができます。別々に分ける場合はそれぞれのページにショートコードを貼り付ける必要があります。今回はせっかくなので入力画面と完了画面の２つに分けて作成していきましょう。
【重要】メールアドレスの設定をする
ここで重要なメールアドレスの設定を行なっていきます。すでに試された方がいらっしゃるかもしれませんが、今ままで作ったフォームで送信ボタンをクリックしてもエラーが出ていたかと思いますが、それはこのメールアドレスの設定を行なっていないから表示されていたものになります。
相手宛てメールの設定
メールに関しては相手に届く用の設定とサイト運営者に届く用の設定２つがありますので１つずつご紹介します。まずは相手に届くメールの設定を行なっていきます。
1画面右のサイドバーにある「自動返信メール設定」までスクロールします。
2以下に簡単に項目を説明しましたのでそちらを参考入力します。
| 件名 | メールに表示される「件名」 |
|---|---|
| 送信者 | メールに表示される「送信者名」 |
| Reply-to（メールアドレス） | 自動返信に返信した際に届くメールアドレス |
| 本文 | メールに表示される「本文」 |
| 自動返信メール | 相手のメールアドレス、直接入力するのではなく先ほど設置したメールのnameの値を入力 |
| 送信元（E-mailアドレス） | 送信するメールアドレス |
少し補足すると自動返信メールの部分は具体的な例をあげるとname=””となっている文字を指定します。今回の場合は「mail」、送信元とReply-toに関しては分からない場合は両方同じメールアドレスで普段使っているメールアドレスで大丈夫です！
1保存するために少し上にスクロールして「更新」をクリックします。
これで相手のメールは設定できたので続いて管理者用の設定を行います。
サイト管理者用メールの設定
1「管理者宛てメールの設定」までスクロールします。
2こちらも以下に簡単にまとめたのでそちらを参考にしながら入力します。
| 送信先（E-mailアドレス） | メールを受け取るメールアドレスを入力 |
|---|---|
| CC（E-mailアドレス） | CCを使う場合はアドレスを入力 |
| BCC（E-mailアドレス） | BCCを使う場合はアドレスを入力 |
| 件名 | メールに表示される「件名」 |
| 送信者 | メールに表示される「送信者名」 |
| Reply-to（メールアドレス） | 自動返信に返信した際に届くメールアドレス |
| 本文 | メールに表示される「本文」 |
| Return-Path ( メールアドレス ) | エラーが出た場合に返信するメールアドレス |
| 送信元（E-mailアドレス） | 送信するメールアドレス |
1保存するために少し上にスクロールして「更新」をクリックします。
これでメールの設定が完了したのでお問い合わせフォームの動作を確認してみましょう。
まとめ
MW WP Formの使い方と設定方法をご紹介しました。
設定する項目が多いのでなかなか大変かと思いますが、ここを適当に設定してしまうとせっかくのお問い合わせが届かない…といったことになりかねないのでしっかりと設定していきましょう！
