QLOOKアクセス解析
Home » WordPress, WordPress プラグイン

WordPressにお問い合わせフォームを設置する、プラグイン「Contact Form 7」

2011年3月26日 2,113 views One Comment

「Contact Form 7」は、お問い合わせフォームを簡単に作成できるプラグインです。初心者でもなんなく扱える、いたれりつくせりの初期状態は、日本人開発者のプラグインならでは。しかし、編集次第では簡単に本格仕様のメールフォームも作成できるポテンシャルを秘めており、上級者にも間違いのないプラグインです。また、プラグイン「Akismet」と連携しスパムメールを防ぐこともでき、セキュリティー面も安心です。

 

 

◆「Contact Form 7」のインストール

「プラグイン」>「新規追加」をクリック。

wordpress_contactform701_1

検索で「Contact Form 7」と入力し「プラグインの検索」ボタンをクリック。

wordpress_contactform702_1

似たようなプラグインが多いですが、間違えないように「Contact Form 7」を選んでください。

「Contact Form 7」の「詳細」をクリック。

wordpress_contactform703_1

「いますぐインストール」ボタンをクリック。

wordpress_contactform704_1

「Contact Form 7」の「プラグインを有効化」をクリック。

wordpress_contactform705_1

wordpress_contactform705_2

有効化すると、ダッシュボードのサイドバーに「お問い合わせ」の項目が追加されます。続けて「Contact Form 7」を設定していきましょう。

 

 

◆「Contact Form 7」の設定方法

「お問い合わせ」>「編集」をクリック。

「Contact Form 7」のすべての設定はこの画面から行っていきます。まず、通常の状態のまま導入作業を進めてみましょう。

コンタクトフォームのタイトルは任意に変更可能です。今回は変更せず、茶色に囲まれた文字列をコピーします。

wordpress_contactform707_1

ダッシュボードの「投稿」から投稿記事を作り、本文中にペーストします。最後に「公開」ボタンをクリックするのを忘れないように。

 

 

◆「Contact Form 7」の実装確認

実際のサイトにこのようなメールフォームが導入されました。以上がひと通りの導入作業になります。通常、cgiやphpやjsなどをいくつも駆使して作り上げなければならないメールフォームがこんなに簡単に出来上がりました。

試しにメールフォームからメールを送ってみましょう。記入事項を入力の上、「送信」ボタンをクリック。

正しく送信されると以下のようなメッセージが表示されます。

wordpress_contactform707_6

「メールアドレス(必須)」に以下のようなメールが届きました。完璧です。

続けて、編集画面を見ていきながら、少しアレンジしていきます。

 

 

◆「Contact Form 7」のアレンジ設定方法

「お問い合わせ」>「編集」をクリック。

wordpress_contactform708_1

「Contact Form 7」は非常に柔軟なプラグインで、編集次第で本格的なメールフォームを作成することができます。「フォーム」欄は実際のサイトに表示される部分です。html文章になっています。「タグの作成」ボタンをクリックします。

wordpress_contactform708_2

項目がドロップダウンします。テキスト項目、メールアドレス項目ほか、追加できる項目を確認できます。今回はチェックボックスを追加してみます。

「タグを作成」ボタンの下にこのように表示されました。

wordpress_contactform708_3

「選択項目」に一行ごと項目を入力し、茶色に囲まれた文字列をコピーします。

「フォーム」欄の任意の場所にペーストします。前後項目にならって <p>(段落タグ) <br>(改行タグ)を入れてみました。

wordpress_contactform708_4

「メール」欄は、フォームを記入した人に送られるメールの編集部分です。緑色に囲まれた文字列をコピーし、メール本文: の任意の場所にペーストします。

wordpress_contactform708_6

何の項目かすぐ分かるよう、お問い合わせ項目: と前記しています。これでチェックボックスの追加は終了です。最後に「保存」ボタンを押すのを忘れないように。

 

 

◆「Contact Form 7」のアレンジ実装確認

実際のサイトを確認してみると、このようにチェックボックスが追加されています。

フォームを記入した人送られるメールには、このように項目が追加されました。

「Contact Form 7」は非常に柔軟なプラグインで、タグの編集次第では本格的なメールフォームに仕上げることができます。公式サイト「Contact Form 7: WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。」で詳しく解説されています。

関連記事 : 「Contact Form 7」と「Akismet」を連携し、スパムメールを防ぐ

関連記事 : 「Contact Form 7」で送信完了ページを表示する

関連記事 : 「Contact Form 7」で送信者に自動返信メールを送る

公式サイト : 「Contact Form 7: WordPress のお問い合わせフォームプラグイン。シンプル、でも柔軟。」

◆ Similar Posts

One Comment »

  • ちょっとメモ:WordPressでお問い合わせフォームを作る | ブクマ! said:

    [...] WordPressにお問い合わせフォームを設置する、プラグイン「Contact Form 7」 | WordPressの使い方を覚えたい [...]

Leave a comment!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.