メールフォームのプラグイン「Contact Form 7」 - 新世代Web制作テクニック総特集 | デザインってオモシロイ -MdN Design Interactive-

メールフォームのプラグイン「Contact Form 7」 - 新世代Web制作テクニック総特集

2024.4.20 SAT

【サイトリニューアル!】新サイトはこちらMdNについて

 

web creators特別号
スマートフォン・ソーシャルメディア・WordPress
Web制作テクニック総特集

WordPress 13
メールフォームのプラグイン「Contact Form 7」

コーポレートサイトにおいて「お問い合わせメールフォームを設置したい」というニーズは多いだろう。WordPressの問い合わせメールフォーム関連のプラグインで最もダウンロード数の多いのが「Contact Form 7」だ。

解説/星野邦敏(株式会社コミュニティコム)



日本人が開発したプラグイン

「Contact Form 7」は世界的にも使われているが、開発者は日本人で、三好隆之氏が開発している。したがって、メールフォームにおける日本語独特の文字化けなどの問題も解決されているので、とても使いやすい【01】。

【01】WordPress Plugins 公式ディレクトリ(http://wordpress.org/extend/plugins/)
【01】クックパッド株式会社のお問い合わせメールフォームも「Contact Form 7」プラグインが使われている。(https://info.cookpad.com/pressroom/inquiry


フォームの編集

「Contact Form 7」プラグインは、SSLに対応するプラグインと連携することで、メールフォーム部分のページをSSLにして、インターネット上での情報のやり取りを暗号化して送受信するように設定できる。「Contact Form 7」プラグインをインストールして有効化すると、管理画面の左メニューに「お問い合わせ」ができるので、そこから編集していく。メールフォーム項目は自由に追加編集できる。フォームの「タグを作成」で、テキスト項目やラジオボタンやチェックボックスを作っていこう【02】。

【02】「承諾の確認」や「ファイルのアップロード」などの項目も追加することができる。個人情報保護の規約にチェックを入っていないと送信できないようにする、特定のファイルを見積もり段階であらかじめ送ってもらうようにする、といった使い方もできる。
【02】「承諾の確認」や「ファイルのアップロード」などの項目も追加することができる。個人情報保護の規約にチェックを入っていないと送信できないようにする、特定のファイルを見積もり段階であらかじめ送ってもらうようにする、といった使い方もできる。


自動返信機能

送信するメールの詳細は「メール」欄で設定できる【03】。「宛先」を【04】 とすれば、ユーザーがフォームに入力したメールアドレス宛に自動返信することも可能だ。さらに「メッセージ本文」を【05】のように記載すれば、ユーザーがフォームに入力した名前をメッセージに含められるので、より丁寧な自動返信となる。ユーザーへの返信と自分が受け取るメールを分けたい場合は、「メール(2)を使う」にチェックを入れて個別に設定するとよい。

【03】初期状態のメール送信内容部分。「メッセージ本文」には、作成した項目を追加すると、メールフォーム送信内容として掲載される。
【03】初期状態のメール送信内容部分。「メッセージ本文」には、作成した項目を追加すると、メールフォーム送信内容として掲載される。

【04】
【04】

【05】
【05】


メッセージの変更

メールフォーム部分に記載されるメッセージも変更することが可能だ。

メールフォームを作成したら、【02】の、「このコードをコピーして、投稿、ページ、またはテキストウィジェットの本文内にペーストしてください。」と書かれているコードをコピーして投稿本文に貼り付けるとメールフォームが作成される。これはテキストウィジェットにも貼り付けることができるので、サイドバーやフッター部分に簡易的な問い合わせフォームを作りたい場合などに活用できるだろう。


[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在