【プラグイン】Contact Form 7でメールフォームを設置

    icon-clock-o読了時間:約11分50秒

WordPressサイト上にお問合せメールフォームを簡単に設置できるプラグイン
Contact Form 7の設置方法と使い方をご説明。
Contact Form 7とFlamingoでメールフォームを設置
専用のメールフォームプログラムを設置していない個人サイトや店舗サイトであれば
「 メールアドレスをそのままサイトに載せるのはちょっとなあ…迷惑メールも来るし… 」
という事もあるかと思います。
そんな時は、この『Contact Form 7』でメールフォームを設置し、
次の記事でご紹介する『Flamingo』で届いたメールを保存・閲覧してみてください。

 目次 

プラグインをインストール
『 Contact Form 7 』コンタクトフォーム設定
固定ページにショートコードを記述
コンタクトフォームの各種設定
  ∟フォームの名前
  ∟フォーム
  ∟メール
  ∟メッセージ
  ∟その他の設定
【 フォーム 】メニュー各項目の記述例
  ∟ラジオボタン
  ∟テキストエリア
  ∟ドロップダウンメニュー
  ∟チェックボックス
  ∟承諾確認
  ∟クイズ
  ∟ファイル
  ∟送信ボタン
固定ページを公開&メールフォームへのリンクを設置
フォームを複数設置する場合
送信されたメッセージをWordPress上で保存・確認


Contact Form 7 の公式サイト

Contact Form 7は作者さんが日本の方なので、サイトでの説明も日本語で大変助かります。
使用している中でご不明な点があればContact Form 7の使い方をご覧ください。
また、Contact Form 7 をインストールしたらFlamingoも併用するのがおすすめなので
Flamingoの説明もご参考に。

それでは以下で設置と使い方について図解していきます。


プラグインをインストール

左サイドメニュー【 プラグイン 】⇒【 新規追加 】で
『 Contact Form 7 』 と 『 Flamingo 』 を一つずつ検索して
それぞれを【 今すぐインストール 】⇒【 有効化 】してください。
プラグインをインストール
メールフォームの設置手順としては
①メールフォーム用の固定ページを作る
②『 Contact Form 7 』のショートコードを固定ページに記述
③メールフォームの設定を確認・修正
④自分のメールアドレス、もしくは『 Flamingo 』の受信フォルダに届いたメールを確認
といった流れになります。


『 Contact Form 7 』コンタクトフォーム設定

『 Contact Form 7 』を有効化すると、管理画面に左メニュー内に
【 お問い合わせ 】というメニューが表示されます。
『 Contact Form 7 』を有効化
最初から『 コンタクトフォーム1 』 という1個目のフォームが用意されているので、
これを編集してお好みのメールフォームにしていきます。
コンタクトフォーム設置1


固定ページにショートコードを記述

新しい固定ページを作成して、メールフォームを設置呼び出しするためのショートコードを記述します。

Contact Form 7・固定ページにショートコード
①管理画面のメニュー【 固定ページ 】⇒【 新規追加 】をクリック。
②固定ページのタイトルを入力。
③スラッグ(URL末尾になるタグ)を入力。
 『mailform』等なんでも構いませんが、他のページと被らないようにだけ気をつけて。
④メールフォームの上部や下部に書いておきたい本文テキストを入力。
 特に無ければ何も入力しなくてもOK。
⑤作成したメールフォームのショートコードをコピペします。

ページを下書き保存したら、プレビューで確認してみましょう。
Contact Form 7の設定と、ショートコードの記述が
両方とも間違っていなければメールフォームが表示されるはずです。
この時点では下書きの状態なので、サイト閲覧者はメールフォームを利用することはできません。

ここからフォームの各種設定を行い、エラーなどの問題がないことを確認してから
固定ページを公開して、メールフォームのリンクをサイト内に設置します。

メールフォームへのリンク
<a href=”https://○○.com/blog/mail-form” title=”メールフォーム” target=”_blank”>お問合せメールフォーム</a>


コンタクトフォームの各種設定

フォーム名の部分をクリックして各種の設定を行います。
Contact Form 7の設定

フォームの名前

メールフォームの名称を自分が分かりやすいものに変更できます。
(もちろんコンタクトフォーム1のままでも構いません)

ショートコードは後ほど固定ページに記述する時に使います。

フォーム

デフォルト(標準)の状態では
・お名前
・メールアドレス
・題名
・メッセージ本文
・添付ファイル
・送信ボタン
これらの項目がメールフォームのページに表示される状態です。

『 別にメールアドレスは必須じゃなくても良いから“*”を外そう 』
『 添付ファイルの項目は別に要らないから削除で 』
『 選択項目作りたいから【 ラジオボタン 】のフォームタグを追加で記述しよう 』
というように、お好みに合わせてメールフォームを作ってください。

