「お問合せフォーム」を簡単に作れるWordpressのプラグイン「Contact Form7」です。
お問合せフォームの作り方が分からず萎えていたところに、なんとプラグインがあるではありませんか！
この記事ではContact Form7の使い方について書いていきます。
※グローバルナビゲーションメニューへの設置方法もあります！
Contact Form7とは？
「Contact Form7」はお問合せフォームを簡単に設置できるツールです。ブログについて調べていくと【Google adsence】に合格するには「お問合せフォーム」が必須だ！と書かれたブログがたくさんでてきます。
ユーザーからの質問や意見に応えるためにも必須となる問合せフォームですが、これを一から作るのは大変です。ですのでプラグインをインストールしてショートコードで簡単設置してしまいましょう。
※すでにある技術を上手く組み合わせて最小限で成果を出しましょう！
Contact Form7のインストール方法
他のプラグインとな同じく、左サイドバーの「プラグイン」－「新規追加」からプラグインの検索を行います。検索キーは「Contact Form7」とし、インストール後に有効化しましょう。
こちらの記事には、画像付きで検索方法が載っていますので参考にしてください。
※「Akismet Spam Protection」のインストール手順となります。
Contact Form7の設定方法
「Contact Form7」はインストールして有効化するとすぐに使うことが出来ます。
簡単な設定方法
- 有効化すると左のサイドバーに「お問い合わせ」が作成されるのでクリック。
- 画面上部の「新規追加」をクリック。
- フォームの設定画面が現れますので、好きな形にカスタマイズします。右の写真はデフォルトですが、これだけでもお問合せフォームとして成立します。私はこのまま「保存」しました。
メニューを使用した簡単な設置方法
- ここからはブログへの設置方法ですが、まずは新規の固定ページを作ります。左のサイドバーの「固定ページ」－「新規追加」から作れます。
- 本文中に表示されている「＋」のマークをクリックして「すべて表示」をクリック。
- 左側に一覧が出るので下にスクロールすると「Contact Form7」のアイコンがあるのでクリック。
- 「コンタクトフォームを選択」というドロップダウンリストが出るので、先ほど作ったページのタイトルをクリック。
- 「更新」または「下書きを保存」ボタンをクリックして保存。
- 「プレビュー」を押すと、お問合せフォームが出来ています。
- よければ固定ページを「公開」する。
- 左のサイドバーの「外観」－「メニュー」を選択する。
- 先ほど作成した固定ページのタイトルを探し、チェックボックスをクリックして「メニューに追加」をクリック。
- 表示したい場所は「メニュー設定」で選んで下さい。私は、ヘッダーメニューにしています。
- 右側のメニューに反映されたのを確認して「メニューを保存」をクリック。
【おまけ】グローバルナビゲーションメニューにアイコンを付ける
- ちなみに、メニューに追加したお問合せフォームのタブをクリックすると詳細設定が行えます。
- このブログでは、タイトルを「お問合せ」とし、先頭にアイコンを付けてみました。（アイコンは、Free Icons | Font Awesomeから無料で選べます）
※アイコンが正常に動作されない場合は、この記事の最後（すぐ下）を見てください。
- 設定したメニューがこちらです。
水色の帯（グローバルナビゲーションメニューと呼びます）の右端に作成されました！
以上で「お問合せフォーム」の設定は完了です。簡単にフォームが作れますし、カスタマイズもできますのでオススメのプラグインです。
アイコンが表示されない場合の対処法
メニューにアイコンを付けていますが、設定によっては表示されないか、□で表示されてしまうときがあります。その場合は以下をチェックして下さい。
- Cocoon設定の「全体」タブをクリック。
- 下にスクロールすると「サイトアイコンフォント」とありますので、「Font Awesome 5」を選択する。
アイコンのバージョンのようなものがあり、今回紹介した「Free Icons | Font Awesome」は、「Font Awesome 5」に対応しています。ご注意を。
コメント