こんにちは!かーこ( @kaaaa_co)です。
ブログやサイトを運営するなら「お問い合わせフォーム」は合ったほうがいいですね!
サイト開設後に、アドセンスなど考えているなら必ず設置しておきましょう。
(Googleフォームなど使う手もあり)
こちらのプラグインは簡単に設置でき、ワードプレスでお問い合わせフォームを作るなら「Contact Form 7」というほど有名です。
- 初心者でも簡単カスタマイズ
- 自動返信メールなど作れる
プラグイン作者は、Takayuki Miyoshiさんという日本人の方です。
その前に一般的にプラグインを入れる場合の注意点を知っておきましょう。
- アップデートがまめにされているか。
- 使用しているワードプレスとの互換性はあるか。
- 検索結果で上位か。使用している人は多いか。
※プラグイン情報の下の部分を見て確認!
- 使用しているテーマ・サイトの目的・ユーザーのスキルによって「必要なプラグイン」は変わる。適宜インストールする。
- プラグインは必要最小限に留める。
![](https://31012.jp/wp-content/uploads/2019/11/e92f25df48bc5657c7f844d041005304.png)
「Contact Form 7」は頻繁に更新されていて、最新のワードプレスとの互換性もあるので安心してできます。
INDEX
Contact Form 7をインストールする
ログインして「プラグイン」→「新規追加」で「Contact Form 7」を検索。
「今すぐインストール」をクリックし、「有効化」しましょう。
(※写真はすでにインストール済みのもの)
Contact Form 7の基本設定
管理画面の「お問い合わせ」から「新規追加」をクリックします。
設定は簡単です。
![](https://31012.jp/wp-content/uploads/2019/11/8840e48fd0eaf51ba8c9b62e02c12a4f.png)
1.「新規追加」コンタクトフォームを追加
このフォームのタイトルを入力します。
![](https://31012.jp/wp-content/uploads/2019/11/5ace86d0d8cb767b8e0fde2dc4e8a88f-1024x852.png)
「保存」を押すと、タイトルの下にショートコードが表示されるのでコピーして、
「固定ページ」で作ってある、「お問い合わせ」ページに貼り付けます。
![](https://31012.jp/wp-content/uploads/2019/11/ed411388165412da7c08428510ce39f8-1024x180.png)
↓
![](https://31012.jp/wp-content/uploads/2019/11/68998047d266dc6f8465fa2b70c41f81-1024x618.png)
↓
このように表示されます。
フォームをカスタムする
本文の上部のボタンで様々なフォームをつくることができる。
![](https://31012.jp/wp-content/uploads/2019/11/cc47935412bd7809e69e82087e5f0f65-1024x299.png)
デフォルトでは
- 「お名前」「題名」→テキスト
- 「メールアドレス」→メールアドレス
- 「メッセージ本文」→テキストエリア
- 「送信」→送信ボタン
がつかわれています。
テキスト | 一行の短い文の入力に使用 ex.名前・住所 |
---|---|
メールアドレス | メール専用項目。不適切だと自動でやり直しになる。 |
URL | サイトアドレスなど入力 |
電話番号 | メール専用項目。不適切だと自動でやり直しになる。 |
数値 | バーで数値を入力できる |
日付 | 例)生年月日など |
テキストエリア | 何行でも入力できる。例)お問い合わせ内容の詳細など |
ドロップダウンメニュー | 都道府県など |
チェックボックス | 項目を選択形式で表示。単一か複数か設定する。 |
ラジオボタン | 項目を選択形式で表示。単一選択。 |
承諾確認 | 個人情報同意ボタンなどに表示 |
クイズ | ぬるーっといくかどうか。特になければデフォルト。 |
ファイル | 送付して欲しいファイルを貼り付けてもらう |
「テキスト」の設定
![](https://31012.jp/wp-content/uploads/2019/11/402416c553c63a4905f0fdfb5c6a161b-1024x880.png)
項目タイプ | 入力を必須にするかしないか |
---|---|
名前 | このフォームの名前 |
デフォルト値 | このフォームに最初に表示しておく文字 例)三嶋かこ 等 |
Akismet | チェックするとスパムを減少できる(Akismetの設定要) |
ID | CSS装飾するときに使う |
クラス属性 | CSS装飾するときに使う |
入力必須の時
ショートコードのタグ「text」のうしろに「*」がつきます。
<label> お名前 (必須)
[text* text-674] </label>
入力必須ではない時
うしろに「*」はつきません。
<label> お名前 (必須)
[text text-674] </label>
デフォルト値を設定する時
プレースホルダーとして使用するにチェックをいれる。
<label> お名前 (必須)
[text* text-674 placeholder "三嶋かこ"] </label>
↓
![](https://31012.jp/wp-content/uploads/2019/11/9b4bf3d9dd52da1ca817868d88a4e85a-1024x121.png)
メールアドレスの設定
「テキスト」のときと同じです。
<label> メールアドレス (必須)
[email* email-466 placeholder "kaaaa_co@31012.org"] </label>
![](https://31012.jp/wp-content/uploads/2019/11/34153672754938e6ddf070c9105aad7d-1024x115.png)
「URL」の設定
![](https://31012.jp/wp-content/uploads/2019/11/081b6ec29bf5a51621378f95f4db9176-1024x881.png)
<label> URL (必須)
[url* url-518 placeholder "https://31012.jp"]
</label>
![](https://31012.jp/wp-content/uploads/2019/11/f599ba0d789f937f608c7d3de2f4c807-1024x110.png)
「電話番号」の設定
![](https://31012.jp/wp-content/uploads/2019/11/3e56e73c0e818a6c96585803981b746c-1024x884.png)
<label> 電話 (必須)
[tel* tel-675 placeholder "09012345678"]
</label>
「数値」の設定
![](https://31012.jp/wp-content/uploads/2019/11/cd1bcf928d27e47c7b2b8ed0e86b972d-1024x883.png)
項目タイプ「スピンボックス」
<label> 数値【スピンボックス】 (必須)
[number* number-691 min:1 max:5 placeholder "5"]
</label>
![](https://31012.jp/wp-content/uploads/2019/11/010a642adc4b90dfd9fddd69a99e0ba9-1024x118.png)
項目タイプ「スライダー」
<label> 数値【スライダー】 (必須)
[range* number-691 min:1 max:5 placeholder "5"]
</label>
![](https://31012.jp/wp-content/uploads/2019/11/35f8df590e3dc48ca76bf49dc751e272.png)
「日付」の設定
![](https://31012.jp/wp-content/uploads/2019/11/f9f89aa58021296b1c1b8a84effd145f-1024x886.png)
範囲 | 下限〜上限。選択式で入力できる。 |
---|
<label> 日付 (必須)
[date* date-792 min:2019-11-01 max:2019-11-30 placeholder "20191124"]
</label>
![](https://31012.jp/wp-content/uploads/2019/11/0a5594e3c6a3d8a37b60a301d16f89aa-1024x125.png)
「テキストエリア」の設定
![](https://31012.jp/wp-content/uploads/2019/11/83d9d74073958f886e02eef4d1bccde3-1024x886.png)
<label> テキストエリア (必須)
[textarea* textarea-227 placeholder "こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。"]
</label>
![](https://31012.jp/wp-content/uploads/2019/11/d5e5b6684eb6d5c1dfbbb8275ab1ee48-1024x459.png)
「ドロップダウンメニュー」の設定
![](https://31012.jp/wp-content/uploads/2019/11/e09afd453fada0d36f0e498c6810e4dd-1024x889.png)
<label> ドロップダウンメニュー (必須)
[select* menu-775 multiple "サービス1" "サービス2" "サービス3"]
</label>
![](https://31012.jp/wp-content/uploads/2019/11/059aed8d43b110de22adbd3d84b2dacc-1024x380.png)
「チェックボックス」の設定
![](https://31012.jp/wp-content/uploads/2019/11/bc9ad25a651106db463a10ba169e30b8-1024x880.png)
オプション | 「ラベルを前に、チャックボックスを後に配置する」→チェックボックスが右に配置される 「個々の項目をlabel要素で囲む」→ひとつひとつのチェック項目を<label>で囲む。テキストとチェックボックスが関連付けられる。 「チェックボックスを排他化する」→ひとつしかチェックできなくなる |
---|
<label> チェックボックス (必須)
[checkbox* checkbox-411 "メニュー1" "メニュー2" "メニュー3"]
</label>
![](https://31012.jp/wp-content/uploads/2019/11/08ae346fe09bdcc932c52f414f19a57e-1024x139.png)
「メール」のカスタムをしてみる
自動返信メールを設定しよう
「フォーム」タブの右の「メール」タブをクリック。
![](https://31012.jp/wp-content/uploads/2019/11/260b8a3ba43c220c797e6f669c7b6ef3-1024x460.png)
一番下のメール(2)を選択する。
![](https://31012.jp/wp-content/uploads/2019/11/f50701e40dd3be9f29fc76d5daa50e0b-1024x278.png)
![](https://31012.jp/wp-content/uploads/2019/11/c72afbf64b740d98636b4430871267c1-1-1024x828.png)
送信先 | デフォルトの[your-email]で、お問い合わせしてきた人に自動返信する |
---|---|
送信元 | 自分やサイトの名前にしておく |
題名 | 【自動返信メール】お問い合わせありがとうございます!等にする |
![](https://31012.jp/wp-content/uploads/2019/11/e2f173ab14ec892e33e602f42cc48818-840x1024.png)
メッセージ本文 | 自動返信の本文を入力する。 |
---|
以上設定したら「保存」で完了。
Contact Form 7をお問い合わせページに表示
①固定ページで「お問い合わせ」ページを新規作成する。
②先程のショートコードを本文に貼り付ける。
③プレビューで確認。
設定が終わったら自分でフォームに入力して、動作確認やメールの確認をしてみよう!
Contact Form 7を使用して感じたこと
コンタクトフォームを基本設定でした。
柔軟につかいこなしてみてくださいね!
- デフォルトでも十分に使える
- 自動返信メールは設定しておこう