それぞれの設定については【 フォーム 】メニュー各項目の記述例で詳しく説明します。

メール

メールフォームから送信されるメールに関する情報の設定項目です。
Contact Form 7・メール設定

メッセージ

メールフォーム利用者に対して表示するメッセージ内容です。
デフォルトのままでも問題はありません。

その他の設定

サイトに会員ログイン機能を付けている場合に
ログインしているユーザーだけがメールフォームから送信できる機能など
より詳細なカスタマイズをしたい場合に使います。
『 Contact Form 7 』公式サイトのその他の設定のページをご覧ください。


【 フォーム 】メニュー各項目の記述例

複数の選択項目を用意して、フォーム利用者に選んでもらうタイプの項目も
色々な種類が用意されています。

上部のメニューから設置したい項目を選び、設定内容を決めたら【 タグを挿入 】。
設置用のタグが記述されるので、改行タグや段落タグを付け足して見栄えを整えます。

クリックで●を付けてチェックを入れるタイプの選択肢である
【 ラジオボタン 】だとこのような感じの手順になります。
Contact Form 7・ラジオボタンの設置例

テキストエリア

自由に文章を入力してもらえる入力欄です。
企業のメールフォームだと
【 ご意見・ご感想等ご自由にお書きください 】と設置されていたりしますね。
Contact Form 7・テキストエリア

ドロップダウンメニュー

クリックするとズラッと項目が出てくる選択肢です。
皆さんが良く見かける企業メールフォームとかだと、
都道府県や生年月日を選ぶ時などに使われていますね。
Contact Form 7・ドロップダウンメニュー

チェックボックス

クリックで□にレ点を入れて選択するタイプの選択肢です。
Contact Form 7・チェックボックス

承諾確認

同意事項に同意してくれるかどうか。
Contact Form 7・承諾確認

クイズ

『 問い 』 と 『 答え 』 を設定することができます。
問いと答えの間に【 | 】(半角パイプライン)の記号を入れて区切ります。
Contact Form 7・クイズ

ファイル

画像ファイルやExcelファイルなどを添付して送ってもらうことができます。
Contact Form 7・ファイル添付

ファイルサイズの上限(バイト)

お使いのメールサーバーによっては、受信できるサイズに制限が掛かっていることがあります。
あらかじめ受信可能なサイズを確認して、GB(ギガバイト)やMB(メガバイト)のサイズ表記を
バイトに換算して設定します。
バイトの計算は単位変換の計算をしてくれるサイトさんを使わせてもらうと簡単です。

上記の画像の例では20MB=20971520バイトを上限にしています。

受け入れ可能なファイル形式

添付して送信することを許可するファイルの拡張子を設定できます。

上記の画像の例では【 gif|png|jpg|jpeg 】と、
一般的に使われている画像の拡張子を設定しています。
間に【 | 】(半角パイプライン)の記号を入れて区切ります。

拡張子について詳しくはファイル拡張子の表示と変更方法をご覧ください。

送信ボタン

送信ボタンの文面は【 送信 】や【 送る 】など自由に変更できます。
Contact Form 7・送信ボタン


固定ページを公開&メールフォームへのリンクを設置

フォームの各種設定を行い、エラーなどの問題がないことを確認したら
固定ページを公開して、メールフォームに繋がるリンクをサイト内に設置します。

メールフォームリンク
<a href=”https://○○.com/blog/mail-form” title=”メールフォーム” target=”_blank”>お問合せメールフォーム</a>


フォームを複数設置する場合

①【 お問い合わせ 】⇒【 新規追加 】をクリック。
②メールフォームの名前を付けます。
③フォームの内容やメール返送先のメールアドレス等、変更したい箇所があればそれぞれ設定してください。
④【 保存 】で新しいメールフォームが作成されます。
コンタクトフォーム追加設置1

前回作ったフォームと同じものを複製することも可能です
Contact Form 7・フォームの複製
メールフォームを新規追加、もしくは複製したら
新しい固定ページを作成してショートコードを記述すればOKです。


送信されたメッセージをWordPress上で保存・確認

Contact Form 7で作成したメールフォームで送信されたメッセージは
通常、設定画面で指定した自分のメールアドレスに届き、それ以外で保存されません。

でも届いたメールをうっかり削除した時や、迷惑メールに振り分けられて
気づかなかった時などのために、WordPressの管理画面上でも
届いたメールを確認できるように保存しておいてくれるプラグインがFlamingoです。

次の記事でFlamingoの設定方法をご説明しますので、合わせてインストールしてみてください。
 icon-lightbulb-o 【プラグイン】FlamingoでContact Form 7のメールを保存

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket