ブログ運営をする上で欠かせないのがお問合せフォームの設置です。
プラグインの「Contact Form 7」を使えば、簡単にお問合せフォームの作成ができます。
![](https://ayarhythm.com/wp-content/uploads/2020/09/新通常顔.jpg)
この記事では、Contact Form 7のインストール方法を紹介します。
Contact form 7をインストール・有効化する
「プラグイン」>「新規追加」をクリックしましょう。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.05.20.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.05.20.png)
「Contact form 7」をインストール・有効化します。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.09.32.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.09.32.png)
コンタクトフォームを設置する
ダッシュボードからお問い合わせ画面に
ダッシュボードから、
「お問い合わせ」>「コンタクトフォーム」をクリックします。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.15.24.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.15.24.png)
コンタクトフォームのコードをコピーする
コンタクトフォームの画面に移動した後、
「コンタクトフォーム1」に表示されている「ショートコード」欄をコピーします。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.17.04-1-1024x321.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.17.04-1-1024x321.png)
固定ページでお問い合わせページを作成する
続いて、「固定ページ」>「新規追加」をクリックします。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.17.26.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.17.26.png)
新規の固定ページを開いたら、Contact Form 7ブロックを追加します。
![](https://ayarhythm.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-10-14.57.24-1024x661.jpg)
![](https://ayarhythm.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-10-14.57.24-1024x661.jpg)
Contact Form7ブロックが追加できたら、以下のように設定しましょう。
![](https://ayarhythm.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-10-14.46.37-1-1024x495.png)
![](https://ayarhythm.com/wp-content/uploads/2021/10/スクリーンショット-2021-10-10-14.46.37-1-1024x495.png)
※ WordPressのテーマによって、編集画面が異なります。(当サイトでは、「SWELL」を使用しています。)
- 題名:お問い合わせ
- 本文:Contact Form7のブロックで、「コンタクトフォーム1」を選択
- パーマリンク:「contact」に設定
編集が完了した後に記事を公開すると、
以下のような「お問い合わせページ」が作成されます。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.22.24-662x1024.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.22.24-662x1024.png)
スパム防止にオススメ!チェックボックスの作り方
コンタクトフォームを編集する
ダッシュボードから、
「お問い合わせ」>「コンタクトフォーム」をクリックします。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.15.24.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-20.15.24.png)
コンタクトフォームの画面に移動した後、
「コンタクトフォーム1」をクリックします。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-22.41.37-1024x236.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-22.41.37-1024x236.png)
編集画面で「承諾確認」をクリック
コンタクトフォームの編集画面に移動をしたら、
「承諾確認」ボタンをクリックします。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-22.42.58-1024x899.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-22.42.58-1024x899.png)
承諾確認のフォームタグをコピーする
「承諾確認」をクリックすると、
フォームタグ生成の画面が開きます。
画面の下部に表示される
「フォームタグ」をコピーします。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-22.44.02.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-22.44.02.png)
「メッセージ本文」の下に
コピーしたファームタグを貼り付けます。
このタグだけのままだと
チェックボックスのみが挿入されるだけなので、
タグの前に一言コメントを載せましょう。
例えば、
「<label> この内容でよろしければ、下記のボックスにチェックを入れて送信してください。」
「<label>上記の内容でよろしければ、チェックを入れて送信してください」など。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-22.47.24-1024x676.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-22.47.24-1024x676.png)
入力が完了したら、
「保存」を忘れずにクリックしましょう。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-23.20.43-664x1024.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-23.20.43-664x1024.png)
固定ページで確認する
「コンタクトフォーム」の編集が終えたら、
固定ページで作った「お問い合わせページ」を確認しましょう。
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-22.48.02-872x1024.png)
![](https://ayarhythm.com/wp-content/uploads/2020/09/スクリーンショット-2020-09-13-22.48.02-872x1024.png)
このようにチェックボタンができたら完了です。
![](https://ayarhythm.com/wp-content/uploads/2020/09/新通常顔.jpg)
![](https://ayarhythm.com/wp-content/uploads/2020/09/新通常顔.jpg)
![](https://ayarhythm.com/wp-content/uploads/2020/09/新通常顔.jpg)
チェックボックス以外にも
同じ手順でお問い合わせフォームを
カスタマイズすることができますよ!