『Contact Form 7』プラグインで問い合わせフォームを設置

投稿日:2017年7月11日

ずーっと放っといた固定ページの一つである「問い合わせ」ページ
今回はこのページを完成させようと思います。

問い合わせページには、問い合わせフォームを設置しておくだけでいいはずなので、チャチャッとプラグインで実装してしまいましょかね。
 

問い合わせフォームの必要性

その前に、問い合わせフォームの必要性を改めて調べてみました。

企業だとかショップを運営されているのであれば、当然連絡先としてフォーム、あるいはメールアドレスの開示とかが必要になってくるでしょう。

でも、私のようなただの趣味の個人ブログにそんなの必要かな~とちょっと疑問なんですよね。
各記事のコメント欄だけでも事足りるような気もします。
 

で、調べてみると、「Googleアドセンス」の審査のために問い合わせフォームは必須らしいです。
Googleアドセンスってのはブログやってる人なら皆知ってるでしょうが、広告ですね。 もはやこれ貼ってないブログの方が少数派なんじゃないかってぐらいどこ行っても見かけますよね。

アドセンスは広告掲載の審査が厳しいことでも有名で、その審査に合格するために必須だと言われているのが、「問い合わせフォーム」、「サイトマップ」、「プライバシーポリシー」らしいです。

…さっきかららしいを強調しているのは、ネット上にはこのアドセンス合格のための記事が乱立しておりまして、正直私には何が正しいのか分かりません。
ただ間違いなく言えるのは、調べて出てくる情報は、「私はこうやったら合格しました!」という体験談であって、「こうすれば確実に合格する」といった必勝法ではない、ということですね。
実際、問い合わせフォーム無いのにアドセンス取れたってブログも見かけましたし。

なので、100%無いといけないって訳ではないのだと思います。
が!じゃあ無くてもいいのかって話ではないので、今すぐにアドセンスが欲しいとか特別な事情が無い限り、用意しておいた方が無難ですよね、きっと。
 

この辺の話はちょっとややこしくなりそうなので、いずれ私もアドセンスに申請しようと考えているので、自分の体験談も交えていつか記事にできたらいいなーと思っております。

