ブログのノウハウ

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

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

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

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

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

この記事の内容
・Contact Form 7でお問い合わせフォームを作る方法
・Googleフォームでお問い合わせフォームを作る方法
・迷惑メール対策のやり方
・お問い合わせフォームをヘッダーメニューに表示する方法

yujiblogpv0120

当ブログはコツコツ更新した結果、月間18万PVとなりました。
またアフィリエイト収入も増えており、現在は月85万ほどを稼いでいます。

本記事では、WordPressブログのお問い合わせフォームの作り方を解説しました。

ブログのお問い合わせフォームを設置すると、

・読者からの質問
・企業からの案件連絡
・アフィリエイト特単アップの連絡

などの連絡が届くようになります。

「お問い合わせフォームを作りたい!」という人は、この記事でヘッダーメニューに表示する方法までをまとめたので、是非参考にしてみてくださいね。

※作業は5分ほどで完了しますので、サクっと終わらせましょう!

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

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

①Contact Form 7で作成
②Googleフォームで作成

詳しく解説したので、お好きな方を選んで設定してください。

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

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

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

Contact Form 7設定手順

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のカスタマイズ

以下では、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を利用しています。

(※セキュリティ系プラグインで有名なAkismetは商用利用では有料です。)

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

続いて、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のお問い合わせフォームの作成方法を解説しました。

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

簡単なバージョンのものだけでも充分なので、この記事で説明した方法で5分で作成してくださいね!

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

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

以下は、ブログ収入を伸ばしたい方へのおすすめ記事です。

多くの人に読まれる記事を書こう

yujiblogpv0120

当ブログではSEOで検索上位を獲得した結果、アクセス数が大幅に伸びました。

このような「読まれる記事の書き方」をテンプレにまとめたので、参考にしていただけたらと思います。
》ブログ記事の書き方テンプレート

アフィリエイト神ツールを使いこなそう

また、当ブログの現在の収益は月85万ほどとなっていますが、このようなブログ運営を支えてくれた「神ツール」を以下にて紹介しています。
》ブログアフィリエイトのおすすめツール15選

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

》ブログで月5万稼ぐロードマップ
》アフィリエイトの完全マップ

コメント

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