ブログのノウハウ

【5分でできる】WordPressブログのお問い合わせフォームの作り方【2種類選べます】

WordPressブログでお問い合わせフォームを作る方法

こんにちは、yuji(@yuji_invest)です。
このブログでは、WordPressとアフィリエイトのノウハウについて詳しく解説しています。

WordPressでお問い合わせフォームを作りたいです。
簡単な作成方法を教えてください。

以上のような、お問い合わせフォームに関する質問にお答えします。

ブログのお問い合わせフォームを設置すると、連絡手段としてとても役に立ちます。

お問い合わせフォームから届くメール
・読者からの質問
・企業からの案件連絡
・アフィリエイト特単アップの連絡

このように、アフィリエイトをするなら必ず作成しておきたいページです。

そこでこの記事では、お問い合わせフォームの作り方~ヘッダーメニューに表示する方法まで、詳しく解説します。

※Googleアドセンス審査にも関わる内容なので、サクっと作ってしまいましょう。作業時間は5分ほどで完了します。

WordPressブログのお問い合わせフォームの作り方

WordPressブログでお問い合わせフォームを作る方法

WordPressブログのお問い合わせフォームの作成には、2つの方法があります。

お問い合わせフォーム作成方法
①Contact Form 7で作成
②Googleフォームで作成

以下で詳しく解説します。

①Contact Form 7でお問い合わせフォームを作る方法

まずは、Contact Form 7でお問い合わせフォームを作成します。

Contact Form 7とは、WordPressのお問い合わせフォーム用プラグインです。

当ブログでもContact Form 7を利用しています。
》yujiblogお問い合わせフォーム

お問い合わせフォーム作成手順

1.まずWordPress管理画面から「プラグイン」→「新規追加」に進みます。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順

2.右上の検索欄に「Contact Form 7」を入力し、Contact Form 7を「今すぐインストール」→「有効化」します。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順

3.次に「お問い合わせ」→「新規追加」に進みます。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順

4.コンタクトフォーム追加画面で「お問い合わせフォーム」と入力します。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順

5.次に「メール」タブを開いて「送信先」にメールアドレスを入力します。(※最初から入力してある「[_site_admin_email]」は消しても大丈夫です。)
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順

6.最後にページ下の「保存」をクリックします。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順

7.「お問い合わせ」→「コンタクトフォーム」から、先ほど作成したお問い合わせフォームの「ショートコード」をコピーします。ContactForm7の設定方法

8.コピーができたら「固定ページ」→「新規追加」に進みます。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順

9.固定ページのタイトルを「お問い合わせ」にして、ブロックエディタから「ショートコード」を選択します。ContactForm7の設定方法

10.先ほどコピーしたショートコードを貼り付けて「公開」をクリックします。ContactForm7の設定方法

11.固定ページを開くと、シンプルなお問い合わせページが表示されます。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順

これでContact Form 7のお問い合わせ作成手順は完了です。

※完成後は、自分あてにテスト送信をしてください。

ここからは、こだわりたい方向けに当ブログで利用中のおすすめ設定を紹介します。

Contact Form 7のおすすめカスタマイズ

以下では、基本設定ができた方向けにおすすめのカスタマイズを紹介します。

1.WordPress管理画面から「お問い合わせ」→「コンタクトフォーム」に進みます。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順・おすすめカスタマイズ

2.先ほど作成した「お問い合わせフォーム」を開きます。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順・おすすめカスタマイズ

3.「フォーム」タブを開き、内容を以下のコードに置き換えます。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順・おすすめカスタマイズ

<label><span class=haveto>必須</span>お名前
[text* your-name] </label>
<label><span class=haveto>必須</span>メールアドレス
[email* your-email] </label>
<label><span class=haveto>必須</span>件名
[text* your-subject] </label>
<label><span class=haveto>必須</span>メッセージ本文
[textarea your-message] </label>
[acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらにチェックを入れてから送信してください。
[submit id:formbtn "送信"]

4.コピペができたら「メール」タブを開きます。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順・おすすめカスタマイズ

5.画面下の「メール(2)を使用」にチェックを入れます。(※相手へ送る受付完了メールです。)
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順・おすすめカスタマイズ

6.題名に「【yujiblog】お問い合わせを受け付けました」を入力します。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順・おすすめカスタマイズ

7.最後に画面下の「保存」をクリックします。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順・おすすめカスタマイズ

8.次に「外観」から「テーマエディター」に進みます。
Cocoonヘッダーロゴデザイン

9.「スタイルシート」を開き、以下のコードをコピペしてください。
Cocoonヘッダーロゴデザイン

スタイルシートに入力するときの注意点
・編集前に必ずスタイルシートのバックアップを取る
・編集するテーマが「CocoonChild」になっていることを確かめる
・「@charset “UTF-8”;」から始まる部分(最初から入力されている内容)は消さずに下に追記していく
/************************************
** contact form7 カスタマイズ
************************************/
.haveto{
font-size:9px;
padding:2px 5px;
background:#90C31F;
color:#fff;
border-radius:20px;
margin-right:5px;
position:relative;
bottom:2px;
}
#formbtn{
display: block;
padding:10px;
width:300px;
background:#f7f7f7;
color:#545454;
font-size:17px;
border: none;
border-radius:50px;
margin:25px auto 0;
transition:0.4s;
}
#formbtn:hover{
background:#90C31F;
color:#fffff4;
border-radius:50px;
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}

