サイトアイコン Wanablog

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

こんにちは、とし(@tyobory)です。

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

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

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

武者ネコ

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

とし

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


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

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


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

スポンサードリンク

【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;”><span style=”font-family: arial, helvetica, sans-serif;”><strong>名前</strong><span style=”color: #ff0000;”>※</span></span></td>
<td style=”width: 80.9184%; height: 50px;”><span style=”font-family: arial, helvetica, sans-serif;”>[mwform_text name=”name” size=”60″]</span></td>
</tr>
<tr style=”height: 50px;”>
<td style=”width: 19.0816%; height: 50px;”><span style=”font-family: arial, helvetica, sans-serif;”><strong>メール</strong><span style=”color: #ff0000;”>※</span></span></td>
<td style=”width: 80.9184%; height: 50px;”><span style=”font-family: arial, helvetica, sans-serif;”>[mwform_email name=”mail” size=”60″]</span></td>
</tr>
<tr>
<td style=”width: 19.0816%;”><span style=”font-family: arial, helvetica, sans-serif;”><strong>件名</strong><span style=”color: #ff0000;”>※</span></span></td>
<td style=”width: 80.9184%;”><span style=”font-family: arial, helvetica, sans-serif;”>[mwform_text name=”title” size=”60″]</span></td>
</tr>
<tr style=”height: 86px;”>
<td style=”width: 19.0816%; height: 25px;”><span style=”font-family: arial, helvetica, sans-serif;”><strong>お問い合わせ内容</strong><span style=”color: #ff0000;”>※</span></span></td>
<td style=”width: 80.9184%; height: 25px;”><span style=”font-family: arial, helvetica, sans-serif;”>[mwform_textarea name=”content” cols=”50″ rows=”5″]</span></td>
</tr>
</tbody>
</table>
<p style=”text-align: center;”>[mwform_submitButton name=”send” confirm_value=”確認画面へ” submit_value=”送信する



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

とし

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

 

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


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

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

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

 

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

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


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


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

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

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

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

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

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

は手動で入力です。

{name}様

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

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

メール:
{mail}

件名:
{title}

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

_______________

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


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

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

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


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

とし

これで、問い合わせ後の確認メールが自動返信されるニャン

 

手順④:管理者への通知を設定(つまり、自分への通知)


手順④は管理者(自分)への通知メールで、手順③とほぼ同じです。

送信先
問い合わせを受信するメールアドレス。
ここは自分のメアドに書き換えてね!

件名
自分宛の件名になります。

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

Replay-to
相手が返信してきたときの自分の宛先。
ここは自分のメアドに書き換えてね!

本文
自分宛の文章です。下記の「本文」参照。

は手動で入力です。

お問い合わせの通知です。
_______________
名前:
{name}

メール:
{mail}

件名:
{title}

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

手順③と同じで、「本文」は、誰からどういった問い合わせ内容がきたか、確認できるように設定しました。

とし

これで相手にも自分にも、確認メールが送られるようになるよ!

 

補足:バリデーションルールの追加

これで最後です。エディタを下にスクロールすると、バリデーションルールの追加というものがあります。


手順③で定義したラベル名をもう一度見ましょう。

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

こちらです。お問い合わせフォームで必須入力させるのが「バリデーションルール」です


ここで、①に「name」や「title」などを入力し、②のチェックを入れると、必須入力設定ができます。

また、チェックボックスを見てもらえると分かるように、電話番号やメアドなどの必須入力設定ができます。

とし

これで設定は終了です。あと、固定ページを作って完了となります!

 

スポンサードリンク

【WordPress】固定ページにお問い合わせフォームを設定

あともう少しで完了。

【あともう少し】固定ページにお問い合わせフォームを設定する

あとちょっとです。エディタの右上のほうに、『フォーム識別子』という項目があり、こちらをコピーします。

そして・・・


固定ページに貼り付けて終了となります!!!!

おわりに:お問い合わせなくして、アドセンス審査合格はなし

お問い合わせフォームを設置する一番の理由は、アドセンスに合格するためだと思います。

アドセンスに合格するには、記事数・プロフィール・プライバシーポリシー、そして『お問い合わせフォーム』がひつようとなります

なので、この記事を参考にして頂けたら大変うれしく思います。

モバイルバージョンを終了