2018/06/12 2018/11/23

【コピペOK】MW WP Form(問い合わせフォーム)の設定方法とカスタマイズ

こんにちは、フリーランスパパの神田翼(@tsubasa_lsc)です。

WordPressの問い合わせフォームで最も有名なのは「ContactForm7」ですが、僕はいつも「MW WP FORM」という問い合わせフォームのプラグインを使用しています。理由としては、昔外注で仕事をもらっていたクライアントから「MW WP Formを使って下さい」と指示があり、その時に慣れたからというだけです。ネットで検索すると、「ContactForm7」には確認画面がないので「MW WP FORM」を使用するという記事が載っていました。なるほど、たしかに！

今回は、僕がいつも設定している方法を丸ごと書きます。誰かの役に立つために(~~今後の自分の制作をスムーズに行うために~~)！

それでは、書いていきます。

1 MW WP FORM のインストールを行う
2 フォームを作成する
3 完了画面メッセージ
4 URL設定
5 バリテーションルール
6 「自動返信メール」の設定
7 管理者宛メール設定
8 設定
9 固定ページにショートコードを追加する
10 MW WP FORM レスポンシブ対応のCSSコード
11 最後に

MW WP FORM のインストールを行う

「MW WP Form」公式サイトからインストールするか、プラグイン検索で「MW WP Form」と入力してインストールして下さい。

フォームを作成する

プラグインをインストールして有効化すると、管理画面サイドバーに「MW WP FORM」が出てくるので、新規追加を押してフォームを作成します。タイトルのエリアには、分かりやすいタイトルを入力して下さい。例：お問い合わせフォーム

下の本文入力エリアには、HTMLとショートコードを使用して、フォームを作成します。フォームタグジェネレーターを使用して入力することができますが、今回は僕が使用しているものを丸ごと貼り付けておきます。

お問い合わせフォーム本文入力エリア

<table class="mailform-tbl">
<tbody>
<tr>
<th>お名前 <span class="attention">※</span></th>
<td class="w50">[mwform_text name="your-name"]</td>
</tr>
<tr>
<th>フリガナ<span class="attention">※</span></th>
<td class="w50">[mwform_text name="kana"]</td>
</tr>
<tr>
<th>会社名</th>
<td class="w50">[mwform_text name="company-name"]</td>
</tr>
<tr>
<th>メールアドレス <span class="attention">※</span></th>
<td class="w50">[mwform_text name="your-email"]</td>
</tr>
<tr>
<th>電話番号</th>
<td class="w50">[mwform_text name="tel"]</td>
</tr>
<tr>
<th>住所</th>
<td class="w80">[mwform_text name="addr"]</td>
</tr>
<tr>
<th>お問い合わせ内容 <span class="attention">※</span></th>
<td class="w50">[mwform_select post_raw="true" name="item" children=":選択してください,サービスについて,ご意見・ご相談,その他"]</td>
</tr>
<tr>
<th>お問い合わせ詳細 <span class="attention">※</span></th>
<td class="w80">[mwform_textarea name="your-message" placeholder="ご意見・ご相談など、何でもお気軽にお問合わせください"]</td>
</tr>
</tbody>
</table>
<p id="submit-button">[mwform_submitButton preview_value="確認画面へ" submit_value="送信する"]　[mwform_backButton value="戻る"]</p>

<tbody>

<tr>

<td class="w50">[mwform_text name="your-name"]</td>

</tr>

<tr>

<td class="w50">[mwform_text name="kana"]</td>

</tr>

<tr>

<td class="w50">[mwform_text name="company-name"]</td>

</tr>

<tr>

<th>メールアドレス <span class="attention">※</span></th>

<td class="w50">[mwform_text name="your-email"]</td>

</tr>

<tr>

<td class="w50">[mwform_text name="tel"]</td>

</tr>

<tr>

<td class="w80">[mwform_text name="addr"]</td>

</tr>

<tr>

<th>お問い合わせ内容 <span class="attention">※</span></th>

<td class="w50">[mwform_select post_raw="true" name="item" children=":選択してください,サービスについて,ご意見・ご相談,その他"]</td>

</tr>

<tr>

<th>お問い合わせ詳細 <span class="attention">※</span></th>

<td class="w80">[mwform_textarea name="your-message" placeholder="ご意見・ご相談など、何でもお気軽にお問合わせください"]</td>

</tr>

</tbody>

</table>

<p id="submit-button">[mwform_submitButton preview_value="確認画面へ" submit_value="送信する"]　[mwform_backButton value="戻る"]</p>

完了画面メッセージ

別で固定ページで送信完了ページを作成するため、ここは空欄でOK。

URL設定

入力画面URL

/contact/

確認画面URL

/contact/

完了画面URL

/contact/complete/

エラー画面URL

空欄でOK

バリテーションルール

必須項目を適用する項目にのみ、バリテーションを適用させます。
サンプルですが、一応上のコードと同じになるように記述しておきます。

your-name

