【WordPress】お問い合わせフォームをコピペで作成！

こんにちは、とし（@tyobory）です。

ブログ更新65日目となります。

ブログ初心者の方で、まず目指すのはGoogleアドセンスの合格だと思います。

そして、アドセンス審査通過になくてはならないのは、「お問い合わせフォーム」です。

武者ネコ

でも作り方が分からない…

とし

大丈夫！「MW WP Form」を使いコピペでサクッと作成しましょう！

WordPressに、お問い合わせフォームを作成する「MW WP Form」というプラグインがあります。

注意ですが、「Jetpack」のプラグインを使っていると動作不良が発生します…。

では、「MW WP Form」を使って、こんな感じの「問い合わせフォーム」を作成しましょう！

スポンサードリンク

【WordPress】MW WP Formでお問い合わせフォームをコピペで作成！
【WordPress】固定ページにお問い合わせフォームを設定
1. 【あともう少し】固定ページにお問い合わせフォームを設定する
2. おわりに：お問い合わせなくして、アドセンス審査合格はなし

【WordPress】MW WP Formでお問い合わせフォームをコピペで作成！

アドセンス通過には重要。

「お問い合わせフォーム」の重要性

サイト運営において、「お問い合わせフォーム」の設置はとても重要な要素です。

例えば、ユーザーが運営者と直接コンタクト取りたいと思ったときに、連絡先・問い合わせ先がないのは、サイトとしてユーザビリティが低く、不都合ですよね。

また、サイトを運営していて誤情報や他人に不利益を与えていた場合には、クレームを受け付ける窓口として、必ず「お問い合わせフォーム」が必要となります。

アドセンス審査でも、お問い合わせフォームの有無はそのサイトが信頼性の指標になるため必ず準備する必要があります！

MW WP Formでお問い合わせフォームを作成【手順は4つ】

目標は、以下の『お問い合わせフォーム』を作成することです！

まずは、「MW WP Form」をインストールしましょう。

ダッシュボードにある『プラグイン』から＞『新規追加』をクリック

「MW WP Form」をインストールし、有効化します。すると左バーに出てくるのでクリック。

とし

編集するのはこの4か所！以下、作業手順です！

手順①：お問い合わせページの作成

手順①として、お問い合わせページの作成をします。

『MW WP Form』には、特殊なコードがあり、下記の全コードをコピペして貼り付ければOK。編集エディタは、『ビジュアル』ではなく『テキスト』での貼り付けです。

コードトグルボックス内容<table style=”border-collapse: collapse; width: 100%; height: 125px;”>
<tbody>
<tr style=”height: 50px;”>
<td style=”width: 19.0816%; height: 50px;”>名前※</td>
<td style=”width: 80.9184%; height: 50px;”>[mwform_text name=”name” size=”60″]</td>
</tr>
<tr style=”height: 50px;”>
<td style=”width: 19.0816%; height: 50px;”>メール※</td>
<td style=”width: 80.9184%; height: 50px;”>[mwform_email name=”mail” size=”60″]</td>
</tr>
<tr>
<td style=”width: 19.0816%;”>件名※</td>
<td style=”width: 80.9184%;”>[mwform_text name=”title” size=”60″]</td>
</tr>
<tr style=”height: 86px;”>
<td style=”width: 19.0816%; height: 25px;”>お問い合わせ内容※</td>
<td style=”width: 80.9184%; height: 25px;”>[mwform_textarea name=”content” cols=”50″ rows=”5″]</td>
</tr>
</tbody>
</table>
[mwform_submitButton name=”send” confirm_value=”確認画面へ” submit_value=”送信する

これで上記の画像のようなページが一式作成されます。

とし

次は、ユーザーが問い合わせしてきたときの設定です！

手順②：完了画面メッセージの作成

手順②では、ユーザーが問い合わせメッセージを送った後の完了画面を作成します。

ここも次のHTMLコードをコピペして頂くと、次のような完了画面ができます。

コード<div class=”ns-box” style=”border-style: solid; border-color: #aaaaaa; background-color: #fafafa;”>
メッセージを送信いたしました。
</div>
お問い合わせいただき、ありがとうございました。もし数日中に返事が無い場合は、正しく受信できなかった可能性がありますので、恐れ入りますが下記のメールアドレスにて再度のご連絡をお願いします。
E-Mail：〇〇

E-Mailの部分は自分のメアドに書き換えてください。これで、メッセージ送信後の完了画面はこうなります。

手順③：自動返信メールの設定

この手順③は、お問い合わせしたユーザーに確認メールを自動送信する設定です。

拡大して、見ていきます。

件名※
自動返信の件名になります。

送信者
初期設定はブログ名です。

Replay-to
相手が返信してきたときの自分の宛先。

本文
自動返信される文です。
ここの文章は下記の「本文」参照。

自動返信メール※
ここは「mail」を記載してください。

※は手動で入力です。

本文（自動返信の文章）{name}様

ブログ運営者の○○です。

お問い合わせありがとうございます。
下記の内容にて承りました。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
名前:
{name}

メール:
{mail}

件名:
{title}

お問い合わせ内容:
{content}

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

このメールは自動返信されております。

ここの{name}は問い合わせした人の名前が入ります。以下、次のよう定義されてます。

{name}：相手の名前
{mail}：相手のメールアドレス
{title}：件名
{content}：問い合わせ内容

○○の部分は、自分の名前を入れて頂ければ、自動返信の文面は完成です。

また、「自動返信メール」の欄は、「mail」を入力してください。