ワードプレス

Contact Form 7を使ってお問い合わせページを作成する方法

2021年12月13日

Contact Form 7お問い合わせページ作成方法アイキャッチ画像
りん

お問い合わせページの作成ってどうすればいいの?

そんなお悩みにお答えします。

この記事を書いた人

はまかぜ

副業としてブログを開始し、現在10か月目で収益4桁/月。ブログ運営に関することを発信中です。

「お問い合わせページ」は、サイト訪問者がサイト運営者とコンタクトを取りたいときに窓口となるページです。

「別にそんなのいらないよ!」と思うかも知れません。

しかしGoogleの広告サービスであるGoogleアドセンスの審査においては、お問い合わせページの作成は必須条件のひとつになっています。

はまかぜ

それでは見ていきましょう!

お問い合わせページを作成する手順

お問い合わせページの作成には、Contact Form 7というプラグインを使用します。

Contact Form 7をインストール

まずはContact Form 7をインストールします。

以下の手順を行ってください。

【ダッシュボード】→【プラグイン】→【新規追加】→Contact Form 7と入力して検索

Contact Form 7インストール画像

富士山のアイコンが目印のContact Form 7が出てくるので、「今すぐインストール」をクリック後、「有効化」をクリックします。

Contact Form 7インストール画像2

ダッシュボードに「お問い合わせ」という項目が追加されたことを確認して下さい。

お問い合わせページを固定ページで作成

固定ページを新規作成し、お問い合わせページとして使用します。

【ダッシュボード】→【固定ページ】→【新規追加】

固定ページを新規追加したら、以下の3項目を設定します。

タイトルと本文を入力

タイトルには「お問い合わせ」、本文には「お問い合わせはこちら」と入力します。

お問い合わせページ作成画像

Contact Form 7ブロックを追加

画面左上の「ブロック挿入ツールを切り替え」ボタンをクリックして下へスクロールしていき、ウィジェットの項目から「Contact Form 7」を選びクリックします。

Contact Form 7挿入画像

以下のようにContact Form 7ブロックが追加されていたらOKです。

Contact Form 7設置画像

パーマリンクを設定

最後にパーマリンクを設定して記事を公開します。

例としてURLスラッグにcontact-formと入れましたが、任意の文字でOKです。

パーマリンク設定画像

お問い合わせページへのリンクを設置

お問い合わせページを固定ページで作成し終えたら、トップページにリンクを設置する必要があります。

リンクを設置する方法を2つご紹介します。

ヘッダーメニューに設置する方法

ヘッダーメニューにお問い合わせページへのリンクを貼る方法です。

以下の手順を行いメニュー画面を開いて下さい。

【ダッシュボード】→【外観】→【メニュー】

右側のメニュー構造項目内にある「メニュー名」に「ヘッダーメニュー」と入力し、「メニュー設定」項目の「メニューの位置」は一番上の「ヘッダーメニュー」にチェックを入れて左下の「メニューを作成」ボタンをクリックします。

ヘッダーメニュー作成画像

「メニュー項目を追加」内の「固定ページ」にある「お問い合わせ」にチェックを入れて「メニューに追加」をクリックします。

お問い合わせページをメニューに追加画像

右側の「メニュー構造」に「お問い合わせ」が出現するので、右下の「メニューを保存」をクリックします。

お問い合わせメニュー画像

トップページを表示すると、ヘッダーメニューに「お問い合わせ」というリンクが表示されていたら成功です。

ヘッダーメニュー画像

「お問い合わせ」をクリックしてお問い合わせページが表示されるのを確認しましょう。

プロフィールカードに設置する方法

プロフィールカードにお問い合わせページへのリンクを貼ることもできます。

プロフィールカードへのお問い合わせページ設置画像

以下の手順を行いプロフィール画面を開いて下さい。

【ダッシュボード】→【ユーザー】→【プロフィール】

form(URL)欄にお問い合わせページの固定ページのURLを入力し、ページ下部の「プロフィールを更新」ボタンをクリックします。

以下の画像では例として/contact-form/と入力しています。

プロフィールお問い合わせページリンク設置画像

トップページへアクセスし、プロフィールカードにお問い合わせページへのリンクが設置されていることを確認しましょう。

Contact Form 7の設定

Contact Form 7の設定を行います。

メールアドレスの設定

受信用のメールアドレスが正しく設定されているか確認しましょう。

以下の手順を行い一般設定画面を開いて下さい。

【ダッシュボード】→【設定】→【一般】

管理者メールアドレスに正しくメールアドレスが入力されていることを確認しましょう。

メールアドレス確認画像

送信前の確認のためのチェックボックスを設置

Contact Form 7は、フォームに入力して送信ボタンをクリックすると確認画面が出ることなく送信されてしまいます。

よって、その旨のメッセージを追加して「確認しました」のチェックボックスも用意しておくと親切です。

以下の手順を行いコンタクトフォームの編集画面を開いて下さい。

【ダッシュボード】→【お問い合わせ】→【コンタクトフォーム】→【コンタクトフォーム1】

Contact Form 7一覧画像

フォームの入力画面で[textarea your-message]と[submit "送信"]の間に以下の文章を入れ、最後に保存ボタンをクリックします。

<label>送信ボタンを押すと情報が送信されます(確認画面は表示されません)。
[acceptance check] 確認しました。 [/acceptance]</label>
はまかぜ

上記のコードをコピー&ペーストして下さいね。

Contact Form 7フォーム編集画像

お問い合わせページにアクセスすると、メッセージ本文 (任意)と送信ボタンの間に先ほど設定した注意書きと「確認しました。」のチェックボックスができました。

お問い合わせページ確認画像

自動返信メールの設定

自動返信メールの設定を行います。

Contact Form 7の初期設定では、サイト訪問者がメッセージを送信しても自動返信メールは送信されません。

はまかぜ

「ありがとうございます。メッセージは送信されました。」と出ますが、本当にきちんと送信できているか不安ですよね。

自動返信メールが送信されるように設定しましょう。

以下の手順を行いコンタクトフォームのメール編集画面を開いて下さい。

【ダッシュボード】→【お問い合わせ】→【コンタクトフォーム】→【コンタクトフォーム1】→【メール】

Contact Form 7メール編集画面

「メール」編集画面の下部にある「メール(2)」の「メール(2)を使用」にチェックを入れます。

メール(2)使用画像

「メール(2)を使用」にチェックを入れると下に新たなフォームが展開されるので、「メッセージ本文」のところを以下のとおり書き換えます。

このたびは、当サイトへお問い合わせいただきありがとうございました。

以下の内容でメールを受け付けました。

 メールアドレス:[your-email]
 題名:[your-subject]
 お問い合わせ内容:

 [your-message]

 --  このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました。
はまかぜ

上記のコードをコピー&ペーストして下さいね。

メール(2)メッセージ本文編集画像

メッセージ本文を書き換えたら、ページ下部の保存ボタンをクリックして完了です。

テストメッセージを送信し確認する

最後に、お問い合わせページから

  • 氏名
  • メールアドレス(管理者メールとは違うもの
  • 題名
  • メッセージ本文

を入力して、送信しましょう。

無事に自動送信メールが受信できていれば成功です。

にほんブログ村 ブログブログ ブログ運営へ
にほんブログ村

  • この記事を書いた人
  • 最新記事

はまかぜ

2021年12月から副業としてブログを開始。ブログで収益を上げていく過程やブログ運営に関すること、資産運用記録を発信中です。 40代共働き夫婦 | 子供2人 | アメブロ歴4年

-ワードプレス
-