どうも!ほのぱぱです 。 ブログ初心者です!
難しいことはわからない初心者の私が、WordPressのブログになんとか一人で「お問い合わせフォーム」をセッティングできました(祝)
分かりやすく解説したいので、したことをそのまんま解説したいと思います。また、設置したものの、上手に表示できなかったので、その解決法も記載します。
目次
ブログ運営するなら「お問い合わせフォーム」設置を
サイトやブログに必要とされる「お問い合わせフォーム」です。
WordPressのプラグインを使用して設置したいと思います。WordPressプラグインの中の「Contact Form 7」をインストールから有効化し、お問い合わせフォームのセッティングを行います。
ブログやサイトが大きくなって、大勢の方が訪問するようになると、様々な問い合わせが来るようになるはずです。また、Googleアドセンス合格の一つの材料となると思うので、サイトを立ち上げたら早いうちに設置しておきたいところです。
「Contact Form 7」とは
お問い合わせのフォーム設置のために、自分で難しいHTMLを作成する必要がなく、固定ページやサイドバーに「ショートコード」を貼り付けるだけで簡単にお問合せフォームを作成できるプラグインです。
要は私みたいな専門知識がない初心者向けですね!(笑)
初心者の私でも設定できました。こだわりが無ければ、ほとんど初期設定のまま使用できるのでとても簡単です。また、メールが二つ登録できるところが便利です。メールの件は下で詳しく説明します。
「Contact Form 7」の魅力と感じた部分です。
- 簡単に「お問い合わせフォームが設置」できる。ほぼ初期設定でもOK!
- メールアドレスを2つ登録できる。出先もでスマホで確認できる。
インストールしよう
WordPress左サイドバーの「プラグイン」➡「新規追加」をクリック。右上の検索枠に「 contact form 7」と入力し、「今すぐインストール」をクリック。
その後「有効化」をクリックしてください。
新規フォーム作成・設定を行おう
フォームの新規追加
次にフォームを作ります。
WordPressダッシュボードの左サイドバーの「お問い合わせ」をクリック➡上のほうの「新規追加」を選択します。
「コンタクトフォームを追加」の下の空欄に、フォームのタイトルを記入します。”お問い合わせ”、”お問い合わせはこちら”等です。
読者の方がわかれば、何でもいいかと思われます。
各種設定
フォーム名を記入したら、次は設定を行います。
フォーム
フォームに含まれる項目の編集を行います。ここのページが、自分のブログに表示される部分です。
名前・メールアドレス・題名・メッセージ本文・送信ボタンが含まれます。必要と思うものを設定してください。
また初期の段階では「お名前」と記載されていますが、「お名前をここに記入してください」等、案内の変更も手動でできます。これも必要でしたら編集しましょう。
メール
読者の方から、フォームが送信された場合に送られるメールの編集です。メールアドレスの部分に自分のアドレスを入力してください。
基本的にパソコンのOutlookでいいのかなと思います。それが不都合でしたらGoogle等のフリーメールでもいいと思います。お問い合わせ用にフリーメールを取得する場合もあるかもしれませんね。
また、もう一つメールを設定する場合は、画面下のほうの「メール(2)を使用」にアドレスを入力。問い合わせの確認と返信用で分けたい場合等は、設定してください。
メール(2)に、スマホのアドレスを登録しておくと、問い合わせがあった時に、家でPCを開いてなくても出先で確認できるってことですね。これ便利な機能ですので是非利用したいですね!
メッセージ
画面に表示される各種メッセージの表示内容の変更です。これも特に必要なさそうならこのままでも。わたしは初期設定のままにしてあります。後から設定変更できるので、とりあえずこのままでも良いと思います。
これで設定完了ですね!この後、お問い合わせフォームを設定したい場所に張り付けます。
自分のサイトにフォームの設置
フォームのショートコードのコピー
では次に先ほど設定しました「お問い合わせ」のフォームを自分のサイトに張り付けましょう。
WordPressダッシュボードを開いて、左サイドバーにある「お問い合わせ」の表示をクリックしてください➡フォーム一覧の表示➡さっき設定した、「お問い合わせフォーム」がありますので、それの”ショートコード”をコピーをしておいてください。
お問い合わせフォームをセッティング
これが最後の作業です!「お問い合わせ」を表示したい投稿ページを決め貼り付けます。
固定ページを利用する方法と、そのままサイドバーに張り付ける方法があります。
わざわざ新規で固定ページで設定する必要はありませんが、固定ページで設定すると、サイトのフッターメニューなどに使用しやすいです。当サイトは固定ページで作成してます。サイドバーではなくて、自分の好きな場所にさらっと張りやすいのでおすすめしたいです。
ということで、固定メニュー設置方法とサイドバーに貼る方法2つ紹介させてください。
固定ページでお問い合わせフォーム設置
固定ページで「新規作成」をクリックします。タイトルは「お問い合わせフォーム」等、好きなタイトルを記入してください。
ページ内に先ほどのショートコードを貼り付けます。
私はこんな感じで作成しました。固定ページの場合は、「記事をお読みになられた感想やご意見お待ちしております!」のようなコメントを付けたほうが、読者の方に対して親切かと思われます!良かったら参考にしてください。
そして、固定ページができたらサイトの好きな部分に張り付けましょう。
サイドバーに表示
次に、サイドバーに設定する方法です。
サイトの右サイドバーに設定したい場合、左サイドバーの「外観」➡「ウィジェット」をクリック。
ウィジェットの右側にあるのが、ページで表示されるものですね。
左のほうのから「テキスト」があると思うので、それをドラッグして右に張り付けてください。
タイトルに「お問い合わせフォーム」等、好きな言葉で記入します。
下の空白に、先ほどコピーしたショートコードを入れ込みます。
「保存」を押して完了です。
プレビューで確認
必ずプレビューで確認してください。サイドバーで設置した場合サイトの右側に表示されます。
確認して大丈夫でしたら、設定は以上です。お疲れさまでした!
表示が上手にできなかった話
私が設定したときに、うまく表示ができなかったことです。何が起こったかというと。
お問い合わせフォームを読者の方が利用するとき、名前とかメールアドレスを記入するボックスがありますよね。読者の方が記入する空欄です。
そこの「名前」という表示と「名前を記入するボックス(空欄)」が重なってしまって、変な表示になってしまいました。いろいろいじってやっていたら、すごい時間かかりました(笑)
でも意外と簡単に解決できたのです。下の図を見てください。初期の設定の状態です。
「フォーム」の名前やメールアドレスがありますよね。それらを全部、上に詰めたら解決しました!
編集後はこちら⇓
もし、同じようなことで悩んでいる方がいましたら、参考になれば嬉しいです。
以上、contact form 7のインストールから設定の方法でした。