悩んでいる人 Googleアドセンス合格のためにも、仕事依頼を受け取るためにも「お問い合わせフォーム」はあった方が良いらしい。設置方法が知りたいな。
こんなお悩みを解決します。
✔本記事の信頼性
プロフィール・ueha-su（@sedorisuta)
ブログ・インスタ・Twitterなど各種媒体を展開中。
自分のブログ内に「お問い合わフォーム」を作るときは、プラグインの『Contact Form 7（コンタクトフォーム セブン）』を使いましょう！
HTMLやCSSの専門的な知識も必要ないため、初心者ブロガーさんでも簡単にお問い合わせページを設置できます。
- Googleアドセンス対策をしたい
- 仕事依頼を受け取るために作りたい
- 自分のメールアドレスを公開せず、問い合わせを受け取れるようにしたい
- 記事のコメント欄以外で問い合わせを受け取れるようにしたい
「記事のコメント欄で代用できるじゃん」と思う方もいらっしゃるでしょうが、企業は誰もが見える場で仕事依頼をするのを避ける傾向にあります。
お問い合わせフォームがあるとASPなどの企業も仕事依頼がしやすくなるというわけです。
この記事では、ブラグイン「contact form 7」の設定方法と使い方を解説していきます。
目次【読みたいところだけ読めます】
プラグイン「contact form 7」を使って問い合わせページを設置する
『Contact Form 7』は日本製のプラグインのため、設定画面は日本語で書かれています。
簡単に設定できるので安心してくださいね。
手順の流れは以下の通りです。
| 手順 | 目的 |
| ⑴ contact form 7の設定 | プラグインを有効化する |
| ⑵ お問い合わせフォームの作成 | フォームをつくる |
| ⑶ お問い合わせページの作成 | フォームをページに反映させる |
| ⑷ お問い合わせページの設置 | ページをブログ内に反映させる |
さっそく作業を始めましょう！
Contact Form 7の設定方法
プラグイン『Contact Form 7』の設定方法を解説します。
まずは、管理画面の左メニューから『プラグイン』⇒『新規追加』をクリックしてください。
画面が切り替わりましたら、右上の検索窓に『Contact Form 7』と入力しましょう。
『今すぐインストール』⇒『有効化』をクリックしてください。
これで設定は完了したので、次は使い方を説明します。
Contact Form 7の使い方【お問い合わせフォーム作成】
簡単なお問い合わせフォームの場合、お名前・メールアドレス・題名・メッセージ本文の4項目があればOKです。
Contact Form 7を有効化すると、管理画面の左メニューに『お問い合わせ』というメニューが増えます。
管理画面の左メニュー『お問い合わせ』⇒『コンタクトフォーム』をクリックします。
タイトルの『コンタクトフォーム1』をクリックし、編集画面を開きます。
編集画面のタイトルを「お問い合わせフォーム」に変更し、画面右側にある『保存』をクリックします。
お名前・メールアドレス・題名・メッセージ本文の4項目はデフォルトで設定されていますので、『フォーム』タブは変更しなくてOKです。
『メール』タブをクリックし、以下4ヵ所の変更を行いましょう。
| 送信先 | ご自身のメールアドレスを入力。 お問い合わせがくると、お知らせメールが送信先アドレスに届きます。 |
| 送信元 | お知らせメールの件名になるので、ブログ名を入れましょう。 例）〇〇BLOG |
| 題名 | お知らせメールのタイトルになります。 例）〇〇BLOGからお問い合わせがあります |
| メッセージ本文の一部 | お知らせメールの本文に反映されます。 例）このメールは 〇〇ＢＬＯＧ (http://～～.com) のお問い合わせフォームから送信されました |
当ブログでは以下のように入力されています。参考にしてくださいね。
ウエハース お問い合わせ専用のメールアドレスを作っておくと、メールの管理が楽ですよ。
変更が終わったら『保存』をクリックしてください。
タイトル下にあるショートコード
[ contact-form-7 id=”XXX” title=”お問い合わせフォーム” ]をコピーします。
XXXのid部分は個々のサイトによって異なる数字が入ります。
ご自身の画面のものをそのままコピーすればOKです。
これでフォーム作成は完了です。
【補足】お問い合わせフォームをカスタマイズしたいとき
お問い合わせフォームをカスタマイズしたいときに『フォーム』『メッセージ』『その他の設定』というタブも使って編集していきます。
簡単な問い合わせフォームの場合は、これらのタブを編集する必要はありません。
- ドロップダウンつきの入力欄の作成
- チェックボックスを使った入力欄の作成
- ファイルのアップロード
- 自動返信メール
詳しくは、【WordPressプラグイン】Contact Form 7のカスタマイズ方法をお読みください。
お問い合わせフォームをカスタマイズしたいですか？ 本記事ではお問い合わせフォームのカスタマイズ方法をお伝えしています。ワードプレスでのお問い合わせフォーム作成にお悩みの場合は本記事をご覧ください。
お問い合わせページの作成
固定ページに「お問い合わせページ」を作っていきます。
管理画面の左メニューの『固定ページ』⇒『新規追加』をクリックします。
タイトルに「お問い合わせ」と入力したら、『下書き保存』をクリックしてください。
『下書き保存』をクリックすると、パーマリンクが現れます。
『編集』をクリックして、パーマリンクを「contact-form」や「otoiawase」のような半角英数に変えます。
変更したら、『OK』をクリックしましょう。
次に『テキストモード』をクリックします。
本文に、先ほどコピーした
[ contact-form-7 id=”XXX” title=”お問い合わせフォーム” ]を貼り付けます。
『公開』をクリックしたら作業完了です。
問い合わせページをブログ内に設置する
お問い合わせの固定ページができただけでは、ブログに「お問い合わせ」は反映されません。
「お問い合わせ」は、ブログ内の以下の場所に自由に設置可能です。
- グローバルナビゲーション
- サイドバー
- 記事内
ウエハース このブログはグローバルナビゲーションに設置しているよ！
上の画像のように、実際にブログに反映させる方法をそれぞれ解説していきます。
グローバルナビゲーションへの設置方法
管理画面の左メニューの『外観』⇒『メニュー』をクリックします。
『メニュー名』がグローバルナビゲーションになっていることを確認しましょう。
もし、グローバルナビゲーションがなければ、『新しいメニューを作成しましょう』をクリックして、メニュー名をグローバルナビゲーションにしてください。
次に『固定ページ』⇒『すべて表示』をクリックし、『お問い合わせ』にチェックを入れます。
『メニューに追加』をクリックしましょう。
そうすると、以下のように『お問い合わせ』が追加されます。
Cocoonの場合はこれで良いのですが、テーマによっては以下の作業も行ってください。
続いて、メニュー設定で「グローバルナビゲーション」にチェックを入れます。
テーマによって、メニュー設定の名称が異なります。
Cocoonの場合は「ヘッダーナビ」と「モバイルヘッダーナビ」の2つにチェックを入れてください。
『メニューの保存』をクリックしたら、作業完了です。
PCとスマホからトップページを開いて「お問い合わせ」が反映されているか確認しましょう。
カテゴリーの順番を入れ替えて整えよう
順番を入れ替えたい時は、移動したいカテゴリーをドラッグ＆ドロップで移動させます。
ウエハース このブログは、上から「トップページ・プロフィール・お問い合わせ」の順番にしてあるよ。
サイドバーに設置する方法
画像の赤線で囲ったところがサイドバーです。
サイドバーに「お問い合わせ」を設置する方法を説明します。
まずは、ご自身の[ contact-form-7 id=”XXX” title=”お問い合わせフォーム” ]をコピーしておきましょう。
次に、管理画面の左メニュー『外観』⇒『ウィジェット』をクリックしてください。
『テキスト』を『サイドバー』のエリアにドラッグ&ドロップで持ってくる。
タイトルに「お問い合わせ」と入力して、『テキストのタブ』を押します。
コードを貼り付けて、『保存』をクリックしたら完了です。
ブラウザでサイドバーに設置できたかを確認してくださいね。
記事内に設置する方法
管理画面の左メニュー『外観』⇒『ウィジェット』の画面で作業します。
『テキスト』を、『記事下部』のエリアにドラッグ&ドロップで持っていってください。
Cocoonであれば、『投稿本文下』または『投稿関連記事下』という名称になっています。
タイトル入力、コードの貼り付けもサイドバー設置と同じやり方です。
『保存』をしたら、ブラウザで確認し、反映されていたらOKです。
最後に確認作業をしよう
最後に確認作業を2つ行ってください。
- ブログ内の「お問い合わせ」をクリックし、フォームに飛ぶか確認しましょう。
- 「お問い合わせフォーム」に自分で必須項目を入力して、実際に送信してみましょう。
指定したメールアドレスにお知らせが届けば、正しく設置されたということになります。
正しく設置されていると、こんなお知らせメールが届きます。
『Contact Form 7』の設置方法と使い方｜まとめ
今回はプラグイン『Contact Form 7』を使用して、お問い合わせフォームの作成からブログ内にお問い合わせページを設置するとこをまでを解説しました。
使用しているテーマによって、少しだけ作業工程が異なることがあります。
分からない場合は、「コンタクトフォーム テーマ名」で検索してみると良いでしょう。
お問い合わせページはブログにとって必要なものですので、この記事を参考にして設置するようにしてください。
また、カスタマイズしたいときは【WordPressプラグイン】Contact Form 7のカスタマイズ方法を参考にしてくださいね。
お問い合わせフォームをカスタマイズしたいですか？ 本記事ではお問い合わせフォームのカスタマイズ方法をお伝えしています。ワードプレスでのお問い合わせフォーム作成にお悩みの場合は本記事をご覧ください。
