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

2018年8月22日WordPress

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その2

テキストボックスが表示されるので先ほどコピーした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のフォーム作成ページを開きます。
「テキスト」に切り替えてコピーしたタグを貼り付けます。

フォームの設置

その他の基本的な設定を行えばレスポンシブ対応のフォームが出来上がります。

完成例

PCでの表示例:

pcで見た時のフォーム

スマートフォンでの表示例:

スマホで見た時のフォーム

まとめ

今回ご紹介したCSSを少しカスタマイズすればあなただけのオリジナルデザインの問い合わせフォームを作ることが可能です。
ボタンの色を変えるだけでも全く違った雰囲気のフォームが出来るので是非試してみてください。