【WordPress】2023年、MW WP Formの使い方を解説

シュウ

今回は【WordPress】MW WP Formの使い方
の解説になります！

こんな方に読んでほしい

WordPressを学び始めた方へ
お問い合わせ関連のプラグインを探してる方へ
今回はWordPressの「MW WP Form プラグイン」について解説しております。

[記事の内容]

MW WP Formとは

「MW WP Form」　とは、WordPressのお問い合わせプラグインになります。
このプラグインを紹介するポイントと問題点があります。

ポイント

日本語対応しており、管理画面も見やすいです。
確認画面、エラー画面、完了画面の作成が可能です。
バリデーションルールの設定も可能です。
お問い合わせのデータの保存可能、CSV出力が可能です。

問題点

CSS(レイアウト)はご自身で記述しなければなりません。
ショートコードをコピー&ペーストしてフォームを実装します。
設定項目が多いです。

「MW WP Form」は、とても使いやすい反面、少し知識が必要になってきます。
ですが、このプラグイン一つで全てのことが設定できるので、しっかり覚えておきましょう。
MW WP Formの公式サイトは以下になります。

MW WP Formの使い方

●1:プラグインをインストール: プラグインをインストール後、「有効化」を選択

●2:設定画面に移動: 2：管理画面の「MW WP Form」をクリッします。

管理画面について

●1:タイトルを入力: 「お問い合わせ」などの分かりやすいタイトル名にしておきましょう。

●2:フォーム識別子: フォーム識別子の「ショートコード」を、固定ページのお問い合わせのエディタに貼り付け、保存しておきます。

●3:公開: 固定のページの保存が完了後、一度MW WP Formの方も公開(保存)しておきましょう。

フォーム作成について

MW WP Formのフォームにはたくさんの種類があり、使用方法は同じですので、
よく使うフォームのみ解説していきます。

●4：フォームを選択: 「選択してください」のメニューから「テキスト」を選択し、「フォームタグを追加」をクリックします。

●5:mwform_texの設定: nameは、必須項目です。「name = お名前」など入力をしておきましょう
id、classは、CSSでレイアウトする場合は入力しておきましょう
sizeは、フォームのサイズになります
maxlengthは、文字数になります
初期値は、「value=”山田太郎”」の値になります
placeholderは、「placeholder=”山田太郎”」の値になります

●6：Insert: 「Insert」で入力完了になります。
以下のように出力されたら完了です。

[mwform_text name="名前" size="60" placeholder="山田 太郎"]

だたし、このままでは見た目が悪く、CSSでのレイアウトが難しいので
以下のようにコードを追加し記述直します。

<table class="formTable">
	<tbody>
		<tr>
			<th><span>【必須】</span>お名前</th>
			<td><div>[mwform_text name="お名前" class="cont_inputd" placeholder="例 : 山田　太郎"]</div></td>
		</tr>
	</tbody>
</table>

上記のようにtableタグを使い、記述直します。
tr〜/trまでをブロックと考えておいてください。

反映について

上記のコードに変更後、ブラウザで確認しますが、まだ反映しません。
最初に、固定ページ(お問い合わせ)にショートコードを貼り付け保存している状態です。
次にやる作業は以下のようになります。

●7：page-contact.php: 固定ページ(お問い合わせ)を登録しているファイル(page-contact.php)にコードを記述します。

<?php
/*
Template Name: お問い合わせ
*/
?>
<?php get_header();?>

<div class="form-area">
 <?php if( have_posts() ): while( have_posts() ): the_post(); ?>
 <?php the_content(); ?>
 <?php endwhile; endif; ?>
</div>

<?php get_footer();?>

重要な箇所は、9行〜11行になります。
have_posts / the_contentを記述することで、固定ページで登録したショートコードを読み込み、出力します。
以下のようにブラウザで表示すれば完了になります。

現状、CSSは触れていないので、
ここではブラウザ上で表示できていれば問題ありません。

簡易的なフォーム作成について

次に、名前以外にも、電話番号、メールアドレスなど作成していきます。
下記のように作成します。

