カスタマイズ

ContactForm7をワードプレスのメールフォームにしよう

ContactForm7の作り方

ブログのお問い合わせフォームを設置するためにWordPressのプラグイン「Contact Form 7(コンタクトフォーム7)」を使ってメールフォームを作ってみました。

設定時間は20分位で簡単に設定できたので簡単に作れるメールフォームです。

そんな「Contact Form 7(コンタクトフォーム7)」の設置方法を全手順画像付きで紹介します。

これからブログにメールフォームを設置を考えている方は参考にしてみて下さい。

Contact Form 7(コンタクトフォーム7)とは

「Contact Form 7(コンタクトフォーム7)」とはWordPressの拡張機能(プラグイン)の1つなのでWordPressを利用している人だけが無料で使えるフォームです。

一番の特徴はhtmlなどの知識がなくても簡単にメールフォームが作れること。自分好みのカスタマイズも出来るので使いやすいメールフォームです。

 

WordPressでブログを運営している人が使っているメールフォームは「Contact Form 7(コンタクトフォーム7)」か「Googleフォーム」のどちらかではないでしょうか。

日本だけでなく世界中で利用されている有名なメールフォームです。

 

Contact Form7の設定方法画像付きで紹介

Contact Form7を導入する方法と設定の時に気をつけるポイントを紹介します。

[1]プラグインをインストール

まずはじめにWordPressのプラグインで「Contact Form 7(コンタクトフォーム7)」をインストールします。

管理画面の「プラグイン」→「新規追加」をクリック

プラグインの検索が画面に「Contact Form 7」と入力するとContact Form7のプラグインが表示されますので「今すぐインストール」をクリックします。

Contact Form 7プラグインインストール

有効化」になったらインストール完了です。

Contact Form 7プラグインインストール

有効化をクリックするとプラグインページのインストール済み欄に表示されます。

有効化

これでインストール完了です。

 

[2]設定

設定するにはプラグインページでContact Form7の「設定」を押すか、左のメニューに追加されている「お問い合わせ」から設定をスタートします。

Contact Form設定

新規追加で新しく作ってもいいですが、既に登録されているテンプレートが1つあるのでテンプレートを編集して利用するとスムーズです。

テンプレート

このままでも十分使えますが何箇所か変更してカスタマイズしていきましょう。

「編集」ボタンを押して表示された画面がコチラ。設定する項目は赤枠が付いている部分です。

Contact Form7編集画面

タイトルは管理する為の名前なので分かりやすい名前にしておきましょう。

ここから細かい設定を行います。

[3]フォーム欄の設定

フォーム欄はお問い合わせフォームの項目を設定する場所です。私は別のブログで利用していますが項目はシンプルにこの4つです。

フォーム項目

ちなみにContact Form7で設定できる項目はこの14項目

追加項目
  1. テキスト
  2. メール
  3. アドレス
  4. URL
  5. 電話番号
  6. 数値
  7. 日付
  8. テキストエリア
  9. ドロップダウンメニュー
  10. チェックボックス
  11. ラジオボタン
  12. 承諾確認
  13. クイズ
  14. ファイル送信ボタン

フォーム欄を追加するときはhtmlを少しいじることになりますがカスタマイズが可能です。

1つ追加例を紹介します。

テキストエリアを追加する場合

フォームの「テキスト」を選択します。

テキストエリア追加

小窓が出てきますのでここで細かい設定を行います。設定を変更しなくても問題なく使えますが2つだけ機能を紹介します。

フォーム設定
  • 項目タイプ:必須項目にする場合はチェックを入れましょう
  • デフォルト値:文字を入力しておくとフォームにテキストが入力された状態で表示されます。
デフォルト値

他の「名前」「Akismet」「ID属性」「クラス属性」は上級者向けなのであまり使わないです。

項目の設定が終わったら「タグを挿入」ボタンを押すと先ほど作った項目のコードが入力されます。

タグを挿入