ま、いつも言ってるように、まずはサイトの完成ですね(^^;
 

問い合わせフォームプラグインの比較

次に調べるのは、問い合わせフォームを設置するためのプラグインの比較・検討ですね。

実装にはプラグインでやるということは決めていたので、それで検索をかけてみると、やはり一番にくるのは『Contact Form 7』ですね。

当サイトで使用中のテーマ、「AFFINGER4」の公式サイトでも、このプラグインがおすすめされていましたし。
しかも、AFFINGER4にはContact form 7 用のデザインをカスタマイザーからちょびっとだけいじれるんですよね。

…なんかもう選択肢は決まったようなモンですが、一応他のも見てみますかね。
 

『Trust Form』はエラーがあるようだし、『MW WP Form』は有料アップグレードみたいだし、実際に選択候補となり得るのは、これまた有名な『Jetpack』ってことになるんですかね? …先日切ったばかりなんですけどね、Jetpackのフォーム機能…

ただ、Jetpackの問い合わせフォームはシンプルな分、初心者にも簡単に実装できるとのこと。
対してContact Form 7 はHTMLやCSSの知識が必要らしいです… ム、ムリです…

試しにとContact Form 7 の公式サイトに行ってみましたが、作者が日本人だったので、全て日本語で書かれていたんですが… 何書いてあるのか難しくて解りませんでした(>_<)

さぁ…どうしましょうね?
幸いなのは、Contact Form 7 はダントツの一番人気のようなので、使い方やカスタマイズ法の記事がたくさんあるという点ですね。
一度設定して置いておけば、そうそういじるような物でもないでしょうし、少し頑張ればなんとかできそうなので、Contact Form 7 を使うことに決めました。 …ムリだったらJetpackで(^^;

 

『Contact Form 7』の設定

それではContact Form 7をインストール。
WordPressメニューに[お問い合せ]という項が追加されました。

早速ここを見てみると、既に「コンタクトフォーム1(デフォルト名)」というサンプルの問い合わせフォームができ上がっていました!
しかも、「このコードをコピーしてペーストしてください」みたいな分かりやすい説明まで!

私は問い合わせ用の固定ページは用意してあったので、言われるがままに「ショートコード」なるものをビジュアルエディター上に貼っ付けると、それだけで問い合わせフォームが完成していました!!
なにこれ超簡単(´▽`)

編集画面に戻って細かく「コンタクトフォーム1」の設定を見てみると、最初から[送信先]としてWordPressに登録しておいた自分のメールアドレスが入力されていて、何もいじらなくても問い合わせフォームとして機能しているようです。
 

しかし、デフォルトで用意されていたフォームに設定されていたのは、
「お名前(必須)」、「メールアドレス(必須)」、「題名」、「メッセージ本文」の4項目のみ。(それと "送信" ボタン)

私はここに「サイトURL」を追加したい。 WordPressデフォルトのコメント機能にも「ウェブサイト」って入力欄がありますしね。
たぶん個人ブログに来るお問い合わせメールって、相互リンクのお願いが一番多いんじゃないかな~って思うんですよね。(想像ですが)
 

Contact Form 7 のカスタマイズ

ほんじゃContact Form 7 の使い方を解説されているサイトを参考にしながらカスタマイズ開始。

[フォーム]タブ(パネル)の中に、「URL」というボタン(?)が用意されてますね。
ここを押してみると、詳細な設定画面が開きました。
…が、まるで意味が解りません!

参考サイトによると、どうやらここはCSSでカスタマイズする人向けの設定がほとんどで、普通に使う分には、一番上の「必須項目」のチェックを入れるかどうかでフォームへの入力が必須となる項として設定するかの選択をするぐらい?

ちょっと注意すべき点は、「タグを挿入」ボタンを押して決定すると、生成したタグが[フォーム]の中に追記されるので、あらかじめ挿入したい箇所を[フォーム]内からクリックしておいた方が良さそうです。 (私は何も押さずに挿入したら、既存のタグの中に新しいタグが入ってしまいグチャグチャになりました…)

追記されたタグは、この[フォーム]内に書かれた通りにサイト上に表示されるので、表示させたい場所に挿入し、このままでは入力ボックスのみが出るだけなので、他の項と同じように<label>で囲ってボックスの上に表示させたいテキストを書き込みました。
基本ほかのを真似しとけば大丈夫のようです。
 

そして説明の通りに[メール]タブへ「メールタグ」を追加します。(タブとタグがややこしい!)
メールタグは、一覧の中に先ほど生成した物が混ざっているので、そこからコピペで「メッセージ本文」内へ。

この「メッセージ本文」ってのが実際に問い合わせフォームから自身の設定しておいたメールアドレスに届くメールの、メール本文に表示される部分です。
このタブをカスタマイズすることで、本文に表示される項の順番やら、題名に「○○(サイト名)からの問い合わせ」みたいに一括で表示させておく事なんかも可能みたいです。

参考サイトによると、このメールタグを追加するのは、「メッセージ本文」内の「題名」の下にまとめて貼り付けていたので、私もそうしておきました。

 

問い合わせフォームの機能テスト

それでは、参考サイトに書いてあった通りに、問い合わせフォームの機能チェック。
自分のサイトへ自分で問い合わせるという残念プレイ。

とりあえず題名を「このサイトいつ完成するんですか?www」として "送信"。

無事自分のメールアドレスで受け取れました!
ちゃんと追加した「サイトURL」もリンク付きで表示されてました。
(URLをテキトーに "sample.com" としたんですが、実際に存在するんですねw)
 

でも一つだけ上手くいかなかったことがありまして、新規作成した「URL」に、「Akismet」にチェックを入れ、スパムメール対策を強化しようと思ったのですが、ここにチェックを入れていると、フォーム送信時にエラーが出て送れませんでした。

おそらくAkismet側からも何かしらの設定が必要なんじゃないかと思います。

 

まとめ

というわけで、問い合わせフォームの設置はかなーり簡単に完了しました。

HTMLは特に要りませんでしたね。 普段使ってるビジュアルエディターと大差なかったです。

CSSも同上。 ただし、これに関してはAFFINGER4の機能によるものだと思われます。
参考サイトの問い合わせフォームと見比べても、明らかにデザインが整っています。
送信ボタンにテーマカスタマイザーでの設定色が反映されている点も嬉しいですね。 さすが有料テーマ!

 

 

公開用メールアドレスの取得

…さてさて、実はこれだけでは終わらせられません。

Contact Form 7 についての記事はもういいんですが、私は問い合わせフォームの受信先を新たに設定せねばならんのです。
 

というのも、私は自分のメールアドレスをこのサイト上で公開しようと思っているんですね。
今のままの問い合わせフォームでは、「添付ファイル」を受け取れないんですよ。

もちろん、Contact Form 7 にて添付ファイルの送信を可能にする機能は備わっています。
でも…なんか怖くないですか? 知らない人からのファイルって…

なのでこの添付ファイルに関しては、問い合わせフォームからではなく、直接自分のメールアドレスに送ってもらおう、と考えたわけです。

メールからだったら、送ってきた相手のメールアドレスも確認できるはず。
問い合わせフォームだと虚偽の連絡先を入力しての送付も可能でしょうしね。
 

だが、私が今WordPressで使っているメールアドレスは私用の物なので、問い合わせメールの受け取りには使えど、公開はしたくない。
ので、新しくこの『ガンプラ気分』専用のメールアドレスを手に入れよう!っちゅー話ですわ。
 

私が今使っているのは「gmail」。 Googleのメールですね。

既にアカウントは2つ持っていて、元々プライベートで使っていた物の他にもう1つ、このホームページ用に取得した物があります。
こちらではレンタルサーバーの契約とか、AFFINGER4(WordPressテーマ)の購入とか、ホームページ作成に関わる物全般で使っていました。

これら2つのアカウントは、「マルチアカウント」機能により使い分けています。
たいそうな名前が付いていますが、右上の「アカウントを追加」ボタンで簡単にできるヤツですね。 使ってる人も多いんじゃないでしょうか?

しかし今回作るアカウントは問い合わせ専用。 いちいちアカウントを切り替えて閲覧するのも手間。 なにより、問い合わせなんて普通に考えてそうそう来ないでしょう。(身も蓋も無い)

なので、新規アカウントは、メールアドレスの公開用とだけとし、ここで受け取った問い合わせメールは、普段使ってる他のgmailで見れるように設定してみたいと思います。 メールの転送設定ってヤツかな? やったことないけど。
 

新規Googleアカウントを作成

新たなgmailを取得するためには、Googleアカウントを新規に作成する必要がありますね。

未だに納得いかないのですが、このGoogleアカウント登録時に、「姓」「名」の欄に入力した名前は公開されてしまうんですよね。
私も最初は本名で登録したため、かなりあせって名前変更しました(;^ω^)

それともうひとつ。 私だけかもしれませんが、本人認証の際の、携帯メールアドレスへの認証コードの送信が、毎回できないんですよね。 docomoのガラケーなんですが…

仕方なく音声コードで認証してるのですが、電話の相手は自動メッセージなのについ返事してしまうんですよね (ノω`*)ハズカチィ
 

ほんでアカウントが完成したら、gmailの[設定]>[メール転送とPOP/IMAP]から「転送」の項に、送信先メールアドレスを設定。
設定した転送先となるアドレス側から認証して完了。

試しにサイトの問い合わせフォームからまたメッセージを送ってみましたが、ちゃんと新規アカウント、そして転送先メールアドレスでも同様のメールを受け取れていました!
 

おわりに

今回の作業に難しい点は特になかったのですが、あっち行ったりこっち行ったりで面倒でした… おかげでやたら時間がかかってしまいました。

だがしかし!! 私はついにこのサイトのページの一つを完成させたのだ!!

「仮運営中だから」というのを逃げ道に、ヘッダー画像からロゴ画像からサイトの色から何から何まで、ぜ~んぶ(仮)だったんですよね。
ちゃんとしたデザインは後でやればいいやと。 「明日から本気だす」という典型的なダメ人間。

だがしかしかし!! ついに「お問い合わせ」ページが出来上がったのです!!

いっちばんどーでもいいページではあるものの、このページは(仮)ではなく、本運営でもそのまま使用するページなのです。(細かいところはいじるかもしれませんが)

これは私にとって大きな一歩ですね。

 

さて、それじゃー次回のカスタマイズは、本記事内でGoogleアドセンスの審査のために必須だと述べた、サイトマップやプライバシーポリシーの設置といきましょうかね。
あ、あとインデックス促進もやっておかないとな。 Jetpackの同機能切っちゃったからなぁ。

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.