wordpress-contact-form-7-202001-ec

WordPress

WordPressプラグイン「Contact Form 7」でお問い合わせフォームを作る方法【ブログにお問い合わせページを設置】



今回は、WordPressブログにおける代表的なプラグインの1つ…

Contact Form 7

の基本的な使い方をご紹介していきたいと思います

まず「Contact Form 7」は、ブログに必須な「お問い合わせフォーム」の作成ツールとして非常におすすめ(もちろん無料)

プロっぽいお問い合わせページが簡単に作れるよ!

僕自身もブログを新規開設するたびに必ず使うプラグインなので、備忘録もかねて手順を公開しておきたいと思います

それではさっそく見ていきましょー🐥

【プラグイン導入の前に】プラグインの種類によっては、導入済みのテーマやプラグインとの相性、またプラグイン自体の問題などによってWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめバックアップを取られた上で全て自己責任にてお願い致します。

当ブログのWordPress環境

  • 使用してるテーマ:WING(AFFINGER5)
  • 使用してるエディタ:旧エディタ(クラシックエディタ)
  • 使用してるプラグイン:↓ の記事ですべて公開してます

WordPressブログで愛用中のおすすめプラグイン「16個」と設定方法をまとめて公開

wing300_gif_osusume

WordPressテーマ WING(AFFINGER5)

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

WordPressプラグイン「Contact Form 7」の導入方法【インストールと有効化】

pc-work-202001_01

普通に「インストール&有効化」をするだけなので、わかる方は読み飛ばしていただいてOKです

① WordPress管理画面 > プラグイン > 新規追加

②画面右上の入力欄に「Contact Form 7」と入力

wordpress-contact-form-7-202001-icon

③ ↑ のアイコンが目印のプラグイン「Contact Form 7」が表示されるので、 今すぐインストール > 有効化 の順にクリック

プラグインの導入はこれでOKです🐥

WordPressプラグイン「Contact Form 7」における、お問い合わせフォーム作成から設置の手順【簡単】

大きく2つのステップです

  1. 固定ページで、お問い合わせフォームを作成する
  2. 作成したお問い合わせページを、任意の場所に設置する

順に見ていきますね🐥

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

pc-work-202001_02

wordpress-contact-form-7-202001_1-01

↑ WordPress管理画面 > お問い合わせ > コンタクトフォーム をクリックします

wordpress-contact-form-7-202001_1-02

↑「コンタクトフォーム1」という項目の右側にあるショートコードを、 [ ] まで含めて丸々コピーします

コピーは、「Ctrl」+「C」!

wordpress-contact-form-7-202001_1-03

↑ 固定ページ > 新規追加 をクリックします

wordpress-contact-form-7-202001_1-04

↑ 本文の入力欄に、さきほどコピーしたショートコードを貼り付けます(画面はビジュアルエディタのままでOK!)

貼りつけは、「Ctrl」+「V」!

あとは、いつもの記事編集と同じように…

  • ページタイトル(「お問い合わせ」が一般的)
  • パーマリンク(「contact」が一般的)

を入力しましょう

ちなみにお問い合わせページは、「NOINDEX」「NOFOLLOW」に設定しておくのがSEO面を考えると無難です

あとは「公開」をクリックすればOK。 これでもう、固定ページで「お問い合わせフォーム」が作成できました

ここから、ブログ内にこの固定ページを設置していきます(次パートへ!)

作成したお問い合わせページを、好きな場所に設置【WING AFFINGER5の場合】

pc-work-202001_03

はじめに

下記は、当ブログでも導入しているWordPressテーマ「WING AFFINGER5」の場合における手順です

使っているWordPressテーマによって、手順や選択肢は多少変わってきます(具体的な場所は、下記ステップのなかでご紹介しています)

今回は、お問い合わせページの一般的な設置場所である「フッター」に置いてみたいと思います

フッターは、サイトの1番下側!

wordpress-contact-form-7-202001_2-01

↑ WordPress管理画面 > 外観 > メニュー をクリックします

wordpress-contact-form-7-202001_2-02

↑「メニュー名」入力欄に「フッターメニュー」など任意の名前を入力して、「メニューを作成」をクリックします

この「メニュー名」は、サイト訪問者に見られるものではないから自分のわかりやすい名称でOK!

つづいて、画面左側の「固定ページ」タブをクリックします(最初から開いてる場合は、そのままで大丈夫です)

wordpress-contact-form-7-202001_2-03

↑ 作成した固定ページ「お問い合わせ」が表示されているはずなので、ここにチェックを入れて「メニューに追加」をクリックします

wordpress-contact-form-7-202001_2-04

↑「フッターメニュー(名前は任意)」に、「お問い合わせ」が追加されました

この状態で、その下の「メニュー設定」から「フッター用メニュー」にチェックを入れます

導入しているWordPressテーマによって、この選択肢は変わってきます(上記は「WING AFFINGER5」における例)

最後に、画面右下の「メニューを保存」をクリックすれば完了です🐥

実際に反映されているか、プレビューを見てみましょう

wordpress-contact-form-7-202001_2-05

↑ フッター(ブログ下部)に、「お問い合わせ」が無事設置されているはずです。 クリックしてみると…

wordpress-contact-form-7-202001_2-06

↑ こんな立派なお問い合わせフォームが表示されました

基本的な作成と設置方法は、これでOKです

大変お疲れさまでした♪

あずき🐥

リクナビNEXT

この記事を書いた人

azuki_01

あずき

専業ブロガー / フリーランス3年目 / 元アパレル / WordPressとSEOを独学で学んで、10年間の会社員生活から独立しました

-WordPress

Copyright© あずきのぶろぐ。 , 2020 All Rights Reserved.