こんにちは！今回は、お問い合わせフォームを簡単に作成し、カスタマイズするための便利なプラグイン「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は冒頭でも書いたとおり、いろいろなカスタマイズをすることができるプラグインです。今後はそれらについても取り上げていきたいと思うので、よかったらまた見てください！