Contact Form7-wordpressプラグイン

wordpressのサイトに専用のお問い合わせフォーム(メールフォーム)を簡単に設置できるのが、今回紹介する、Contact Form7です。

通常のサイトにお問合せフォームを設置しようとすると、敷居が高かったり、知識がないと難しいのが現状です。

もちろん無料のメールフォームを利用すれば簡単に利用出来ますが、広告が表示されるし、機能も制限されています。

また、有料にすれば機能も豊富になりますが、毎月使用料が発生するので、通常の趣味のサイトには中々設置できないのが現状ですね。

そこで、今回wordpressのプラグイン・Contact Form7を紹介したいと思います。

プラグインの追加管理画面からインストールすれば、あっという間にメールフォーム(お問合せフォーム)が設置出来てしまいます。

デフォルトのままでも十分ですが、カスタマイズも出来るので、自分のブログサイトにあったお問合せフォームの項目の追加、設定が出来ます。

他にもメールフォームを設置するプラグインもありますが、Contact Form7では初心者にもカスタマイズしやすい作りなので今回紹介しています。

1. wordpress管理画面のプラグイン、新規追加を選択しプラグインの新規追加画面に移動すす。

プラグイン追加選択画面

2. プラグインのインストール管理画面(検索)にて、Contact Form7を入力し、検索を実行してください。

※ちなみに人気タブで検索してもContact Form7は人気のあるプラグインなので上位に表示されています。

contact form7検索画面

3. Contact Form7で検索すると、いくつか関連のあるプラグインが表示されるので、今回紹介するContact Form7の詳細を選択してプラグイン詳細画面に移動してください。

contact form7インストール画面

4. Contact Form7詳細画面にて、自分で使っているwordpressのバージョンに対応しているのを確認して、『いますぐインストール』を実行してください。

※参考までにContact Form7はダウンロード数でも見て分かるように、たくさんの方に利用されている人気のプラグインです。

プラグイン詳細画面

5. インストールが完了したら、プラグインを有効化して、利用できるようにしましょう。

プラグイン有効化画面

6. 有効化すると、ダッシュボードMENUにContact Form7(お問い合わせ)項目が追加されているので、編集を実行してContact Form7管理画面に移動します。

contact form7インストール確認画面

7. 管理画面に以下のコードをコピーして、投稿・ページに追加してくださいとあるので、表示されているコードをそのまま選択してコピーします。

contact form7管理設定画面

8. コピーしたContact Form7のコードを固定ページに設置する。まず、ページ・新規追加画面にて、タイトルは何でもいいですが、『お問合せ』で作成してみます。お問合せページのURLは使用している、パーマリンクの設定により表示が違いますが、変更は可能ですので、参考例として、『mailform』と名付け、先ほどコピーしたコードを本文に貼り付けて、公開してページの作成をします。

お問合せ固定ページ作成画面

9. Contact Form7を使って作成(デフォルト設定)した固定ページを表示してみました。コードをコピーしただけで、簡単にお問合せフォームの完了です。プラグインのインストールと任意のページ、投稿記事にコードを追記するだけで、利用できます。

お問合せページ確認画面

10. Contact Form7を使って作成したお問合せフォームから練習で、メッセージを送信してみましょう。送信が完了すると以下の様なメッセージが表示され、wordpressインストール時に登録したメールにメッセージが送信されているので確認してみましょう。

メールフォーム送信完了画面

11. Contact Form7を少しカスタマイズしてみる。Contact Form7管理画面には、自分で設置したい項目の追加、編集が出来るので、今回は参考例として、ドロップダウン・メニューを作成してみました。

管理画面右側にある、タグの作成を選択すると、利用できる項目が表示されるので、利用したいタグを選択し設定してみましょう。

例) ドロップダウン・メニューを追加して、項目にはお問合せ、その他を追加して、デフォルトで設定されていた、題名を削除し、お問合せ件名として追加しました。この時、追加したタグのコードが表示されるので、そのコードを、フォーム欄に追記、メッセージ全文(メール受信時の項目)にも、表示されているコードを貼りつけています。

設定項目が出来たら、一番右上・下にある、保存を実行して内容を保存しましょう。

contat form7管理画面・追加設定

12. 項目を追加したお問合せページにアクセスして、変更された内容を確認してみましょう。先ほどあった題名を削除して、新しく追加したお問合せ件名が表示されています。

contact form7項目追加設定&確認画面

※Contact Form7では、ある程度のカスタマイズ、タグの追加、スタイルシートの設定など出来ますので、自分のブログサイトにあったデザイン、項目を設置して、サイト訪問者にも利用しやすい構造・作りにしてみましょう。

blogram投票ボタン にほんブログ村 IT技術ブログ WordPressへ


Bookmark

タグ

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

*

このページの先頭へ