<table class="formTable">
	<tbody>
		<tr>
			<th><span>【必須】</span></th>
			<td><div>[mwform_checkbox name="お問い合わせ項目" children="ご質問,求人,その他" separator=","]</div></td>
		</tr>
		<tr>
			<th><span>【必須】</span>お名前</th>
			<td><div>[mwform_text name="お名前" class="cont_input" placeholder="例 : 山田　太郎"]</div></td>
		</tr>
		<tr>
			<th><span>【必須】</span>ふりがな</th>
			<td><div>[mwform_text name="ふりがな" class="cont_input" placeholder="例 : やまだ たろう"]</div></td>
		</tr>
		<tr>
			<th><span>【必須】</span>電話番号</th>
			<td><div>[mwform_text name="電話番号" class="cont_input" placeholder="例 : 012-4567-8900"]</div></td>
		</tr>
		<tr>
			<th><span>【必須】</span>メールアドレス</th>
			<td><div>[mwform_text name="メールアドレス" class="cont_input" placeholder="例 : info@"]</div></td>
		</tr>
		<tr>
			<th><span>【必須】</span>性別</th>
			<td><div>[mwform_radio name="性別" children="男性,女性"]</div></td>
		</tr>
		<tr>
			<th><span>【必須】</span>お返事の時間帯</th>
			<td><div>[mwform_select name="お返事の時間帯" children="午前,午後"]</div></td>
		</tr>
		<tr>
			<th><span>【必須】</span>お問い合わせ内容</th>
			<td><div>[mwform_textarea name="お問い合わせ" cols="50" rows="5" placeholder="お気軽にご相談ください"]</div></td>
		</tr>
	</tbody>
</table>
<div id="submit">
[mwform_backButton class="backbtn" value="入力画面へ戻る"]
[mwform_submitButton name="send" confirm_value="入力内容確認" submit_value="この内容で送信" class="confbtn"]
</div>

ラジオボタン、チェックボックス、セレクトボックスについて

ラジオボタン、チェックボックス、セレクトボックスはテキストやテキストエリアとは違い、選択肢が追加されています。
下記の内容になります。

●フォームを選択: 「選択してください」のメニューから「ラジオボタン、チェックボックス、セレクトボックス」を選択し、「フォームタグを追加」をクリックします。

●8.9:設定: nameは、必須項目です。「name = 性別」など入力をしておきましょう
id、classは、CSSでレイアウトする場合は入力しておきましょう
選択肢は、項目を入力します。
選択肢01
選択肢02
選択肢03
1項目につき1行で入力してください。例：値1↵値2 もしくはキー1:値1↵キー2:値2　送信値と表示値を「:」で分割できます。

●初期値: 初期値は、選択肢に男性、女性とした際に、初期から男性にチェックが入ります。
「value=”男性”」の値になります

●Insert: 「Insert」で入力完了になります。

●補足: ラジオボタン、チェックボックスには、「表示方法」の項目があります。
初期は横並びですが、チェックを入れると垂直方向に並びます。

送信ボタン、リセットボタンについて

次に、送信ボタン、リセットボタンになります。
下記の内容になります。

●フォームを選択: 「選択してください」のメニューから「ボタン項目(input)」の、「確認・送信、戻るボタン」をクリックします。

●10:name設定: nameは、必須項目です。「name = send」など入力をしておきましょう

●Insert: 「Insert」で入力完了になります。

●補足: ボタン名を変更する際には、文字列の変更をしてください。

CSSについて

上記までで簡易的なフォームは完了しました。
まだCSS部分は触れていないので、現状は以下のようになります。

CSSは以下のように記述します。
文字のサイズやボタンの色など変更可能です。

.formTable {
	width: 100%;
	text-align: left;
	box-sizing: border-box;
	border-collapse: collapse;
	border-top:1px solid #c3c3c3;
	margin: 0 auto;
}
table.formTable td,
table.formTable th{
	padding: 30px;
	font-size:14px;
	box-sizing: border-box;
	border-bottom:1px solid #c3c3c3;
	border-collapse: collapse;
}
table.formTable th{
	width:25%;
    font-weight: normal;
   	box-sizing: border-box;
}
table.formTable th span{
	width:30%;
	font-weight:normal;
	color:#C10D23;
}
table.formTable td .cont_input{
	width:80%;
	height: 50px;
	padding: 15px;
	box-sizing: border-box;
	font-size: 14px;
	border: 1px solid #ccc;
	overflow: hidden;
}
textarea {
	width:100%;
	height:200px;
	border: none;
	border: 1px solid #ccc;
	padding: 15px;
	box-sizing: border-box;
	font-size: 14px;
}
#submit{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 50px auto;
}
#submit input{
    background-color: #c00;
    border: 1px solid #c00;
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    padding: 25px 40px;
    letter-spacing: 1px;
    font-weight: bold;
    display: block;
    border-radius: 5px;
    width: 48%;
	cursor:pointer; 
}
#submit input:hover{
	background-color: #fff;
	border: 1px solid #c00;
	border-radius: 5px;
	color: #4d4d4d;
}
#submit input.backbtn{
	background: #408a84;
	color: #fff;
	border:1px solid #408a84;
}
#submit input.backbtn:hover{
	background: #fff;
	color: #408a84;
}

