【ブログ初心者向け】お問い合わせページの作り方【秒で終わらせる】

こんにちは、すめしです。

お問い合わせページ、皆さんのブログにはちゃんと設置されていますか？

AdSense審査に通るためにも、「プライバシーポリシー」と並んで必要なものですよね。

始めは「THMLから起こすのか！？」とも思っていましたが、実際作って見たら瞬殺だったので備忘録です。

とりあえずまとめ

Jetpack入れれば解決

Jetpack入れる

皆さんJetpack使ってますか？

実はこれ初心者にすげえおすすめです。

というのも、いろいろなプラグイン入れまくってゴリゴリに武装しなくてはできないことがJetpack一つでできちゃうんです。

例えばXMLのサイトマップ生成

チェックマークひとつで生成可能です。

専用プラグインいらんやん。

更にGoogleのサイト認証をしておくことで、ありがちなアナリティクスのトラブルを放置して記事作りに専念できます。

もちろんいつかは解決しなければならない問題ですが、アナリティクスがトラブってブログが嫌になるという問題を回避できます。

また、記事を投稿したときに自動でSNS投稿してくれるとか。

いちいち拡散しなくていいので便利ですよね。

しかもこれら、無料です。

課金するとセキュリティ対策やSEO系強化などガチ系プランもありますが、個人的にはスモールスタートが定石なので無料でいろいろな機能が使えるのはありがたいです。

私はWordPressを入れた時からJetpackを使用していたので、この機能に気がついたときには勝利を確信しました（何に）。

さてお問い合わせページの作り方ですが、とりあえずこのJetpack入れましょう。

話はそれからです。

新規固定ページを立ち上げる

WordPressのダッシュボードから新規固定ページを立ち上げます。

そして写真中にある青丸を押します。

するともう既にそれっぽいフォーマットが出来上がります。

お問い合わせページの編集

ただこれだけだと本当にフォームだけなので、編集していきましょう。

フォームの部分をクリックすると鉛筆マークが出てくるので押します。

すると、下の写真のようになりますが、正直何を言っているのかよく分かりませんでした。

特にメールの件名とかいきなり何笑

ということで、一つづつ解説していきます。

お問い合わせフォームの情報

そもそもなんですけど、このページは何のためのものでしょうか。

いやもちろんAdSenseに通るためでもあるのですが。

私はここを忘れていたので理解に少し時間がかかりました。

お問い合わせページは、読者があなたへ問い合わせするためにあるのです。

そこへいくと、このフォームの情報というのは「実際に読者の問い合わせがどのようにあなたに届くのか」を決める部分です。

案外大事な部分でしたね。

そう思うと、メールの件名が何を指すかわかってきます。

メールボックスに届いたときに埋没しないような件名にしましょう。

色々なASPに登録すると、メールの量もすんごいので簡単に埋もれます。

ていうか私の場合はASP用のアドレスと、お問い合わせフォーム用のアドレスを分けました。

ぜひ貴方も「どのメールアドレスに～」のところはお問い合わせ用のアドレスを登録しましょう。

お問い合わせフォームのフィールド

ここには「問い合わせしてくる方のどんな情報を知っておきたいか」をベースに考えて編集します。

極端な話、返信用のメールアドレス記述の欄がなかったらゲキ困りですよね。

どこに返したら良いのかわからないし。

まあプライバシーに関わる話じゃなかったらそれはそれで記事のネタになるような気もしないではないですけど。

逆に、「貴方のお勤めは～」でチェックボックスで会社員とか学生とか選ばせるとか、「貴方の初体験の年齢を～」でドロップダウンにして必須条件で選んでもらうとかもできますけど、よほど必要でもない限りしないほうがユーザビリティとしてふさわしくないですよね。

不便ということです。

ブログ始めたばかりで「問い合わせなんか想像もつかない」という方に必要な項目は

名前
アドレス
タイトル（フィールドはテキストで）
メッセージ

くらいなものでしょう。

なので、デフォルトから変えるとするなら「サイト」を「タイトル」に変えてフィールドを変更するくらいですかね。

最後に、このフォームの上に改行なんかでスペースを作って適当な文言を入れましょう。

例えば当ブログだとこんな感じ。

送信ボタンのカスタマイズ

あと他の人に聞いていないので定かではありませんが、私の場合デフォルトでは送信ボタンが囲いすら無い状態でした。

クリックしたらちゃんと飛ぶのですが。

こんな感じ。

ちょっと味気ないので、送信ボタンを外観→CSS編集に追記して加工しましょう。

「いや、そんなことしたこと無い！」という方は3.2で示したの写真のもので良ければお使いください。

Jetpackの送信ボタンであればこのクラスのはずなのでコピペしていただいたら問題ありません。

Tips：下記をCSSに追記しましょう（Jetpack限定）。

/* ====問い合わせ送信ボタン==== */
.pushbutton-wide {
display: inline-block;
padding: 0.2em 0.8em;
text-decoration: none;
background: rgb(104, 109, 109);/*ボタン色*/
color: #FFF;
border-bottom: solid 4px rgb(82, 83, 83);
border-radius: 3px;
}
.pushbutton-wide:active {
/*ボタンを押したら*/
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
}
/* ==問い合わせ送信ボタンここまで== */