こちらの記事では、WordPress導入済みな方向けに問い合わせフォームを簡単に設定する方法についてご紹介させていただきます!5分で終わるぐらいに簡単に設置可能です!
どーも、さきやんです!ご覧いただきありがとうございます。
こちらの記事にたどり着いているということは「問い合わせフォーム」に興味・関心がある方だと思っています。
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
こちらの記事は以下のような人におススメだと思います!
- WordPressに「問い合わせフォーム」を設置したい方
- 細かい設定・説明不要で「問い合わせフォーム」を使いたい方
それではどうぞご覧ください!
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_flow-00.jpg?resize=453%2C518&ssl=1)
こちらの記事では、作業としては大きく3つのステップで説明させていただきます。
皆さんも3つのステップを実施することでこちらの記事のゴールである「問い合わせフォーム」が使える状態になっていると思います!
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
さきやんも色々と試行錯誤しながら進めておりますので設定していく上でハマった箇所もお伝えしていきたいと思います。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_flow-01.jpg?resize=353%2C519&ssl=1)
3つのステップを説明する前にさきやんの事前の準備・構築環境についてご紹介したいと思います。
こちらの構築環境に似たような方であれば参考になる記事だと思いますので是非ご覧いただければ幸いです。
WordPressのAWS環境は特に大きく関係ないと思いますので、WordPressの環境があれば参考になると思います!
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
さきやんも自身のスキルアップのためにAWSを使ってみようと一念発起してWordPress環境を構築したのでその辺を記事化したいと思いつつ、1年経ってしまいましたw 思い出せたら改めて記事化したいと思います。
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
テーマはSANGOを利用して記事化していますので、必要に応じてご自身の環境と置き換えてご覧いただければ幸いです。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_flow-02.jpg?resize=353%2C508&ssl=1)
まずはじめに、問い合わせフォームについて改めて簡単にご紹介させていただきます。
問い合わせフォームとは、ブログやサイトにアクセスしたユーザーが管理者に対して問い合わせをするためのフォームです。
サイト管理者側としては以下のようなメリットがあります。
Googleアドセンスとは以下の通りです。
Google AdSense は、オンライン コンテンツから収益を得ることができるサイト運営者様向けのサービスです。コンテンツや訪問者に基づいて、関連する広告がサイトに表示されます。広告は、商品やサービスを宣伝する広告主によって作成され、費用が支払われます。広告の種類によって広告主が支払う金額が異なりますので、広告から得られる収益も異なります。
出典:Googleアドセンスヘルプ(https://support.google.com/adsense/answer/6242051?hl=ja)
こちらの記事をご覧の方もGoogleアドセンス導入などを視野に入れられているのではないかと思います。
問い合わせフォームを設置する方法としてはいくつかあり、簡単にご紹介させていただきます
他にもいろいろとあるとは思いますが、こちらの記事では「① WordPressのプラグインを利用する」の方法で問い合わせフォームの設置を簡単に済ませたいと思います。
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
さきやんも何とかしっかりと中身のある記事を書きつつ、Googleアドセンスでサーバーのランニングコストが稼げるようになりたいと思っていますww
これ以降は3つのステップで説明させていただきます!
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_flow-03.jpg?resize=353%2C509&ssl=1)
まず初めに、WordPress管理画面の「プラグイン」から「新規追加」を選択し、「Contact Form 7」と検索します。
検索結果の中から「Contact Form 7」を探し、「今すぐインストール」をクリックします。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_step1_01.jpg?resize=759%2C398&ssl=1)
このContact Form 7のプラグインの詳細を知りたい方は以下からご確認ください。
インストール完了後に、「Activate」ボタンをクリックし、プラグインを有効化します。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_step1_02.jpg?resize=392%2C265&ssl=1)
これでプラグインの準備は完了です!
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_flow-04.jpg?resize=353%2C509&ssl=1)
次に、問い合わせフォームの内容を設定(プラグインの設定)していきます。
プラグインの有効化が完了すると、WordPress管理画面上に「お問い合わせ」が追加されています。
「お問い合わせ」を選択し、デフォルトで準備されている「コンタクトフォーム1」をクリックします。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_step2_01.jpg?resize=745%2C406&ssl=1)
表示された画面で色々とフォームの修正を行うことができますが、デフォルトの内容でフォームが出来上がります。
変更されたい方はこちらで適宜変更いただければと思いますが、そのままでもいい方は以下の画像の「ショートコード」をコピーします。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_step2_02.jpg?resize=556%2C860&ssl=1)
コピーが終わったらこちらの画面での作業は完了です。
WordPress管理画面から「固定ページ」を選択し、「新規追加」をクリックします。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_step3_01.jpg?resize=479%2C134&ssl=1)
表示された画面(テーマがSANGOなのでSANGO仕様)で、タイトルに「問い合わせフォーム」などわかるような名前を入力し、記事内容に先ほどコピーした「ショートコード」を貼り付けます。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_step3_02.jpg?resize=656%2C607&ssl=1)
入力後は以下のような画面(テーマがSANGOなのでSANGO仕様)になるため、パーマリンク(表示URL)を変更する場合は右側URLを選択します。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_step3_03.jpg?resize=807%2C374&ssl=1)
以下はパーマリンクを変更する場合の画面ですが、例えば「contact」などにすれば固定ページのURLが指定されます。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_step3_05.jpg?resize=245%2C237&ssl=1)
内容に問題なければ「公開」ボタンをクリックします。
作成後のフォーム画面は以下のようになります。これで問い合わせフォームの内容の設定は完了です。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_step3_04.jpg?resize=616%2C856&ssl=1)
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
さきやんも細かい設定はこれからやっていこうと思っていますので、まずは是非皆さんも使える状態にしていただければ幸いです。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_flow-05.jpg?resize=353%2C508&ssl=1)
最後に、作成した問い合わせフォームをブログ側に設置する作業です。
WordPress管理画面から、「外観」を選択し、「メニュー」をクリックします。
表示された固定ページの中から作成した「問い合わせフォーム」をチェックし、「メニューに追加」ボタンをクリックします。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_step4_01.jpg?resize=391%2C370&ssl=1)
メニュー構造の中に追加されるので、必要に応じてメニュー設定で表示場所を変更し、「メニューを保存」ボタンをクリックします。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_step4_02.jpg?resize=672%2C669&ssl=1)
これで問い合わせフォームのサイト内への設定が完了です。
一応フォームの動作確認も兼ねて、作成された問い合わせフォームをご自身で使ってみましょう!
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_step4_03.jpg?resize=609%2C669&ssl=1)
![さきやん](https://i0.wp.com/dx-cancam.com/wp-content/uploads/2024/05/cropped-ac5ae32116277db56dd832de0bfd9220-1-e1716587011540.png?resize=80%2C80)
さきやんはキャプチャを撮りながらだったので時間はかかりましたが、単純に作業だけであれば5分で終わると思います!
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_flow-06.jpg?resize=353%2C545&ssl=1)
お疲れさまでした!これでこちらの記事のゴールは達成です!
これでご覧の皆様も問い合わせフォームが使える状態が整いました!
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_DX_icandoit.jpg?resize=782%2C522)
最後にまとめだけ記載させていただきます!
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_DX_mind.jpg?resize=720%2C528)
さいごに、「WordPressに問い合わせフォームを設置する方法(5分で完了)」と題して紹介した記事についてまとめさせていただきます。
![](https://i0.wp.com/www.dx-cancam.com/wp-content/uploads/2023/03/202303_form_flow-00.jpg?resize=453%2C518)
以上、本記事は終わりになりますので、ここまで読んでいただいた方は誠にありがとうございました!
今後もできれば色々とまとめていきたいと思いますのでよろしくお願いいたします!