こんにちは、ヨシオカ(@yoshigadge)です。
WordPressテーマ「SWELL」をインストールした後にすることの一つとして、問い合わせフォームの作成とサイトへの設置方法を画像つきで紹介します。
今回紹介する手順は、「WPForms」というプラグインを使用した方法で、↓の画像のような問い合わせフォームをブログ初心者でも簡単に作成できます。
問い合わせフォームは、サイトへの質問・コメントなどを受け入れることでサイトへの信頼性を高め、Googleアドセンスの審査にも影響していると言われています。
ブログ初心者でも本記事の手順どおりに進めれば問い合わせフォームを作成でき、サイト内に設置できますよ!
![](https://yoshigadge.com/wp-content/uploads/2021/03/23-1.png)
やること①:問い合わせフォーム用のプラグイン(WPForms)のインストール
![](https://yoshigadge.com/wp-content/uploads/2021/03/blog-5927256_1920-1024x576.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
まずは問い合わせフォームを簡単に作成するためのプラグインをインストールしましょう。
「WPForms」というプラグインは、ドラッグアンドドロップでパーツを組み合わせて問い合わせフォームを作成できる、ブログ初心者にもおすすめのプラグインです。
WordPressのダッシュボードにある「プラグイン」から「新規追加」を選択。
![](https://yoshigadge.com/wp-content/uploads/2021/03/02d26c71790c555140e99735caccdab2-1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/02d26c71790c555140e99735caccdab2-1.png)
検索バーに「Contact Form by WPForms」と入力して検索し、表示されたら「今すぐインストール」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/2415a2bf6143772f37da1094b1fcacc2-1-1024x463.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/2415a2bf6143772f37da1094b1fcacc2-1-1024x463.png)
「有効化」をクリック。これでプラグインのインストールは完了です。
![](https://yoshigadge.com/wp-content/uploads/2021/03/bdbcba752fa9eb49acdc3b76ce6776fb-1-1024x466.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/bdbcba752fa9eb49acdc3b76ce6776fb-1-1024x466.png)
やること②:WPFormsで「問い合わせフォーム」を作成
![](https://yoshigadge.com/wp-content/uploads/2021/03/miles-burke-idhx-MOCDSk-unsplash-1-1024x683.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/03/miles-burke-idhx-MOCDSk-unsplash-1-1024x683.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/01/456bf2fa9ef051fea7b408783548eb0c.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/456bf2fa9ef051fea7b408783548eb0c.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/456bf2fa9ef051fea7b408783548eb0c.png)
インストールした「WPForms」を使って、実際に問い合わせフォームを作ってみましょう!
「WPForms」をインストールして有効化した後に↓の画面が表示されます。「最初のフォームを作成」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/017bfd98990afdb09480b430633fcb71-1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/017bfd98990afdb09480b430633fcb71-1.png)
【参考】
↑の画面が出ないまたは閉じてしまった場合には、↓のやり方で進めてください。
WordPressのダッシュボードにある「WPForms」から「新規追加」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/c39efd646baa2debb5f8248895584da1-1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/c39efd646baa2debb5f8248895584da1-1.png)
「簡単なお問い合わせフォーム」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/92c59c7816713a5c3d53c0f1ff2bfcce-1-1024x577.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/92c59c7816713a5c3d53c0f1ff2bfcce-1-1024x577.png)
デフォルトのシンプルな問い合わせフォームが表示されます。このレイアウトで良い場合には、画面右上の「保存」をクリックして「STEP6」に進んでください。
私は、別カラムになっている名前の「名」と「姓」を一つのカラムにするレイアウトにしました。この手順を紹介します。
画面右の「名前」をクリックし、次に画面左のフォーマットの項にある「名、姓」のプルダウンをクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/4a7490d7bca3626ff9e105364e06cd88-1-1024x584.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/4a7490d7bca3626ff9e105364e06cd88-1-1024x584.png)
プルダウンの中から「シンプル」を選択。
![](https://yoshigadge.com/wp-content/uploads/2021/03/d2b13055d232293362088ec5926fae9f-1-1024x410.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/d2b13055d232293362088ec5926fae9f-1-1024x410.png)
「名」と「姓」に分かれていたカラムが一つになりました。この内容で良ければ「保存」をクリック。これで問い合わせフォームの作成は完了です。
「メール」や「コメントまたはメッセージ」をカスタマイズしたい場合には、各項目をクリックして画面左の項目を利用してみてください。
![](https://yoshigadge.com/wp-content/uploads/2021/03/7c9a0c8fc75f0efbd3f25db5689f575f-1-1024x581.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/7c9a0c8fc75f0efbd3f25db5689f575f-1-1024x581.png)
作成した問い合わせフォームをサイト内に表示するためには「ショートコード」というものが必要になります。このショートコードを確認する手順を紹介します。
WordPressのダッシュボードの「WPForms」にある「すべてのフォーム」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/b577dd9ce8b9977f3f18f896061cfe08-1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/b577dd9ce8b9977f3f18f896061cfe08-1.png)
ショートコードの項に赤枠で囲まれた部分をすべてコピーしてください。このショートコードはこの後に使用します。
![](https://yoshigadge.com/wp-content/uploads/2021/03/123d4620d1eac24e2d93ba31cc9a15d2-1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/123d4620d1eac24e2d93ba31cc9a15d2-1.png)
やること③:問い合わせフォーム用の「固定ページ」の作成
![](https://yoshigadge.com/wp-content/uploads/2021/03/blog-3383287_1920-1-1024x576.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/03/blog-3383287_1920-1-1024x576.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/01/456bf2fa9ef051fea7b408783548eb0c.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/456bf2fa9ef051fea7b408783548eb0c.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/456bf2fa9ef051fea7b408783548eb0c.png)
問い合わせフォームを表示するための「固定ページ」を作成する手順を解説しますね。
WordPressのダッシュボードの「固定ページ」にある「新規追加」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/5a85f630aae0c3ca4f39068b876e03ad-1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/5a85f630aae0c3ca4f39068b876e03ad-1.png)
サイトに訪れてくれた人が実際にみるページです。
「問い合わせフォーム」を設置するページなので、このページのタイトルは「お問い合わせ」にしてみました。この表記は好きな表記にしてOKです。
また、このページのパーマリンクは「contact」としました。パーマリンクはこのページのURLにどのような表示される文字列ですので、こちらも好きな表記でOKです。
![](https://yoshigadge.com/wp-content/uploads/2021/03/85bbb05b7f0b02f9ac25255a037b8f2a-1-1024x336.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/85bbb05b7f0b02f9ac25255a037b8f2a-1-1024x336.png)
ページの本文をクリックすると「+」ボタンが表示されるのでクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/8842be97062a229d0652a7e9253d5a29-2-1024x273.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/8842be97062a229d0652a7e9253d5a29-2-1024x273.png)
検索バーが表示されるので「ショートコード」と入力。
[/] ショートコードが表示されるのでクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/5d91c805d9450e3967d176e290231d41-2-1024x545.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/5d91c805d9450e3967d176e290231d41-2-1024x545.png)
本記事の「やること②:問い合わせフォームの作成」のSTEP7でコピーしておいた「ショートコード」を貼り付け、「公開」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/c52e1a9bc24b412a6ba064b5f31e1648-2-1024x353.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/c52e1a9bc24b412a6ba064b5f31e1648-2-1024x353.png)
やること④:作成した固定ページをサイト内に設置する。
![](https://yoshigadge.com/wp-content/uploads/2021/03/webdesign-3411373_1920-1024x576.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/03/webdesign-3411373_1920-1024x576.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
![](https://yoshigadge.com/wp-content/uploads/2021/01/62c22a75f746d7ad529100235083a16b.png)
問い合わせフォームページ入りの「固定ページ」をサイト内に設置する手順を紹介します。
私はサイトの「フッター」に問い合わせページへのリンクを設置しています。
WordPressのダッシュボードにある「外観」から「メニュー」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/7a3091bfa726981829518758ec12abda-1.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/7a3091bfa726981829518758ec12abda-1.png)
ここでは以前に固定ページを表示する「メニュー」を作成済という前提の手順を紹介します。
初めて「メニュー」を作成する方は、青下線が引いてある「新しいメニューを作成しましょう」からフッターメニューを作成してください。作成が完了したら↓の手順を参考にしてください。
問い合わせフォームをフッターに表示するので「フッターメニュー」を選択。
画面左の「固定ページ」のセクションに、本記事の「やること③」で作成した固定ページである「お問い合わせ」にチェックを入れ、「メニューに追加」をクリック。
すると、画面右の「メニュー構造」のセクションにお問い合わせが表示されます(赤字下線部分)。
「メニュー設定」にある「フッター」にチェックを入れ、「メニューを保存」をクリック。
![](https://yoshigadge.com/wp-content/uploads/2021/03/1deaafa2969cbd3523edcb09e897c396-2-1024x704.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/1deaafa2969cbd3523edcb09e897c396-2-1024x704.png)
サイトのフッター部分に「お問い合わせ」が表示されました。
![](https://yoshigadge.com/wp-content/uploads/2021/03/01f5a97356ceb0b1907cabb7e25a481b-1-1024x94.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/01f5a97356ceb0b1907cabb7e25a481b-1-1024x94.png)
プラグインの「WPForms」で作成した問い合わせフォームが無事に表示されました。
これで問い合わせフォームの設置は完了です。
![](https://yoshigadge.com/wp-content/uploads/2021/03/23-2.png)
![](https://yoshigadge.com/wp-content/uploads/2021/03/23-2.png)
まとめ:問い合わせフォームの作成と設置
問い合わせフォームは、サイトへの質問・コメントなどを受け入れることでサイトへの信頼性を高め、Googleアドセンスの審査にも影響していると言われています。
問い合わせフォームは本記事で紹介した↓の手順で、ブログ初心者でも簡単に作成することができます。
SWELLのインストール後に問い合わせフォームをまだ作成していない場合には、ぜひ作成してみてください。
やること①:問い合わせフォーム作成用のプラグイン(WPForms)のインストール。
やること②:WPFormsで「問い合わせフォーム」を作成。
やること③:問い合わせフォーム用の「固定ページ」の作成。
やること④:作成した固定ページをサイト内に設置。
![](https://yoshigadge.com/wp-content/uploads/2021/02/stephen-phillips-hostreviews-co-uk-sSPzmL7fpWc-unsplash-2-300x169.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/stephen-phillips-hostreviews-co-uk-sSPzmL7fpWc-unsplash-2-300x169.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/analysis-1841158_1920-1-300x169.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/analysis-1841158_1920-1-300x169.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/c2d34df85d952c96c293f9898da44605-300x169.jpg)
![](https://yoshigadge.com/wp-content/uploads/2021/02/c2d34df85d952c96c293f9898da44605-300x169.jpg)