・MW WP Formの使い方は？
こんな疑問にお答えします。
MW WP Formはお問い合わせフォームを簡単に作成できるWordPressプラグインの一つ。
必須項目などの設定も可能。
カスタマイズ性が高く、フォームを作成するさいに重宝しております。
使い方も覚えれば簡単！
ということで、この記事では「MW WP Formの使い方」について解説していきます！
・MW WP Formとは？
・MW WP Formの使い方
・MW WP Formの設定方法
目次
【WordPress】MW WP Formとは？【お問い合わせフォーム】
MW WP Formとは、お問い合わせフォームを簡単に作成できるプラグイン。
簡単に下記をすることができます。
- カスタムフォームを簡単に作成可能。
- フォームに様々な項目を追加できる。
- フォームの項目の配置を変更できる。
- フォームのデザインをカスタマイズできる。
入力・確認・完了画面が作成でき、カスタマイズ性が高いのが特徴です。
【WordPress】MW WP Formの使い方【お問い合わせフォーム】
MW WP Formの使い方はこちらの手順。
- インストールして有効化
- 管理画面の「MW WP Form」項目をクリック
順に見ていきましょう。
まずMW WP Formプラグインをインストールして有効化しましょう。
MW WP Formと検索すればでてきますよ。
有効化すると管理画面の設定に「MW WP Form」の項目がでてきます。
あとはここから新規追加して、フォームを作成・設置していく感じですね。
【WordPress】MW WP Formのフォーム作成・設置方法【お問い合わせフォーム】
というわけでここからは、MW WP Formを使ったフォームの作成と設置についてみていきます。
手順としてはこちら。
- 新規追加
- コードを記述
- コードをフォーム用に修正
- URLを設定
- バリデーションルールを設定
- メールの設定
- 確認・完了ページ作成
- フォームを設置
順に見ていきましょう。
まず新たにフォームを追加していきます。
やり方としては「新規追加」ボタンをクリック。
そしてタイトル部分に「お問い合わせ」など、わかりやすい名前をつけましょう。
そしたら本文入力エリアに、お問い合わせ部分のコードをコピペしていきます。
今回は例として下記のコードを使いますね。
<div class="contact-box">
<table class="contact-table">
<tr class="contact-table__box">
<th><span class="require">必須</span>氏名</th>
<td><input type="text" name="name" class="contact-table__area" placeholder="例）山田 太郎"></td>
</tr>
<tr class="contact-table__box">
<th><span class="require">必須</span>電話番号</th>
<td><input type="tel" name="tel" class="contact-table__area" placeholder="例）000-0000-0000"></td>
</tr>
<tr class="contact-table__box">
<th><span class="require">必須</span>メールアドレス</th>
<td><input type="email" name="email" class="contact-table__area" placeholder="例）example@gmail.com"></td>
</tr>
<tr class="contact-table__box">
<th><span class="require">必須</span>お問い合わせ内容</th>
<td><textarea name="content" class="contact-table__content"></textarea></td>
</tr>
</table>
<div class="button-wrap">
<button type="submit" name="submitBack" value="back" class="button02">入力画面へ戻る</button>
<button type="submit" name="submitConfirm" value="confirm" class="button01">確認画面へ</button>
<button type="submit" name="submit" value="send" class="button01">送信する</button>
</div>
</div>この部分は案件ごとのデザインに合わせてHTMLコーディングをしていきましょう。
コードを本文入力エリアにコピペしていきます↓
テキストエディタで入力しよう！
続いて先ほどのコードを「MW WP Form」のフォーム用に修正していきます。
やり方は簡単。
- フォームタグを選択
- フォームタグを追加をクリック
- 「mwform_～」画面に項目を入力
- 「Insert」をクリックしてコード部分に上書き
まずフォームタグを選択して追加していきます。
例として「テキスト」を選択しました。この部分はinputタグによって、電話番号だったりメールだったり選択しましょう。
そしたら下記画面がでてきます。
name値、id、class名、placeholderの値を設定できますので入力していきます。
入力が終わったら、上書きしたいコード部分を選択して「Insert」をクリックしましょう。
こんな感じ↓
で、実際に修正して完成したコードがこちらになります。
<div class="contact-box">
<table class="contact-table">
<tr class="contact-table__box">
<th><span class="require">必須</span>氏名</th>
<td>[mwform_text name="name" class="contact-table__area" size="60" placeholder="例）山田 太郎"]</td>
</tr>
<tr class="contact-table__box">
<th><span class="require">必須</span>電話番号</th>
<td>[mwform_text name="tel" class="contact-table__area" size="60" placeholder="例）000-0000-0000"]</td>
</tr>
<tr class="contact-table__box">
<th><span class="require">必須</span>メールアドレス</th>
<td>[mwform_email name="email" class="contact-table__area" size="60" placeholder="例）example@gmail.com"]</td>
</tr>
<tr class="contact-table__box">
<th><span class="require">必須</span>お問い合わせ内容</th>
<td>[mwform_textarea name="content" class="contact-table__content" cols="50" rows="5"]</td>
</tr>
</table>
<div class="button-wrap">
[mwform_bback class="button02" value="back"]入力画面へ戻る[/mwform_bback]
[mwform_bconfirm class="button01" value="confirm"]確認画面へ[/mwform_bconfirm]
[mwform_bsubmit name="submit" class="button01" value="send"]送信する[/mwform_bsubmit]
</div>
</div>ちなみにボタン項目部分は「button」の方を使うようにしましょう。
続いてURL設定をしていきます。
これはこのお問い合わせフォームが位置するURLと、確認ページ・完了ページに遷移するURLを入力していきます。
今回はTOPページにお問い合わせフォームを置くとして、下記のように設定しました。
注意点として必ずスラッシュ「/」をつけることを忘れずに。
エラー画面URLは、「記入されていません」などのバリデーションルールに引っかかったときに反映する画面。入力画面URLと同じURLで良いかと。
そしたらバリデーションルールを設定していきます。
これは必須項目だったり、電話番号やメール形式で入力してないと送信できないようにする設定です。
やり方は簡単です。
- 「バリデーションルールを追加」をクリック
- name値を入力
- 設定項目にチェックを入れる
続いてメールの設定をしていきます。
自動返信メールと管理者宛てに届くメールのことですね。
| 件名 | 自動返信のタイトル |
| 送信者 | 自動返信の送信者名 |
| Reply-to | 自動返信に対する返信をするときの送信元アドレス |
| 本文 | 自動返信の本文 |
| 自動返信メール | 自動返信先のアドレス メール項目のname値を入れましょう。今回なら「email」 |
| 送信元 | 自動返信の送信元アドレス |
自動返信メール部分は、必ずメール項目の値を入れましょう。
今回の例だと「email」です。
本文はname値を使い{name値}のように出力します。
お問い合わせ内容
---------------------------------------------
【氏名】
{name} 様
【電話番号】
{tel}
【メールアドレス】
{email}
【お問い合わせ内容】
{content}
---------------------------------------------
| 送信先 | 管理者宛に届くメールアドレス |
| CC | CCのメールアドレス |
| BCC | BCCのメールアドレス |
| 件名 | 管理者宛に届くメールのタイトル |
| 送信者 | 管理者宛に届く送信者名 |
| Reply-to | 管理者宛に届くメールの返信先アドレス |
| 本文 | 管理者宛に届くメールの本文 |
| Return-Path | エラーなどで正常に送信できない時に 送信するメールアドレス |
| 送信元 | 管理者宛の送信元メールアドレス |
送信者部分に名前のname値を入れることで、送信者名を出力することができます。
本文はname値を使い{name値}のように出力します。
下記のお問い合わせがありました。
お問い合わせ内容
---------------------------------------------
【氏名】
{name} 様
【電話番号】
{tel}
【メールアドレス】
{email}
【お問い合わせ内容】
{content}
---------------------------------------------もう少しで終わります！
続いて確認・完了ページを作成しましょう。
先ほど設定したURL通りの固定ページを作っていきます。
確認画面URL
/confirm/
完了画面URL
/complete/
あとは入力・確認・完了ページに作成したフォームの、ショートコードを記述すればOK。
下記部分ですね。
この部分をphpのテンプレートコードにて下記のように記述します。
<?php echo do_shortcode( '[～～]' ); ?>
入力・確認・完了ページそれぞれに、このショートコードを記述する必要があるので注意しましょう。
【WordPress】MW WP Formの使い方【あとは送受信確認】
フォームの設置ができたら、あとは送受信確認をするのみです！
- 確認画面に遷移するか
- 確認画面から入力画面に戻れるか
また戻った時、入力項目が消えてないか - バリデーションルールが機能してるか
- 完了画面に遷移するか
- 自動返信メールは届いているか
- 管理者宛てメールは届いているか
- 他ブラウザでもうまくいくか（safari,firefox,edgeなど）
上記らの確認をしていきましょう。
ちなみに上手く動かない場合は、下記記事を参考にどうぞ↓
【解決】MW WP Formが動かない時の対策５選【メール届かない】 また入力画面が下の方にある場合、スクロールさせたい場合もあるはず。
そんなときの対策がこちら↓
【MW WP Form】画面遷移時のスクロール位置を変える方法 【WordPress】MW WP Formの使い方【お問い合わせフォーム】：まとめ
- 新規追加
- コードを記述
- コードをフォーム用に修正
- URLを設定
- バリデーションルールを設定
- メールの設定
- 確認・完了ページ作成
- フォームを設置
カスタマイズ性のあるお問い合わせフォームを簡単に作成おすすめだよ！
