WordPressサイト上にお問合せメールフォームを簡単に設置できるプラグイン・Contact Form 7の設置方法と使い方をご説明します。
専用のメールフォームプログラムを設置していない個人サイトや店舗サイトであれば「 メールアドレスをそのままサイトに載せるのはちょっとなあ…迷惑メールも来るし… 」という事もあるかと思います。
そんな時は、この『Contact Form 7』でメールフォームを設置し、次の記事でご紹介する『Flamingo』で届いたメールを保存・閲覧してみてください。
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 』を有効化すると、管理画面に左メニュー内に【 お問い合わせ 】というメニューが表示されます。
最初から『 コンタクトフォーム1 』 という1個目のフォームが用意されているので、これを編集してお好みのメールフォームにしていきます。
固定ページにショートコードを記述
新しい固定ページを作成して、メールフォームを設置呼び出しするためのショートコードを記述します。
①管理画面のメニュー【 固定ページ 】⇒【 新規追加 】をクリック。
②固定ページのタイトルを入力。
③スラッグ（URL末尾になるタグ）を入力。
『mailform』等なんでも構いませんが、他のページと被らないようにだけ気をつけて。
④メールフォームの上部や下部に書いておきたい本文テキストを入力。
特に無ければ何も入力しなくてもOK。
⑤作成したメールフォームのショートコードをコピペします。
ページを下書き保存したら、プレビューで確認してみましょう。
Contact Form 7の設定と、ショートコードの記述が両方とも間違っていなければメールフォームが表示されるはずです。
この時点では下書きの状態なので、サイト閲覧者はメールフォームを利用することはできません。
ここからフォームの各種設定を行い、エラーなどの問題がないことを確認してから、固定ページを公開して、メールフォームのリンクをサイト内に設置します。
[su_box title=”メールフォームへのリンク” style=”soft” box_color=”#9bee8e” title_color=”#0b0d1b” radius=”5″]<a href=”https://○○.com/blog/mail-form” title=”メールフォーム” target=”_blank”>お問合せメールフォーム</a>[/su_box]
コンタクトフォームの各種設定
フォーム名の部分をクリックして各種の設定を行います。
フォームの名前
メールフォームの名称を自分が分かりやすいものに変更できます。
（もちろんコンタクトフォーム1のままでも構いません）
ショートコードは後ほど固定ページに記述する時に使います。
フォーム
デフォルト（標準）の状態では
・お名前
・メールアドレス
・題名
・メッセージ本文
・添付ファイル
・送信ボタン
これらの項目がメールフォームのページに表示される状態です。
『 別にメールアドレスは必須じゃなくても良いから“*”を外そう 』
『 添付ファイルの項目は別に要らないから削除で 』
『 選択項目作りたいから【 ラジオボタン 】のフォームタグを追加で記述しよう 』
というように、お好みに合わせてメールフォームを作ってください。
それぞれの設定については下記の『【 フォーム 】メニュー各項目の記述例』の項目で詳しく説明します。
メール
メールフォームから送信されるメールに関する情報の設定項目です。
メッセージ
メールフォーム利用者に対して表示するメッセージ内容です。
デフォルトのままでも問題はありません。
その他の設定
サイトに会員ログイン機能を付けている場合に、ログインしているユーザーだけがメールフォームから送信できる機能など、より詳細なカスタマイズをしたい場合に使います。
『 Contact Form 7 』公式サイトのその他の設定のページをご覧ください。
【 フォーム 】メニュー各項目の記述例
複数の選択項目を用意して、フォーム利用者に選んでもらうタイプの項目も色々な種類が用意されています。
上部のメニューから設置したい項目を選び、設定内容を決めたら【 タグを挿入 】。
設置用のタグが記述されるので、改行タグや段落タグを付け足して見栄えを整えます。
クリックで●を付けてチェックを入れるタイプの選択肢である【 ラジオボタン 】だとこのような感じの手順になります。
テキストエリア
自由に文章を入力してもらえる入力欄です。
企業のメールフォームだと【 ご意見・ご感想等ご自由にお書きください 】と設置されていたりしますね。
ドロップダウンメニュー
クリックするとズラッと項目が出てくる選択肢です。
皆さんが良く見かける企業メールフォームとかだと、都道府県や生年月日を選ぶ時などに使われていますね。
チェックボックス
クリックで□にレ点を入れて選択するタイプの選択肢です。
承諾確認
同意事項に同意してくれるかどうか。
クイズ
『 問い 』 と 『 答え 』 を設定することができます。
問いと答えの間に【 | 】（半角パイプライン）の記号を入れて区切ります。
ファイル
画像ファイルやExcelファイルなどを添付して送ってもらうことができます。
ファイルサイズの上限（バイト）
お使いのメールサーバーによっては、受信できるサイズに制限が掛かっていることがあります。
あらかじめ受信可能なサイズを確認して、GB（ギガバイト）やMB（メガバイト）のサイズ表記をバイトに換算して設定します。
バイトの計算は単位変換の計算をしてくれるサイトさんを使わせてもらうと簡単です。
上記の画像の例では20MB＝20971520バイトを上限にしています。
受け入れ可能なファイル形式
添付して送信することを許可するファイルの拡張子を設定できます。
上記の画像の例では【 gif|png|jpg|jpeg 】と、一般的に使われている画像の拡張子を設定しています。
間に【 | 】（半角パイプライン）の記号を入れて区切ります。
拡張子について詳しくはファイル拡張子の表示と変更方法をご覧ください。
送信ボタン
送信ボタンの文面は【 送信 】や【 送る 】など自由に変更できます。
固定ページを公開＆メールフォームへのリンクを設置
フォームの各種設定を行い、エラーなどの問題がないことを確認したら、固定ページを公開して、メールフォームに繋がるリンクをサイト内に設置します。
[su_box title=”メールフォームリンク” style=”soft” box_color=”#a2dc96″ title_color=”#101110″ radius=”5″]<a href=”https://○○.com/blog/mail-form” title=”メールフォーム” target=”_blank”>お問合せメールフォーム</a>[/su_box]
フォームを複数設置する場合
①【 お問い合わせ 】⇒【 新規追加 】をクリック。
②メールフォームの名前を付けます。
③フォームの内容やメール返送先のメールアドレス等、変更したい箇所があればそれぞれ設定してください。
④【 保存 】で新しいメールフォームが作成されます。
前回作ったフォームと同じものを複製することも可能です
メールフォームを新規追加、もしくは複製したら、新しい固定ページを作成してショートコードを記述すればOKです。
送信されたメッセージをWordPress上で保存・確認
Contact Form 7で作成したメールフォームで送信されたメッセージは通常、設定画面で指定した自分のメールアドレスに届き、それ以外で保存されません。
でも届いたメールをうっかり削除した時や、迷惑メールに振り分けられて気づかなかった時などのために、WordPressの管理画面上でも届いたメールを確認できるように保存しておいてくれるプラグインがFlamingoです。
次の記事でFlamingoの設定方法をご説明しますので、合わせてインストールしてみてください。
【プラグイン】FlamingoでContact Form 7のメールを保存