必須項目にチェック

kana

必須項目にチェック

your-email

必須項目にチェック

item

必須項目にチェック

your-message

必須項目にチェック

「自動返信メール」の設定

自動返信メールのエリアに入力するサンプルを書いておきます。各自アレンジして使って下さい。

件名

【自分の会社名】お問い合わせありがとうございます

送信者

自分の会社名

送信元（E-mailアドレス）

自分のメールアドレス

本文

{your-name}様

この度は【自分の会社名】にお問い合わせをいただき、誠にありがとうございます。
頂戴いたしましたお問い合わせにつきましては、内容を確認の上、後ほどご回答いたします。
なお、お問い合わせの内容によっては、ご回答まで数日かかる場合やご回答いたしかねる場合がございます。
恐れ入りますが、予めご了承くださいますようお願いいたします。
お問い合わせいただきました内容は、下記の通りです。

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

■お名前
{your-name}

■フリガナ
{kana}

■会社名
{company-name}

■メールアドレス
{your-email}

■電話番号
{tel}

■住所
{addr}

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

■お問い合わせ詳細
{your-message}

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

自分の会社名
自分のホームページアドレス

{your-name}様

この度は【自分の会社名】にお問い合わせをいただき、誠にありがとうございます。

頂戴いたしましたお問い合わせにつきましては、内容を確認の上、後ほどご回答いたします。

なお、お問い合わせの内容によっては、ご回答まで数日かかる場合やご回答いたしかねる場合がございます。

恐れ入りますが、予めご了承くださいますようお願いいたします。

お問い合わせいただきました内容は、下記の通りです。

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

■お名前

{your-name}

■フリガナ

{kana}

■会社名

{company-name}

■メールアドレス

{your-email}

■電話番号

{tel}

■住所

{addr}

■お問い合わせ内容

{item}

■お問い合わせ詳細

{your-message}

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

自分の会社名

自分のホームページアドレス

自動返信メール

your-email

管理者宛メール設定

送信先（E-mailアドレス）

自分のメールアドレス

CC（E-mailアドレス）

必要であれば入力。複数入力する場合は「,」を使用する。

BCC（E-mailアドレス）

必要であれば入力。複数入力する場合は「,」を使用する。

件名

【自分の会社名】ホームページからお問い合わせ

送信者

{your-name}

Return-Path(メールアドレス)

空白でOK

送信元（E-mailアドレス）

{your-email}

本文

【自分の会社名】よりお問い合わせがありました。

以下の内容で承りました。内容をご確認の上、ご返信下さい。
-----------------------------------  
  
■お名前
{your-name}

■フリガナ
{kana}

■会社名
{company-name}

■メールアドレス
{your-email}

■電話番号
{tel}

■住所
{addr}

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

■お問い合わせ詳細
{your-message}

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

このメールは【自分の会社名】ホームページのお問い合わせフォームから送信されました。

【自分の会社名】よりお問い合わせがありました。

以下の内容で承りました。内容をご確認の上、ご返信下さい。

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

■お名前

{your-name}

■フリガナ

{kana}

■会社名

{company-name}

■メールアドレス

{your-email}

■電話番号

{tel}

■住所

{addr}

■お問い合わせ内容

{item}

■お問い合わせ詳細

{your-message}

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

このメールは【自分の会社名】ホームページのお問い合わせフォームから送信されました。

設定

問い合わせデータをデータベースに保存

チェックする

それ以外はチェックしなくてOK。

このページでの記述は以上です！あとは固定ページを作成してお問い合わせフォームと送信完了ページを実装していきます。

固定ページにショートコードを追加する

フォーム識別子というフォームに個別に作られるショートコードを固定ページに貼り付けるだけでOKです。送信完了ページも同時に作成しておきましょう。

送信完了ページを作るときのポイント

・親ページをお問い合わせページ(contact)にする
・パーマリンクを「complete」にする
・ページ内にフォーム識別子を書く

MW WP FORM レスポンシブ対応のCSSコード

最後にレスポンシブに対応させたCSSを書いておきます。

.mw_wp_form{
	width: 100%;
	color: #333;
}

.mw_wp_form table.mailform-tbl{
	width: 100%;
	margin-bottom: 40px;
}

.mw_wp_form table tr{
	width: 100%;
	border-bottom: 1px dotted #ccc;
	padding: 30px 0;
	font-weight: normal;
}

.mw_wp_form table tr:first-child{
	border-top: 1px dotted #ccc;
}

.mw_wp_form table th{
	padding: 20px 0;
	text-align: left;
	vertical-align: top;
	font-weight: normal;
	width: 30%;
	float: left;
}

.mw_wp_form table th .attention{
	font-size: 80%;
	margin-left: 10px;
	color: red;
	padding: 3px;
}

.mw_wp_form table td{
	padding: 20px 0;
	width: 70%;
	float: left;
}

.mw_wp_form table td.w50 input,.mw_wp_form table td.w50 select{
	width: 50%;
	box-sizing: border-box;
}

