そろそろ妊娠線が気になるときに読む記事

ブログのお問い合せフォームを5分で導入する方法

お問合せフォーム

記事内に広告を含みます

ブログやビジネスなど様々なシーンで必要なお問い合せフォーム。

あらゆるWEBサイトでお問合せフォームを目にすることも以前にくらべ増えたのではないでしょうか。

お問合せフォームを設置するとユーザビリティの向上や、自身のブログやビジネスにおける改善点を閲覧者からメールで受け取ることができるというメリットがあります。

まだ、お問合せフォームを設置していない方はこちらを参考にして下さい。

初心者にも簡単なプラグイン「Contact Form 7」は5分で作成可能です。

 

 

お問い合せフォームの形式

 

まずは私が設置したお問い合わせフォームですが、こんな感じのものです。

 

 

もっと項目を追加させることもできるのですが、個人で使用するのであればこちらで十分ではないかと思います。

 

ではお問い合わせフォームを具体的に把握できたところでさっそく導入していきましょう。

 

「Contact Form 7」をインストール

 

次は、お問い合わせフォームを作成するときに必須のプラグインをインストールしましょう。

まずは、ダッシュボードの「プラグイン」>「新規追加」>

 

「キーワード」に「ContactForm7」と入力

 

富士山の絵がついたものを選び「今すぐインストール」をクリック

 

そのまま「有効化」をクリック

 

※有効化にするもう一つの方法
「プラグイン」>「プラグインの編集」>「ContactForm7を有効化」でも可能

 

「ダッシュボード」上に「✉お問い合わせ」という表示が出ていればインストール完了です

 

お問い合せフォームの編集をしよう

 

ダッシュボード>お問合せをクリック>コンタクトフォーム1にカーソルを合わせ>編集

 

すると、このような画面になります

 

特に変更はしなくてOKです(もし項目を追加したい方は項目追加の例を見てください)

 

項目追加の例

ex)メッセージ本文の下に、「ブログの感想」という項目が欲しい場合

 

<label> メッセージ本文
[textarea your-message] </label>

<label> ブログの感想
[textarea your-message] </label>

 

と入力すると

 

このように項目が追加されます

 

 

 受信メールを設定する

 

続いて、お問合せが来たら受信するメールアドレス等の設定です。「メール」をクリック

 

何も触らなくても、ある程度自動で入力されていると思いますので、メールの受信設定など変更があればして下さい。私は特に何も触っていません。

・送信先→メールを受信するアドレスを入力

・送信元→メールを送信する差出人の名前(受けとった人が分かるような名前を)

・題名→サイト名等分かりやすいものに

・送信ヘッダー→そのまま

・メッセージ本文→そのまま

 

 

設定したら、ページ上部のコンタクトフォーム1の青い部分にカーソルをあて

右クリックでコピー

 

右側のステータスを保存

これで、お問合せフォームの形式ができました。

固定ページにお問合せフォームを作成

では自分のブログの固定ページに今作成したお問合せフォームを追加します。

 

ダッシュボード>固定ページ>新規追加>タイトルに「お問い合わせ」と入力

>本文には先程コピーしたものを貼り付けます(Ctrl+Vもしくは右クリックの貼り付け)

 

更新をクリック

 

これで全行程は終了です

きちんと表示されるか自分のWEBサイトを見て確認しましょう。

さらにメールがちゃんと届くか自分のスマホ等から一度テストをして下さいね。

 

ContactForm7と相性の良いプラグイン「Akismet」

これでお問い合わせフォームの導入は終了です。お疲れさまでした。

実は「ContactForm7」と相性の良いプラグインがあります。

もう少し頑張れそうな人はぜひ入れておくことをお勧めします。

「Akismet」というプラグインです。

インストールしておくだけで、ContactForm7と連動して、セキュリティーやスパム対策を行ってくれてブログを保護してくれるという優れもの。

 

私もインストールして、その後何も設定はしていませんが、勝手に働いてくれて悪意あるログインを6359件もブロックしてくれています。
(ダッシュボードのホームでブロックしてくれた件数が分かります)

 

では、先ほど同様

ダッシュボード>プラグイン>新規追加>キーワードに「Akismet」と入力

今すぐインストール>有効化

これだけであなたのサイトをAkismetが守ってくれます。

これで一安心。ふー。