【コピペOK】MW WP Form(問い合わせフォーム)の設定方法とカスタマイズ
スポンサーリンク
こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。

WordPressの問い合わせフォームで最も有名なのは「ContactForm7」ですが、僕はいつも「MW WP FORM」という問い合わせフォームのプラグインを使用しています。理由としては、昔外注で仕事をもらっていたクライアントから「MW WP Formを使って下さい」と指示があり、その時に慣れたからというだけです。ネットで検索すると、「ContactForm7」には確認画面がないので「MW WP FORM」を使用するという記事が載っていました。なるほど、たしかに!
今回は、僕がいつも設定している方法を丸ごと書きます。誰かの役に立つために(今後の自分の制作をスムーズに行うために)!
それでは、書いていきます。
目次
MW WP FORM のインストールを行う

フォームを作成する
プラグインをインストールして有効化すると、管理画面サイドバーに「MW WP FORM」が出てくるので、新規追加を押してフォームを作成します。タイトルのエリアには、分かりやすいタイトルを入力して下さい。例:お問い合わせフォーム 下の本文入力エリアには、HTMLとショートコードを使用して、フォームを作成します。フォームタグジェネレーターを使用して入力することができますが、今回は僕が使用しているものを丸ごと貼り付けておきます。お問い合わせフォーム本文入力エリア
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<table class="mailform-tbl"> <tbody> <tr> <th>お名前 <span class="attention">※</span></th> <td class="w50">[mwform_text name="your-name"]</td> </tr> <tr> <th>フリガナ<span class="attention">※</span></th> <td class="w50">[mwform_text name="kana"]</td> </tr> <tr> <th>会社名</th> <td class="w50">[mwform_text name="company-name"]</td> </tr> <tr> <th>メールアドレス <span class="attention">※</span></th> <td class="w50">[mwform_text name="your-email"]</td> </tr> <tr> <th>電話番号</th> <td class="w50">[mwform_text name="tel"]</td> </tr> <tr> <th>住所</th> <td class="w80">[mwform_text name="addr"]</td> </tr> <tr> <th>お問い合わせ内容 <span class="attention">※</span></th> <td class="w50">[mwform_select post_raw="true" name="item" children=":選択してください,サービスについて,ご意見・ご相談,その他"]</td> </tr> <tr> <th>お問い合わせ詳細 <span class="attention">※</span></th> <td class="w80">[mwform_textarea name="your-message" placeholder="ご意見・ご相談など、何でもお気軽にお問合わせください"]</td> </tr> </tbody> </table> <p id="submit-button">[mwform_submitButton preview_value="確認画面へ" submit_value="送信する"] [mwform_backButton value="戻る"]</p> |
完了画面メッセージ
別で固定ページで送信完了ページを作成するため、ここは空欄でOK。URL設定
入力画面URL
/contact/確認画面URL
/contact/完了画面URL
/contact/complete/エラー画面URL
空欄でOKバリテーションルール
必須項目を適用する項目にのみ、バリテーションを適用させます。 サンプルですが、一応上のコードと同じになるように記述しておきます。your-name
必須項目にチェックkana
必須項目にチェックyour-email
必須項目にチェックitem
必須項目にチェックyour-message
必須項目にチェック「自動返信メール」の設定
自動返信メールのエリアに入力するサンプルを書いておきます。各自アレンジして使って下さい。件名
【自分の会社名】お問い合わせありがとうございます送信者
自分の会社名送信元(E-mailアドレス)
自分のメールアドレス本文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
{your-name}様 この度は【自分の会社名】にお問い合わせをいただき、誠にありがとうございます。 頂戴いたしましたお問い合わせにつきましては、内容を確認の上、後ほどご回答いたします。 なお、お問い合わせの内容によっては、ご回答まで数日かかる場合やご回答いたしかねる場合がございます。 恐れ入りますが、予めご了承くださいますようお願いいたします。 お問い合わせいただきました内容は、下記の通りです。 ----------------------------------- ■お名前 {your-name} ■フリガナ {kana} ■会社名 {company-name} ■メールアドレス {your-email} ■電話番号 {tel} ■住所 {addr} ■お問い合わせ内容 {item} ■お問い合わせ詳細 {your-message} ----------------------------------- 自分の会社名 自分のホームページアドレス |
自動返信メール
your-email管理者宛メール設定
送信先(E-mailアドレス)
自分のメールアドレスCC(E-mailアドレス)
必要であれば入力。複数入力する場合は「,」を使用する。BCC(E-mailアドレス)
必要であれば入力。複数入力する場合は「,」を使用する。件名
【自分の会社名】ホームページからお問い合わせ送信者
{your-name}Return-Path(メールアドレス)
空白でOK送信元(E-mailアドレス)
{your-email}本文
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
【自分の会社名】よりお問い合わせがありました。 以下の内容で承りました。内容をご確認の上、ご返信下さい。 ----------------------------------- ■お名前 {your-name} ■フリガナ {kana} ■会社名 {company-name} ■メールアドレス {your-email} ■電話番号 {tel} ■住所 {addr} ■お問い合わせ内容 {item} ■お問い合わせ詳細 {your-message} ----------------------------------- このメールは【自分の会社名】ホームページのお問い合わせフォームから送信されました。 |
設定
問い合わせデータをデータベースに保存
チェックする それ以外はチェックしなくてOK。 このページでの記述は以上です!あとは固定ページを作成してお問い合わせフォームと送信完了ページを実装していきます。固定ページにショートコードを追加する
フォーム識別子というフォームに個別に作られるショートコードを固定ページに貼り付けるだけでOKです。送信完了ページも同時に作成しておきましょう。送信完了ページを作るときのポイント
・親ページをお問い合わせページ(contact)にする ・パーマリンクを「complete」にする ・ページ内にフォーム識別子を書くMW WP FORM レスポンシブ対応のCSSコード
最後にレスポンシブに対応させたCSSを書いておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
.mw_wp_form{ width: 100%; color: #333; } .mw_wp_form table.mailform-tbl{ width: 100%; margin-bottom: 40px; } .mw_wp_form table tr{ width: 100%; border-bottom: 1px dotted #ccc; padding: 30px 0; font-weight: normal; } .mw_wp_form table tr:first-child{ border-top: 1px dotted #ccc; } .mw_wp_form table th{ padding: 20px 0; text-align: left; vertical-align: top; font-weight: normal; width: 30%; float: left; } .mw_wp_form table th .attention{ font-size: 80%; margin-left: 10px; color: red; padding: 3px; } .mw_wp_form table td{ padding: 20px 0; width: 70%; float: left; } .mw_wp_form table td.w50 input,.mw_wp_form table td.w50 select{ width: 50%; box-sizing: border-box; } .mw_wp_form table td.w80 input,.mw_wp_form table td.w80 select{ width: 80%; box-sizing: border-box; } .mw_wp_form table td.w80 textarea{ width: 80%; box-sizing: border-box; } .mw_wp_form #submit-button input { margin: 0 auto; display: block; padding: 10px 30px; border: 1px solid #333; background: #333; color: #fff; box-sizing: border-box; height: 40px; -webkit-appearance: none; border-radius: 5px; font-size: 90%; } @media (max-width: 599px) { /* small devices */ .mw_wp_form table td.w50 input,.mw_wp_form table td.w50 select{ width: 100%; box-sizing: border-box; } .mw_wp_form table td.w80 input,.mw_wp_form table td.w80 select{ width: 100%; box-sizing: border-box; } .mw_wp_form table td.w80 textarea{ width: 100%; box-sizing: border-box; } .mw_wp_form #submit-button input { margin: 0 auto; display: block; padding: 10px 30px; border: 1px solid #333; background: #333; color: #fff; box-sizing: border-box; height: 40px; -webkit-appearance: none; border-radius: 5px; font-size: 90%; } } |
最後に
以上で設定は完了です。それぞれのホームページで若干デザインが崩れたりする可能性があるので、そこは各自で修正お願いします。スポンサーリンク