.mw_wp_form table td.w80 input,.mw_wp_form table td.w80 select{
	width: 80%;
	box-sizing: border-box;
}

.mw_wp_form table td.w80 textarea{
	width: 80%;
	box-sizing: border-box;
}

.mw_wp_form #submit-button input {
   margin: 0 auto;
    display: block;
    padding: 10px 30px;
    border: 1px solid #333;
    background: #333;
    color: #fff;
    box-sizing: border-box;
    height: 40px;
    -webkit-appearance: none;
    border-radius: 5px;
    font-size: 90%;
}

@media (max-width: 599px) {
/* small devices */

.mw_wp_form table td.w50 input,.mw_wp_form table td.w50 select{
	width: 100%;
	box-sizing: border-box;
}

.mw_wp_form table td.w80 input,.mw_wp_form table td.w80 select{
	width: 100%;
	box-sizing: border-box;
}

.mw_wp_form table td.w80 textarea{
	width: 100%;
	box-sizing: border-box;
}

.mw_wp_form #submit-button input {
   margin: 0 auto;
    display: block;
    padding: 10px 30px;
    border: 1px solid #333;
    background: #333;
    color: #fff;
    box-sizing: border-box;
    height: 40px;
    -webkit-appearance: none;
    border-radius: 5px;
    font-size: 90%;
}

}

100

101

102

103

104

105

.mw_wp_form{

width: 100%;

color: #333;

}

.mw_wp_form table.mailform-tbl{

width: 100%;

margin-bottom: 40px;

}

.mw_wp_form table tr{

width: 100%;

border-bottom: 1px dotted #ccc;

padding: 30px 0;

font-weight: normal;

}

.mw_wp_form table tr:first-child{

border-top: 1px dotted #ccc;

}

.mw_wp_form table th{

padding: 20px 0;

text-align: left;

vertical-align: top;

font-weight: normal;

width: 30%;

float: left;

}

.mw_wp_form table th .attention{

font-size: 80%;

margin-left: 10px;

color: red;

padding: 3px;

}

.mw_wp_form table td{

padding: 20px 0;

width: 70%;

float: left;

}

.mw_wp_form table td.w50 input,.mw_wp_form table td.w50 select{

width: 50%;

box-sizing: border-box;

}

.mw_wp_form table td.w80 input,.mw_wp_form table td.w80 select{

width: 80%;

box-sizing: border-box;

}

.mw_wp_form table td.w80 textarea{

width: 80%;

box-sizing: border-box;

}

.mw_wp_form #submit-button input {

margin: 0 auto;

display: block;

padding: 10px 30px;

border: 1px solid #333;

background: #333;

color: #fff;

box-sizing: border-box;

height: 40px;

-webkit-appearance: none;

border-radius: 5px;

font-size: 90%;

}

@media (max-width: 599px) {

/* small devices */

.mw_wp_form table td.w50 input,.mw_wp_form table td.w50 select{

width: 100%;

box-sizing: border-box;

}

.mw_wp_form table td.w80 input,.mw_wp_form table td.w80 select{

width: 100%;

box-sizing: border-box;

}

.mw_wp_form table td.w80 textarea{

width: 100%;

box-sizing: border-box;

}

.mw_wp_form #submit-button input {

margin: 0 auto;

display: block;

padding: 10px 30px;

border: 1px solid #333;

background: #333;

color: #fff;

box-sizing: border-box;

height: 40px;

-webkit-appearance: none;

border-radius: 5px;

font-size: 90%;

}

最後に

以上で設定は完了です。それぞれのホームページで若干デザインが崩れたりする可能性があるので、そこは各自で修正お願いします。

デザイナー/フリーランスパパ＠神田翼

フリーランスのWebデザイナーの神田翼です。２児の父親です。父親でもガッツリ子育てがしたいという思いから、フリーランスとして働くことにしました。このブログではフリーランス・子育て・WordPress・ブログ運営のことを書いています。(プロフィール)

【コピペOK】MW WP Form(問い合わせフォーム)の設定方法とカスタマイズ

MW WP FORM のインストールを行う

フォームを作成する

お問い合わせフォーム本文入力エリア

完了画面メッセージ

URL設定

入力画面URL

確認画面URL

完了画面URL

エラー画面URL

バリテーションルール

your-name

kana

your-email

item

your-message

「自動返信メール」の設定

件名

送信者

送信元（E-mailアドレス）

本文

自動返信メール

管理者宛メール設定

送信先（E-mailアドレス）

CC（E-mailアドレス）

BCC（E-mailアドレス）

件名

送信者

Return-Path(メールアドレス)

送信元（E-mailアドレス）

本文

設定

問い合わせデータをデータベースに保存

固定ページにショートコードを追加する

送信完了ページを作るときのポイント

MW WP FORM レスポンシブ対応のCSSコード

最後に

デザイナー/フリーランスパパ＠神田翼

関連記事

最新の記事一覧