WordPressに問い合わせフォームを設置する際はContact Form 7などのプラグインを使うのが一般的ですが、エックスサーバーでサーバーを契約していればプラグインなしでWordPressのサイドバーに問い合わせメールフォームを設置することができます！
WordPressに導入するプラグインは1つでも少ないに越したことありません。
プラグイン同士が干渉し合って起こる不具合もありますし、ブログに不具合が起こるタイミングもプラグインの更新時である確率が決して低くないですからね。
この先ずっとブログを運営していくとして、今後何回のプラグイン更新を経験するでしょうか？
その度にドキドキしながらプラグインを更新しなければいけないことを思うと、1つプラグインを減らすことができれば今後かなりの回数のドキドキを減らすことができます。
ただしJINユーザーで、かつピックアップコンテンツとしてこんな感じに↓問い合わせフォームを設置したい場合は…
やはりプラグインが必要です。
| その場合はこちらの記事↓を参考にしてみてください。 スパムコメントが届きにくい設定も分かりやすくまとめました！ WordPressに問い合わせフォームを設置するContact Form 7の設定方法 |
JINを使っていてもピックアップコンテンツには問い合わせフォームを設置しない場合は、当記事をこのまま読み進めてください。
エックスサーバーを使っていない方はこちら▼
こちらの記事ではスパムコメントが届きにくい設定も紹介しています！
WordPressブログにお問い合わせフォームは不要？
お問い合わせフォームは、WordPressを使う使わないに関係なく、どんなブログにおいても必ず設置しておくべきです。
何かしらの情報をブログで発信している以上、時にはその情報が間違っていたり古くなったり、またブログを読んで不快な思いをする人が全くいないとは言い切れませんよね。
そんな時にブログを読んだ人が情報発信者に直接コンタクトを取る手段となるのがお問い合わせフォームです。
もしお問い合わせフォームがなかったとしたら、読者さんはサーバー管理会社へ連絡を入れるかもしれませんし、Googleに直接報告して大ごとになってしまう可能性も出てきます。
読者さんの声をきちんと受け取って適切に対処できるよう、お問い合わせフォームは必ず設置しましょう！
プラグインなしでXserverの問合せフォームをWordPressサイドバーに設置する方法！
エックスサーバーのサーバーパネルでCGIツールを設定
エックスサーバーのサーバーパネルにログイン
↓
「CGIツール」をクリック
↓
メールフォームのところの…
「一覧・インストール」をクリック
↓
該当するドメインの右側の…
「選択する」をクリック
↓
「メールフォームのインストール」をクリック
インストールURL：contactやtoiawaseなど適宜入力
ユーザーID：任意の文字列を決めて入力（ログインIDとなります）
パスワード：適宜決めて入力
受信メールアドレス：問合せを受信するメールアドレスを入力
↓
「メールフォームの作成（確認）」をクリック
↓
確認画面になるので…
↓
内容がOKであれば「メールフォームの作成（確定）」をクリック
↓
「設定画面へログイン」をクリック
問合せメールフォームの基本設定
先ほど設定したユーザーIDとパスワードを入力
↓
「ログイン」をクリック
↓
「基本設定」のところで…
変更したい箇所があれば変更
複数のサイトを運営している方／今後サイトを増やしていく予定の方は「受信するメールの件名」のところにブログ名を付け加えて
| ○○ブログのお問合わせを受信しました |
という件名になるようにしておくと自分がメールを受け取る時に分かりやすいと思います。
↓
「メールフォーム項目」の設定のところで…
変更したい箇所があれば変更
↓
一番下までスクロール
「確認」ボタンを押す前にチェックボックスにレ点を入れてもらう欄を増やすことで、スパムに対して少しだけ効果があります。
スパムに対してが最も効果的なのは文字認証ですが、それだと本当に問い合わせをしたい「本物の人間」の手を煩わせすぎてしまうことになります。
読者の手間が最小限で済み、かつスパムに効果的なのがチェックボックスということですね。
チェックボックスが不要の方は、問合せメールフォームのデザイン設定までジャンプしてください。
画面右側の「チェックボックス」の右側にある「追加」をクリック
↓
表示名を「確認」や「確認欄」に変更
↓
入力必須にチェック
↓
選択項目の欄に
・上記内容でよろしければこちらにチェック
・こちらにチェックの上で確認ボタンを押してください
・私はロボットではありません
などと入力
↓
これで、チェックボックスを設置することができました！
プレビューで確認してみてください。
なお原因は分かりませんが、たまにプレビューが見れないことがあります。
見れない時はそのまま進むより他に方法はないようです。
↓
「設定を保存する（確認）」をクリック
↓
「設定を保存する（確定）」をクリック
何か変更したら必ず
・設定を保存する（確認）
と
・設定を保存する（確定）
をクリックしてくださいね。
問合せメールフォームのデザイン設定
メールフォームのデザイン（上図赤矢印で示した箇所の文字色や背景色）を変えたい場合は…
↓
「デザインの設定」タブをクリック
「配色の設定」のところでそれぞれの色をサイトの雰囲気に応じて選んでみてください。
↓
（「メールフォームに表示するメッセージ」を設定したい場合は「配色の設定」のすぐ下のところで設定できます）
何か変更したら必ず
・設定を保存する（確認）
と
・設定を保存する（確定）
をクリックしてくださいね。
問合せメールフォームの自動返信設定
自動返信メールを設定したい場合は
「自動返信メールの設定」をクリック
何か変更したら必ず
・設定を保存する（確認）
と
・設定を保存する（確定）
をクリックしてくださいね。
問合せメールフォームをWordPressのサイドバーに設置
「設置用のHTMLタグ」をクリック
↓
タグを（これからWordPressにペーストするため）コピー
↓
WordPressダッシュボードの
「外観」→「ウィジェット」をクリック
↓
左側にある「カスタムHTML」を右側へドラッグ＆ドロップ
WordPressウィジェットは左側にある項目を右側にドラッグすることでサイドバーに表示されるようになります。
また、ここでの上下位置はそのままサイドバーで表示される時の上下位置となりますので、表示させたい位置までドラッグしてください。
↓
「タイトル」を入力（お問い合わせ、CONTACTなど）
↓
「内容」のところに先ほどコピーしたタグをペースト
↓
「保存」をクリック
これで、WordPressのサイドバーに問い合わせメールフォームを設置することができました！
プレビューしてみてくださいね。
この時、下記のエラー↓が出る場合の対処法は…
| Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; CFormItemBinder has a deprecated constructor in /home/サーバーID/ドメイン名/public_html/script/mailform/適宜入力した文字列/admin/lib/CFormItemBinder.php on line 10
Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; CReturnMail has a deprecated constructor in /home/サーバーID/ドメイン名/public_html/script/mailform/適宜入力した文字列/admin/lib/CReturnMail.php on line 10 |
こちらで解説しています。
JINのグローバルメニューに問い合わせフォームを設置する方法は？
グローバルメニューというのはこちら↓のメニューのことです。
「JIN」の設定マニュアル「グローバルメニュー」の設定
さいごに
今回は、プラグインを使わずにWordPressのサイドバーに問い合わせフォームを設置する方法を紹介しました！
手順は
- エックスサーバーのサーバーパネルでメールフォームをインストール
- メールフォームの基本設定やデザイン設定
- 設置用のHTMLタグをコピー
- WordPressのサイドバーにタグをペースト
です。
プラグインは1つでも少なく、スリムなブログ運営をしていきたいものですね。
無料メルマガでは、私がPC1台で自宅やカフェでストレスフリーに働く今のライフスタイルを叶えた経緯をお話ししています。
月収40万円のブログを始めるためにまず私が何をしたかをまとめたオンラインコンテンツも無料でプレゼントしていますので、ぜひ下記からメルマガに登録してみてください！
[…] そうそう。僕、URLをはりつけるたびにお問合せフォームがないことを憂いてたじゃないですか？見てくださいよこれ⇒https://amefura.com/script/mailform/contact/じゃーん。お問合せフォームができました。これはこちらを参考にしております。https://behappier-miki.com/xserver-contact […]