これで項目が表示されるのですがこれだけだとレイアウトが崩れてしまうんですね。

そこで最後にhtmlをいじりますが下に書いてあるコードと同じ形にしましょう。

は先ほとタグを導入してできた項目です。

それ以外はコードをコピーして同じレイアウトにしましょう。

コード

以上がフォーム欄の項目設定です。

間違えたら消せばいいだけなのでコードなどを変更してみて下さい。

アンケートなどで利用する場合は細かい機能を利用しますが、お問い合わせだけであればシンプルが一番いいと思います。

 

[4]メール欄の設定

メール欄もそのままで利用できますがカスタマイズすると便利な機能が使えます。

メール欄は2箇所設定項目があります。まず1箇所目は表示されている部分です。

この部分は自分宛にくるメールの内容をカスタマイズできます。

メールフォーム設定

入力内容がそのまま入ってくる設定になっているので何もいじらず利用して問題ないと思いますが題名など分かりやすくしたい場合は変更して下さい。

私はこのまま利用しています。

次が重要でこの下に「メール(2)」の項目があります。ココにチェックを入れて修正していきましょう。

メール2の設定

メール(2)は自動返信メールの設定なので相手側へ届くメール内容になります。

自動返信メールの設定方法

自動返信メールは伝えたいことや注意点などを記載しましょう。

「例えば返信まで数日かかります」など。Amazonや楽天で商品を購入した時に自分宛にくるメールと同じですね。

私は注意点があまりなかったので挨拶文などを追加しました。実際に変更した箇所はこの4箇所です。

自動返信メール

題名やメッセージ本文は定型文を探して変更しました。

送信元のメールアドレスは変更しなくてもいいのですが念のため変えました。

難しい設定などは一切なく少し分かりやすくしただけですね。自動返信メールは送信した方に安心してもらえるように必ず設定しましょう。

問い合わせ内容を受信するメールアドレスを登録する欄がありません。メールはWordPress内にある設定画面の「管理者メールアドレス」宛に届きます。

Contact Form7内のメールアドレスなどは変更してもメールの受信は出来ますので覚えておきましょう。

 

[5]メッセージ

メッセージ修正

メッセージの項目はメールを送信した時に表示する文字や、エラーの時に表示する文字を変更する箇所です。

最初に入力してある文字で問題なかったので私は変更していませんが気になる方は変更してみましょう。

[6]その他の設定

最後に「その他の設定」項目があります。上級者向けなのでブログのメールフォームで利用するだけであれば使わないです。

例えば管理画面にログインした人だけ入力できるように設定するなど制限をかける時に利用する項目です。

 

以上が設定の説明でした。重要なのは「フォーム」と「メール」の2箇所です。

 

[7]メールフォームを設置

「Contact Form 7(コンタクトフォーム7)」の設定が完了したらコードをコピーしてWordPressの記事へ貼り付けます。

コード貼り付け

この1行をページに貼り付けるだけでメールフォームが表示されています。

実際に設置したメールフォームはコチラ

 

以上が「Contact Form 7(コンタクトフォーム7)」の設置方法の紹介でした。

ページに設置したら必ずテストメールを送りましょう。項目の確認など自分で確かめて変更したい場合は編集して保存し直せば上書きされますよ。

 

Contact Form 7(コンタクトフォーム7)のデメリット

設定方法は簡単なので順番通りに設定すればメールフォームを使えるようになりますが、Contact Form 7(コンタクトフォーム7)にはデメリットもあるので導入前にチェックしておきましょう。

[1]デザイン変更はコードの知識が必要

シンプルなメールフォームなのでどのページにも合うと思いますが、色味やサイズなどを変更したい場合はhtmlやcssを書き換える必要があります。

設定画面で変更できれば一番いいのですがContact Form7は色味などの変更はできないのでWebの知識が必要です。

修正方法など書かれているページもあるのでデザインを変更したい場合は探してみて下さい。