この記事では、WordPressのメールフォーム制作用プラグインであるMW WP Formの使い方についての重要な要素をまとめています。
まず最初に、SPONAGO案件制作マニュアルの「MW WP Form マニュアル」をご覧ください。
MW WP Formの場所
各サイトの「WordPress」にログインします。
もし表示されていない場合は、このプラグインがインストールされていない可能性があります。
プラグインのインストールに関する問題があれば、支援員にご相談ください。
MW WP Formの編集画面の説明
●お問い合わせフォームのタイトル: フォームタイトルを設定できます。
●フォームタグジェネレーター: 簡単にコードを記述できるツール。
●本文入力エリア: HTMLやショートコードを用いてフォームを作成可能です。
●完了画面のテキスト: 完了画面に表示させたいテキストを入力します。
●URLの設定: 入力画面、確認画面、完了画面のURLを設定します。
●バリデーションルールの設定: 入力フォームに対する制限やチェック、必須項目の設定が可能です。
●更新・公開ボタン: 更新で現在の状態を保存し、公開が可能です。
●ショートコード（フォーム識別子）: 「フォーム識別子」をコピーして表示したいページに貼り付けることでMW WP Formを表示できます。
●自動返信用メール設定: 問い合わせをしたユーザーに対して、自動的に返信メールを送信する設定ができます。
●管理者宛メール設定: ユーザーが問い合わせをした場合、フォーム管理者に通知が送信されるように設定できます。
●データベースに保存: チェックするとデータベースへの保存が行われます。
お問い合わせフォームの設置の流れ
①「お問い合わせフォームのタイトル 」にタイトルを入力します。（例: 「お問い合わせフォーム」）。
②「更新・公開ボタン」 をクリックして公開します。
③「ショートコード（フォーム識別子）」 をコピーします。
新規固定ページを追加
②「新規固定ページを追加」をクリックしてページを追加します。
Elementorで編集
②「Elementorで編集」をクリックします。
ショートコードの場所
左側のウィジェットをスクロールするか、ウィジェットの検索で「ショートコード」を検索します。
左側のウィジェットの「ショートコード」を画面中央の「ウィジェットをここにドラッグ」にドラッグします。
ショートコードの入力
②「公開ボタン」をクリックして設置は完了です。
これでお問い合わせフォームの設置は完了しました。
ショートコードの設置についての補足説明
ここに表示されているコードを「ショートコード」と呼びます。
このコードをコピーして、フォームを設置したいページに貼り付けてください。
Elementorを使用している場合は、「ウィジェット」の中にある「ショートコード」にコードを貼り付けます。
CSSコードの記述場所
もし表示されていない場合は、このプラグインがインストールされていない可能性があります。
プラグインのインストールに関する問題があれば、支援員にご相談ください。
ここでは「お問い合わせフォームCSS」というタイトルにしています。
「公開」ボタンをクリックすると公開表示されます。
自動返信メールの設定
赤枠に囲まれている入力エリアに入力していきます。
本文入力エリア メールアドレスのフォームの name=”○○○○”←○○○○の中身（自動返信メールに使用する項目のキー）を入力してください。
この入力が一致しない場合は自動返信メールが届きません。
詳細設定は参考サイト「MW WP Formの自動返信メールの設定方法を解説」 （URL） をご参照ください。
バリデーションルールの設定
必須項目のバリデーションルールを設定する場合は、
「バリデーションを適用する項目」の中身と、
「本文入力エリア」のバリエーションルールを設定したいnameの中身を同一に設定します。
そして、「必須項目」にチェックを入れたら、必須項目の設定は完了です。
詳細設定は参考サイト「MW WP Formのバリデーション設定」 （URL） をご参照ください。
URLの設定
ここでは「お問い合わせ-確認-」にしています。
確認ページのCSSは「カスタムCSS＆JS」に記述します。
ここでは
<div class=”contact-confirm-box”>
<p class=”contact-confirm-text”>以下の内容で送信してよろしいでしょうか？</p>
<p>[フォーム識別子]</p>
</div>
と入力しています。
そして更新します。
完了ページのCSSは「カスタムCSS＆JS」に記述します。
ここでは
<div class=”contact-thanks-box”>
<p>[フォーム識別子]</p>
</div>
と入力しています。
そして更新します。
※注意点として「/←スラッシュでスラッグを囲むこと」
そして更新します。
ここでは
確認画面URL 「/confirm/」
完了画面URL 「/thanks/」
にしています。
参考になるサイトまとめ
以下がMW WP Formの作成に役立つサイトの一覧です。今回のマニュアルで紹介しきれない設定や詳しい説明がありますので、ご活用ください。
使い方、作り方など参考になるサイト
MW WP Form の使い方を徹底解説【初心者でも分かる】 （URL）
MW WP Form を使った問合せフォームの作り方 （URL）
自動返信用メール設定、バリデーション設定、URL設定など参考になるサイト
MW WP Form の自動返信メールの設定方法を解説 （URL）
MW WP Form のカスタムバリデーションルール （URL）
郵便番号で住所を自動入力させる方法
MW WP Form 郵便番号で住所自動入力をボタンで実装する （URL）
MW WP Form で郵便番号から住所を自動入力させる方法 （URL）
MW WP Form Contact Form 7でYubinBango（住所自動入力）を使う方法 （URL）
番外編：HTML/CSSについて
初心者の方はProgateのレッスンを受講するとHTML/CSSの理解が深まります。
MW WP Form 、Contact Form7のフォームを作る場合においてHTML/CSSのコードが必須となりますので
以下のレッスンを受講をおすすめします。
ーお問い合わせフォーム Progate 初心者向け学習コースー
☆学習レッスン内容☆
◇HTML & CSS 初級編
HTMLに触れてみよう！
CSSに触れてみよう！
レイアウトを作ろう！
ヘッダーを作ろう！
コンテンツを作ろう！
お問い合わせフォームを作ろう！
◇HTML & CSS 中級編
トップ部分を作ろう
ー透明度、文字の間隔を調整しよう
ーボタンを作ろう
ーレイアウトを整えよう
ーアイコンを使おう
メッセージ部分を作ろう
ーメッセージ部分のレイアウトを作ろう
ー立体的なボタンを作ろう
ークリック時に変化をつけよう
◇HTML & CSS 上級編
メディアクエリ
ーメディアクエリを設定しよう
ーメディアクエリによるレイアウト
レスポンシブデザインの実装
ーフォントをレスポンシブ化しよう
ーmax-width
◇HTML & CSS Flexbox編
Flexboxとは
Flexboxの実装
レスポンシブデザインの実装
メールアドレスとパスワードの詳細については支援員にご相談ください。
HTMLに触れてみよう！
CSSに触れてみよう！
レイアウトを作ろう！
ヘッダーを作ろう！
コンテンツを作ろう！
お問い合わせフォームを作ろう！
がおすすめレッスンです。
トップ部分を作ろう
ー透明度、文字の間隔を調整しよう
ーボタンを作ろう
ーレイアウトを整えよう
ーアイコンを使おう
メッセージ部分を作ろう
ーメッセージ部分のレイアウトを作ろう
ー立体的なボタンを作ろう
ークリック時に変化をつけよう
がおすすめレッスンです。
メディアクエリ
ーメディアクエリを設定しよう
ーメディアクエリによるレイアウト
レスポンシブデザインの実装
ーフォントをレスポンシブ化しよう
ーmax-width
がおすすめレッスンです。
Flexboxとは
Flexboxの実装
レスポンシブデザインの実装
がおすすめレッスンです。