table.formTable th,
table.formTable td {
	width: 100%;
	display: block;
	border:1px solid #c3c3c3;
}
table.formTable td .cont_input{
	width:100%;
}
#submit input,
#submit input.backbtn{
	width: 100%;

}
input[type="submit"] {
	appearance: none;
	-webkit-appearance: none;
}

以下のようになれば完成になります。

次に、バリデーションルールになります。

バリデーションルールについて

バリデーションルールとは、項目の必須を設定することになります。
現状、バリデーションルールを設定していない場合は、そのまま確認画面に移行してしまうので注意してください。

●1：バリデーションルールを追加: 最初にバリデーションルールを追加をクリックしてください。

●2:バリデーションを適用する項目: バリデーションを適用する項目は、nameで指定した文字列を入力します。
例：「name=”お名前”」と指定した場合は、「お名前」と入力してください

●3:必須項目にチェック: 「必須項目」にチェックを入れて、保存完了になります

●補足: 「ふりがな」の場合は「必須項目」 + 「ひらがな」にチェックを入れます
「フリガナ」の場合は「必須項目」 + 「カタカナ」にチェックを入れます
「ラジオボタン・チェックボックス」の場合は「必須項目（チェックボックス）」のみにチェックを入れます
「電話番号」の場合は「必須項目」 + 「電話番号」にチェックを入れます
「メールアドレス」の場合は「必須項目」 + 「メールアドレス」にチェックを入れます
※半角数字、半角英数字などもあります。

注意！
例：「ふりがな」に対して、「ひらがな」にチェックを入れ、更に「必須項目」にもチェックを入れなければなりません。
計、2箇所にチェックが必要になります。
「ラジオボタン・チェックボックス」の場合は、「必須項目（チェックボックス）」の1箇所にチェックを入れてください。

上記の画像のように、バリデーションルールを追加した際には「未入力です。」と表示します。
また、「ふりがな」の項目に対して「カタカナ」で入力した際にはエラー表示になり「ひらがなで入力してください。」と表示します。

URL設定について

次にURL設定についてです。
現状、確認画面、完了画面、エラー表示した際にも「https://ドメイン/contact/」の状態のままになっております。
URL設定をすることで、
入力画面URLを「https://ドメイン/contact/」
確認画面URLを「https://ドメイン/contact/confirm/」
完了画面URLを「https://ドメイン/contact/thanks/」
エラー画面URLを「https://ドメイン/contact/error/」に設定します。
以下の手順で準備します。

●1：ファイルの準備: 固定ページに登録するファイルを用意します。
入力画面　page-contact_confirm.php
確認画面　page-contact_thanks.php
エラー画面　page-contact_error.php

<?php
/*
Template Name: 確認画面
*/
?>
<?php get_header();?>

<div class="form-area">
 <?php if( have_posts() ): while( have_posts() ): the_post(); ?>
 <?php the_content(); ?>
 <?php endwhile; endif; ?>
</div>

<?php get_footer();?>

<?php
/*
Template Name: 完了画面
*/
?>
<?php get_header();?>

<div class="form-area">
 <?php if( have_posts() ): while( have_posts() ): the_post(); ?>
 <?php the_content(); ?>
 <?php endwhile; endif; ?>
</div>

<?php get_footer();?>

<?php
/*
Template Name: エラー画面
*/
?>
<?php get_header();?>

<div class="form-area">
 <?php if( have_posts() ): while( have_posts() ): the_post(); ?>
 <?php the_content(); ?>
 <?php endwhile; endif; ?>
</div>

<?php get_footer();?>

中身は自由にカスタマイズしてください。

