MW WP Form:カスタマイズ可能なお問い合わせフォームの作成

こんにちは!今回は、お問い合わせフォームを簡単に作成し、カスタマイズするための便利なプラグイン「MW WP Form」についてご紹介します。この記事では、MW WP Formを使ってよくあるフォームを作成する手順に加えて、フォームのデザインカスタマイズまで詳しく解説します。

この記事はこんな人向け

この記事は、以下のような方々に特に役立つ情報を提供します。

– 確認・完了画面が実装できるお問い合わせフォームを作成したい方

– よくあるお問い合わせフォームをカスタマイズしたい方

– お問い合わせのデータ分析をしたい方(グラフ分析・CSV出力)

それでは、さっそくご紹介していきましょう!

プラグインのインストールと有効化

まずはプラグインの導入から始めます。以下の方法でMW WP Formをインストールし、有効化してください。

1. WordPressの管理画面にログインします。
2. プラグインメニューから「新規追加」を選択します。
3. 「MW WP Form」と検索し、プラグインをインストールします。
4. インストールが完了したら、有効化を行います。

プラグインの詳細は公式ダウンロードページを参考にしてください。

フォームの作成前にデザインを確認

フォームを作成する前に、最終的なフォームのデザインを確認しましょう。下記の画像のようなお問い合わせフォームを作成することを目指します。

このデザインを元に、HTMLとCSSを使用してフォームを作成・カスタマイズしていきます。

フォームの作成手順

1. 左側のメニューから「MW WP Form」 > 「新規追加」を選択します。
2. フォーム名を入力し、入力欄を「テキスト」に設定します。
3. テキスト欄に事前に準備していたコードを貼り付けます。
4. 設定が完了したら、「公開」ボタンをクリックして保存します。
5. 「フォーム識別子」をコピーします。

3で貼り付けるコードは下記です。

<table class="cform">
<tbody>
<tr>
<th>お問い合わせ内容<span class="required-srt">*</span></th>
<td>[mwform_select name="お問い合わせ内容" children="選択してください(Please select),商品のお取引について(For business),取材について(For coverage),その他(The others)"]</td>
</tr>
<tr>
<th>御社名
Company name</th>
<td>[mwform_text name="御社名" id="company" size="0"]</td>
</tr>
<tr>
<th>ご担当者様名
Your name<span class="required-srt">*</span></th>
<td>[mwform_text name="ご担当者様名" size="0"]</td>
</tr>
<tr>
<th>フリガナ<span class="required-srt">*</span></th>
<td>[mwform_text name="フリガナ" size="0"]</td>
</tr>
<tr>
<th>郵便番号<span class="required-srt">*</span></th>
<td>[mwform_text name="郵便番号" id="zip" size="0"]</td>
</tr>
<tr>
<th>ご住所</th>
<td>[mwform_text name="ご住所" id="addr" size="0"]</td>
</tr>
<tr>
<th>お電話番号
Telephone number<span class="required-srt">*</span></th>
<td>[mwform_text name="お電話番号" size="0"]</td>
</tr>
<tr>
<th>メールアドレス
Mail address<span class="required-srt">*</span></th>
<td>[mwform_email name="メールアドレス" size="0"]</td>
</tr>
<tr>
<th>メールアドレス(確認用)
Mail address<span class="required-srt">*</span></th>
<td>[mwform_email name="メールアドレス(確認用)" size="0"]</td>
</tr>
<tr>
<th>メッセージ<span class="required-srt">*</span></th>
<td>[mwform_textarea name="メッセージ" cols="50" rows="5"]</td>
</tr>
</tbody>
</table>
<div></div>
<div class="submit-btn">[mwform_submitButton name="確認送信" confirm_value="確認画面へ進む" submit_value="送信する"]</div>
<p style="text-align: center;">[mwform_backButton value="戻る"]</p>

このコードをテキストに追加し、識別子を固定ページで呼び出すと下記のようなフォームが完成します。

このままでも機能としては問題ありませんが、必須の*を赤くしたり、ボタンの色を変えて中央に配置してフォームを整えていきます。

フォームデザイン調整

フォームのデザインを整えるために、下記のコードをCSSに追記します。
追記方法は、追加CSSへの追記もしくはテーマファイルへの追記で行います。

.cform th {
	font-size: 15px;
	width: 30%; 
	border-bottom: solid 1px #d6d6d6;
	padding: 10px 0 10px 15px;
	font-weight: normal;
	text-align:left;
}

.cform td {
	font-size: 18px;
	line-height: 150%;
	border-bottom: solid 1px #d6d6d6;
	padding: 10px 5px;
}

.cform {
	width: 100%;
	margin: auto;
}

.cform [type=submit] {
	display: inline-block;
	font-size: 20px;
	padding: 10px 30px;
	text-decoration: none;
	background: #ff8f00;
	color: #FFF;
	border-bottom: solid 4px #B17C00;
	border-radius: 3px;
}

.cform option,
.cform textarea,
.cform input[type=text],
.cform input[type=email],
.cform input[type=search],
.cform input[type=url] {
	width: 100%;
}

.required-srt {
	font-size: 13pt;
	color: #ce0000;
	border-radius: 3px;
	margin-left: 10px;
	vertical-align: middle;
}


.submit-btn input {
	background: #fff;/*ボタンカラー*/
	width: 70%;
	max-width: 550px;
	min-width: 220px;
	margin: 30px auto;
	display: block;
	border: 1px #C4A464 solid;
	text-align: center;
	padding: 15px;
	color: black;
	transition: all 0.4s ease;
}

.submit-btn input:hover {
	background: #C4A464;
	color: #fff;
	border: 1px #C4A464 solid;
}


@media only screen and (max-width:767px) {
	.cform th,
	.cform td {
		width: 100%;
		display: block;
		border-top: none;
	}
	

}

このコードを追記すると下記のようなフォームが完成します。

このCSSコードを追加することで、フォームの入力欄やボタンのスタイルを調整できます。色や余白、ボーダーなどをカスタマイズし、フォームをより魅力的に仕上げましょう。

まとめ

以上で、MW WP Formを使用してお問い合わせフォームを作成し、デザインカスタマイズする手順をご紹介しました。WordPressのプラグインを利用することで、簡単にカスタマイズ可能なフォームを作成することができます。ぜひこれらの手順を試してみて、自分のウェブサイトに最適なフォームを作成してみてください。
今回は簡単なフォームの説明のみを取り上げましたが、MW WP Formは冒頭でも書いたとおり、いろいろなカスタマイズをすることができるプラグインです。今後はそれらについても取り上げていきたいと思うので、よかったらまた見てください!

上部へスクロール