10.コピペができたら「ファイルを更新」をクリックします。
Cocoonヘッダーロゴデザイン

11.以下のようになればOKです。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順・おすすめカスタマイズ

これで、Contact Form 7のおすすめカスタマイズは完了です。

Contact Form 7でスパム対策をする方法

当ブログのスパム対策では、Google reCaptchを利用しています。

Contact Form 7を安心して使うために、以下の記事からスパム対策をして下さいね。
》Advanced noCaptcha & invisible Captchaの設定方法

※ちなみに、セキュリティ系プラグインで有名なAkismetは商用利用の場合に料金がかかるので、コストの面でもreCaptchaがおすめです。

続いて、Googleフォームでお問い合わせフォームを作る手順を解説します。

②Googleフォームでお問い合わせフォームを作る方法

ここからは、Googleフォームでお問い合わせフォームを作成します。

Googleフォームを利用すると、お問い合わせがGメールに届きます。

1.Googleフォームを開きます。

2.「空白」を選択します。
Contact Form 7を使ってWordPressにお問い合わせフォームを作成する手順・おすすめカスタマイズ

3.フォーム名を「お問い合わせ」に変更します。
GoogleフォームでWordPressのお問い合わせフォームを作成する手順

4.下の欄をクリックし、題名を「お名前」・種類を「記述式」にして「必須」にチェックを入れます。
GoogleフォームでWordPressのお問い合わせフォームを作成する手順

5.次に、右のメニューから「+」をクリックして質問を追加します。
GoogleフォームでWordPressのお問い合わせフォームを作成する手順

6.新しい質問欄に、題名を「メールアドレス」・種類を「記述式」にして「必須」にチェックを入れます。
GoogleフォームでWordPressのお問い合わせフォームを作成する手順

7.同様に、題名を「件名」・種類を「記述式」にして「必須」にチェックを入れます。
GoogleフォームでWordPressのお問い合わせフォームを作成する手順

8.最後に、題名を「メッセージ本文」・種類を「段落」にして「必須」にチェックを入れます。
GoogleフォームでWordPressのお問い合わせフォームを作成する手順

9.4つの質問が完成したら、ページ右上の「送信」をクリックします。
GoogleフォームでWordPressのお問い合わせフォームを作成する手順

10.コードマークを開いて「コピー」をクリックします。
GoogleフォームでWordPressのお問い合わせフォームを作成する手順

11.コピーができたらWordPress管理画面を開き「固定ページ」→「新規追加」に進みます。
GoogleフォームでWordPressのお問い合わせフォームを作成する手順

12.タイトルに「お問い合わせ」を入力して、ブロックエディタから「ショートコード」を選択します。
GoogleフォームでWordPressのお問い合わせフォームを作成する手順

13.先ほどコピーしたショートコードを貼り付けて「公開」をクリックします。
GoogleフォームでWordPressのお問い合わせフォームを作成する手順

14.以下のように表示されればOKです。
GoogleフォームでWordPressのお問い合わせフォームを作成する手順

これでGoogleフォームのお問い合わせ作成手順は完了です。

最後に、ヘッダーメニューに表示させる手順をまとめます。

お問い合わせフォームをヘッダーメニューに表示する方法

最後に、お問い合わせフォームをヘッダーメニューに表示します。

まずはヘッダーメニューの内容を作成します。

1.WordPress管理画面の「外観」から「メニュー」を開きます。
Cocoonのヘッダーメニューの作成

2.メニュー名に「ヘッダーメニュー」と入力して「メニューを作成」をクリックします。
Cocoonのヘッダーメニューの作成

3.固定ページから「お問い合わせ」を選択して「メニューに追加」をクリックします。
WordPressのお問い合わせをヘッダーメニューに表示する方法

4.右側に「お問い合わせ」が追加されたら、メニューの位置を「ヘッダーメニュー」にして「メニューを保存」をクリックします。
WordPressのお問い合わせをヘッダーメニューに表示する方法

これで、ヘッダーメニューにお問い合わせフォームを設置できました。

まとめ:お問い合わせフォームで、サイトの利便性が上がる

この記事では、WordPressのお問い合わせフォームの作成方法を解説しました。

ブログアフィリエイトをするなら、お問い合わせフォームの設置は必須です。

簡単なバージョンのものだけでも充分なので、この記事で説明した方法で今すぐ作成してしまいましょう!

ちなみに、Googleアドセンス審査に必要なプライバシーポリシーの作り方についても解説しています。
》プライバシーポリシーと免責事項の書き方

こちらでは、WordPressを始めたら絶対にやるべき初期設定について紹介しています。まだの方は以下をどうぞ。
》WordPressブログのおすすめ初期設定3つ

また、当ブログで利用中のSEOに強いWordPress無料テーマはこちらで紹介しています。
》SEOに強いおすすめWordPressテーマ16選

ブログの収益化の具体的な流れについて知りたい方はこちら。
》ブログ初心者が月5万稼ぐまでのロードマップ

この記事が少しでもお役に立てたら幸いです。
最後まで読んでいただき、ありがとうございました!

》ブログをアクセスアップするには?
》セールスライティングの5つのコツ

コメント

タイトルとURLをコピーしました