●2：固定ページに登録: 1:タイトルを入力します
2:エディターにショートコードを入力します
3:URL スラッグ名を「confirm」、「thanks」、「error」をそれぞれ入力します
4:ページ属性の親ページを最初に作成したお問い合わせに設定し保存します
※これを3ページ分繰り返してください。

URL設定に登録について

固定ページに登録が完了したら、次に「URL設定」に上記の「URLスラッグ名」を登録します。

●3：URL設定を登録: 入力画面URL/contact/
確認画面URL/contact/confirm/
完了画面URL/contact/thanks/
エラー画面URL/contact/error/ように登録してください。

注意！
URL設定をする際に、
「https://ドメイン/contact/」は、/contact/最後に/(スラッシュ)を入れるようにしてください。
「https://ドメイン/contact」は、/contact最後に/(スラッシュ)は入れないでください。
「https://ドメイン/contact/〇〇〇〇」は、contact/〇〇〇〇最後に/(スラッシュ)は入れないでください。
最後に/(スラッシュ)がある場合と、ない場合は注意してください。

完了画面メッセージについて

完了画面(thanks)ページにいった際に、完了メッセージを表示させます。
上記の入力欄にメッセージを入力しておきます。
page-contact_thanks.phpには、
have_posts / the_contentが記述していますので、完了メッセージが表示する仕組みになっております。

完了画面メッセージCSSについて

CSSに関しては、GoogleChromの検証などで確認していただき、id="mw_wp_form_mw-wp-form-〇〇"のように指定されております。
〇〇の箇所はショートコードの番号になります。
今回だと、id="mw_wp_form_mw-wp-form-596"になります。

#mw_wp_form_mw-wp-form-596 {}

自動返信メール設定について

次に右側の設定について解説していきます。
自動返信メールはお問い合わせをした側に届くメールになります。
以下の箇所を設定してくいださい。

●1：件名: 「お問い合わせ頂きありがとうございます」など、メッセージを追加しておいてください。

●2：送信者: 「会社名」など、メッセージを追加しておいてください

●3：Reply-to（メールアドレス）: 「メールアドレス」を設定しておいてください

●4：本文: 以下の文章を参考にしてみてください

●5：自動返信メール: メールアドレスのnameを設定します
例：「name=”メールアドレス”」なら、「メールアドレス」と指定します
例：「name=”mail”」なら、「mail」と指定します

本文は以下を参考にしてみてください。

{お名前}様

この度は〇〇〇〇にお問い合わせをいただき、誠にありがとうございます。
お問い合わせいただきました内容は、下記の通りです。

---------------------------------------------

■お問い合わせ項目
{お問い合わせ項目}

■お名前
{お名前}

■ふりがな
{ふりがな}

■電話番号
{電話番号}

■メールアドレス
{メールアドレス}

■性別
{性別}

■お返事の時間帯
{お返事の時間帯} 

■お問い合わせ内容
{お問い合わせ内容}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

会社名
住所
電話番号　など

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

入力した内容が、{}の中身になります。

■お名前
{お名前}

■ふりがな
{ふりがな}

↓以下のようなイメージです

■お名前
{山田 太郎}

■ふりがな
{やまだ たろう}

管理者宛メール設定について

管理者宛メールは管理者側に届くメールになります。
以下の箇所を設定してくいださい。

●1：送信先（E-mailアドレス）: 「メールアドレス」を設定しておいてください

●2：件名: 「HPよりお問い合わせがありました。」など、メッセージを追加しておいてください

●3：送信者: 「会社名」など、メッセージを追加しておいてください

●4：Reply-to（メールアドレス）: 「メールアドレス」を設定しておいてください

●5：本文: 以下の文章を参考にしてみてください

●6：送信元（E-mailアドレス）: メールアドレスのnameを設定します
例：「name=”メールアドレス”」なら、「{メールアドレス}」と指定します
例：「name=”mail”」なら、「{mail}」と指定します

本文は以下を参考にしてみてください。

ホームページよりお問い合わせがありました。
ご確認をお願いいたします。
---------------------------------------------

■お問い合わせ項目
{お問い合わせ項目}

■お名前
{お名前}

■ふりがな
{ふりがな}

■電話番号
{電話番号}

■メールアドレス
{メールアドレス}

■性別
{性別}

■お返事の時間帯
{お返事の時間帯} 

■お問い合わせ内容
{お問い合わせ内容}

今回は管理者宛に届くメールですので、会社の情報等は不要かもしれません。
必要な場合は足してください。