【WordPress】コピペだけ「MW WP Form」でレスポンシブな問い合わせフォームを作る

2018年7月23日2018年8月22日WordPress

1 コピペでレスポンシブ対応の問い合わせフォームを作る
2 完成例
3 まとめ

WordPressでホームページを運営していると自ずと「問い合わせフォーム」が必要になってきます。
WordPressには問い合わせフォームを簡単に作ることが出来るプラグインはあります。
その中でも私がおすすめしている問い合わせフォームプラグインは「MW WP Form」です。

このプラグインは問い合わせフォームを手軽に作成することが出来るので、ぜひ使ってみてください。
しかし、どのプラグインにも言える問題があります。
それは、「デザイン（CSS）は自分で組まなければならない」という事です。

せっかくホームページに問い合わせフォームを設置したのにデザインがされておらず、わかりにくいフォームだとホームページの評価はガクッと下がります。

今回はコピペで出来る「MW WP Form」のデザインをご提供＆解説していきます。

コピペでレスポンシブ対応の問い合わせフォームを作る

CSSをコピー

デザインをする上で必須なのはCSSです。
導入方法はいくつかありますが、WordPressなら共通で出来る方法をご紹介します。

まず下記のCSSをメモ帳などにコピーします。

.cform th {
	font-size: 14px;
	width: 20%; /*変なところで改行される場合はここの数字を変更します。*/
	border-bottom: solid 1px #d6d6d6;
	padding: 10px 0 10px 15px;
	font-weight: normal;
}

.cform td {
	font-size: 14px;
	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: 8pt;
	padding: 5px;
	background: #ce0000;
	color: #fff;
	border-radius: 3px;
	margin-left: 10px;
	vertical-align: middle;
}

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

.submit-btn input {
	background: #00142c;
	width: 60%;
	max-width: 550px;
	min-width: 220px;
	margin: 30px auto;
	display: block;
	border: 1px #00142c solid;
	text-align: center;
	padding: 5px;
	color: #fff;
	transition: all 0.4s ease;
}

.submit-btn input:hover {
	background: #fff;
	color: #00142c;
}

このCSSはレスポンシブ対応で、スマートフォンでもきれいにデザインされたフォームを表示させることが出来ます。

CSSの設置

コピーしたCSSを実際にWordPresに設置するのですが、テーマに直接設置してしまうと、テーマの更新時に消えてしまいます。
なので、今回は「カスタマイズ」からCSSを設置します。

管理画面から「外観」>「カスタマイズ」>「追加CSS」の順にクリックします。

テキストボックスが表示されるので先ほどコピーしたCSSを全て貼り付けて「公開」をクリックします。

これでCSSのコピペは完了です。

MW WP Formでフォーム内容をコピペする

MW WP Formでフォームを作成するのですが、CSSで形を整えたフォームを作成するにはHTMLで作成していく必要があります。

まず、下記のHTMLをコピーします。

<table class="cform">
<tbody>
<tr>
<th>お名前<span class="required-srt">必須</span></th>
<td>[mwform_text name="your-name" size="0"]</td>
</tr>
<tr>
<th>フリガナ<span class="required-srt">必須</span></th>
<td>[mwform_text name="hurigana" size="0"]</td>
</tr>
<tr>
<th>メールアドレス<span class="required-srt">必須</span></th>
<td>[mwform_email name="mail" size="0"]</td>
</tr>
<tr>
<th>メールアドレス（確認）<span class="required-srt">必須</span></th>
<td>[mwform_email name="mail-confirm" size="0"]</td>
</tr>
<tr>
<th>お問い合わせ内容<span class="required-srt">必須</span></th>
<td>[mwform_textarea name="contents" cols="50" rows="5"]</td>
</tr>
</tbody>
</table>
<div class="submit-btn">[mwform_submitButton name="確認送信" confirm_value="確認画面へ進む" submit_value="送信する"]</div>
<p style="text-align: center;">[mwform_backButton value="戻る"]</p>

MW WP Formのフォーム作成ページを開きます。
「テキスト」に切り替えてコピーしたタグを貼り付けます。