Font Awesome
ワードプレス

ワードプレス かんたんに作れる!お問い合わせフォームの作成方法 Cocoon

ワードプレス
この記事は約5分で読めます。
記事を書いた人
プロフィールナナ
ねこ好きの40代専業主婦
【保有資格】FP3級、簿記2級、宅建、登録販売者

ブログの運営者と連絡が取りたいのに、お問い合わせページがないと困りますよね。

お問い合わせページがあれば、ブログ運営者と連絡が取れるようになります。ブログの運営上、何かトラブルがあったときにも役に立ちます。

お問い合わせページを作るメリットは、Googleアドセンスの審査に通りやすくなることと、ブログの信頼性がアップすることです。

ナナ
ナナ

もしかしたら、仕事の依頼があるかもしれないので、最初に作っておきましょう。

今回はワードプレスでお問い合わせフォームを作成、表示する方法を紹介します。

ワードプレスでお問い合わせフォームを作成する方法

お問い合わせフォームを作成・設置するために必要な設定は、以下の5つです。

お問い合わせフォームの作成手順
  1. Contact Form 7のプラグインをインストール
  2. お問い合わせフォームの作成
  3. 送信メールの設定
  4. お問い合わせ用の固定ページを作成
  5. 任意の場所にお問い合わせページを表示

Contact Form 7のプラグインをインストール

まずはお問い合わせフォームを作成するために、Contact Form 7のプラグインをインストールします。

ワードプレスの管理画面にログインして、ダッシュボード画面から、「プラグイン」→「新規追加」をクリックします。

「プラグインの検索…」の枠内に、Contact Form 7と入力します。

Contact Form 7のプラグインが表示されるので、「今すぐインストール」をクリックします。  

ナナ
ナナ

インストールが完了したら、プラグインを有効化しましょう。

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

次は、お問い合わせフォームを作成します。

ワードプレスのダッシュボード画面から、「お問い合わせ」→「新規追加」をクリックします。

以下の画面が表示されます。

デフォルトのままでもOKですが、お好みで好きな項目を追加しましょう。

ナナ
ナナ

デフォルトのまま使う場合は、「送信メールの設定」にすすんでください。

新しくフォームを作り直す場合

新しく作成する場合は、入力を全て削除して、フォームを最初から作り直します。

ナナ
ナナ

私が作成したのは以下のフォームです。

  • お名前
  • 電話番号
  • メールアドレス
  • 題名
  • お問い合わせ内容
新しくお問い合わせフォームを作成する手順
作成手順
  1. お名前(必須)と入力、改行して→「テキスト」をクリックします。必須項目に✓を入れて、名前に「your-name」と入力→「タグを挿入」をクリックします。
  2. 1行開けます。
  3. 電話番号(必須)と入力、改行して→「電話番号」をクリックします。必須項目に✓を入れて、「タグを挿入」をクリックします。
  4. 1行開けます。
  5. メールアドレス(必須)と入力、改行して→「メールアドレス」をクリックします。必須項目に✓を入れて、「your-email」と入力→「タグを挿入」をクリックします。
  6. 1行開けます。
  7. 題名(必須)と入力、改行して→「テキスト」をクリックします。必須項目に✓を入れて、「your-subject」と入力→「タグを挿入」をクリックします。
  8. 1行開けます。
  9. お問い合わせ内容(必須)と入力、改行して→「テキストエリア」をクリックします。必須項目に✓を入れて、「your-massage」と入力→「タグを挿入」をクリックします。
  10. 1行開けます。
  11. 何も入力せず、「送信ボタン」をクリックします。ラベルに、「送信する」と入力→「タグを挿入」をクリックします。

「コンタクトフォームの編集」のすぐ下の枠内に、コンタクトフォームと入力、「保存」をクリックします。

ナナ
ナナ

私はこのように変更しました。上記の方法で、自分の好きな項目のフォームを作成できます。

送信メールの設定

次は送信メールの設定を行います。

送信メールの設定をしないと、お問い合わせフォームに入力した内容が、正しく受信できません。

コンタクトフォームの編集画面にある、「メール」をクリックします。

メッセージ本文に、以下の通り入力します。

入力が完了したら、「保存」をクリックします。

ナナ
ナナ

お疲れさまでした。

これでメールフォームの作成は終わりました。

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

次は先ほど作成した、お問い合わせフォームを表示する設定を行います。

ナナ
ナナ

固定ページに、お問い合わせのページを作ります。

その前にショートコードをコピーしておきましょう。

ショートコードをコピーする

ショートコードをコピーする
  • ワードプレスのダッシュボード画面から、「お問い合わせ」→「コンタクトフォーム」をクリックします。
  • 先ほど作成したコンタクトフォームの右横にある、[]内のショートコードを全部コピーします。

固定ページにショートコードを貼り付ける

ダッシュボード画面から、固定ページ→新規追加をクリックします。

「タイトルを追加」に、お問い合わせと入力して、ブロック一覧にある、「ショートコード」をクリックします。

「ショートコードをここに入力…」に、先ほどコピーしたショートコードを貼り付けます。

あとは記事を公開すれば、固定ページにお問い合わせフォームが表示されるようになりました。

任意の場所にお問い合わせページを表示

あとは先ほど作成したお問い合わせページを、ブログのトップページや、グローバルメニュー、フッターなど、好きな位置に表示すればOKです。

ナナ
ナナ

表示する設定は、メニューからできますよ。

ダッシュボード画面→「外観」→「メニュー」

新しいメニューを作成して、メニューの位置を指定するだけです。

ナナ
ナナ

必ず、お試しでメールを送信して、正しく設定できているか確認しましょう。

まとめ

今回は、ワードプレスでお問い合わせフォームを作成する方法を紹介しました。

自分で1からお問い合わせフォームを作成するのは大変ですが、プラグインを利用すれば、かんたんにお問い合わせフォームを作成できます。

ぜひ今回の記事を参考に作成してみてください。

この記事を書いた人
ナナ

このサイトを運営しているナナです。

ねこ・株式投資・節約・資格取得・音楽鑑賞・断捨離が好きです。
何でもやりたいことはやってみる!
というチャレンジ精神でブログを始めました。

1度きりの人生楽しまなきゃ損!がモットーです。

ナナをフォローする
ナナをフォローする

ねこのライセンス
error:Content is protected !!
タイトルとURLをコピーしました