【プラグインなし】Xserverの問合せフォームをWordPressサイドバーに設置する方法!」では、サイドバーに設置する方法を紹介しました!

 

こちらの記事では賢威7でグローバルメニューに設置する方法を解説します。

 

【Xserver×賢威7×WordPress】問合せフォームをプラグインなしでグローバルメニューに設置する方法!

【プラグインなし】Xserverの問合せフォームをWordPressサイドバーに設置する方法!」の記事から飛んできた方は途中まで内容が重複していますので問合せメールフォームをWordPressのグローバルメニューに設置までジャンプしてください。

エックスサーバーのサーバーパネルでCGIツールを設定

エックスサーバーのサーバーパネルにログイン

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法「CGIツール」をクリック

 

メールフォームのところの

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法

「一覧・インストール」をクリック

 

該当するドメインの右側にある

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法

「選択する」をクリック

 

「メールフォームのインストール」をクリック

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法

インストールURL:contactやtoiawaseなど適宜入力

ユーザーID:任意の文字列を決めて入力(ログインIDとなります)

パスワード:適宜決めて入力

受信メールアドレス:問合せを受信するメールアドレスを入力

「メールフォームの作成(確認)」をクリック

 

確認画面になる

内容がOKであれば「メールフォームの作成(確定)」をクリック

 

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法

「設定画面へログイン」をクリック

問合せメールフォームの基本設定

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法

先ほど設定したユーザーIDとパスワードを入力

「ログイン」をクリック

 

「基本設定」のところで

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法

変更したい箇所があれば変更

 

 

複数のサイトを運営している方/今後サイトを増やしていく予定の方は「受信するメールの件名」のところにブログ名を付け加えて「○○ブログのお問合わせを受信しました」という件名にしておくと自分がメールを受け取る時に分かりやすいと思います。

 

メールフォーム項目の設定のところで

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法

変更したい箇所があれば変更

一番下までスクロール

少しだけスパムの問い合わせが減る方法

「確認」ボタンを押す前にチェックボックスにレ点を入れてもらう欄を増やすことで、スパムに対して少しだけ効果があります。

スパムに対しては文字認証が最も効果的なのでしょうが、それだと本当に問い合わせをしたい「本物の人間」の手を煩わせすぎてしまうことになります。

読者の手間が最小限で済み、かつスパムに効果的なのがチェックボックスということですね。

 

チェックボックスが不要の方は、問合せメールフォームのデザイン設定までジャンプしてください。

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法

画面右側の「チェックボックス」の右側にある「追加」をクリック

表示名を「確認」や「確認欄」に変更

入力必須にチェック

選択項目の欄に
「上記内容でよろしければこちらにチェック」や
「こちらにチェックの上で確認ボタンを押してください」
「私はロボットではありません」などと入力

 

これで、チェックボックスを設置することができました!

プレビューで確認してみてください。

なお何故かは分かりませんがたまにプレビューが見れないことがあり、見れない時はそのまま進むより他に方法はないようです。

 

「設定を保存する(確認)」をクリック

「設定を保存する(確定)」をクリック

 

何か変更したら必ず設定を保存する(確認)設定を保存する(確定)をクリックしてくださいね。

問合せメールフォームのデザイン設定

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法

メールフォームのデザイン(上図赤矢印で示した箇所の文字色や背景色)を変えたい場合は…

 

「デザインの設定」タブをクリック

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法

「配色の設定」のところでそれぞれの色をサイトの雰囲気に応じて選んでみてください。

 

(「メールフォームに表示するメッセージ」を設定したい場合は「配色の設定」のすぐ下のところで設定できます)

 

何か変更したら必ず設定を保存する(確認)設定を保存する(確定)をクリックしてくださいね。

問合せメールフォームの自動返信設定

自動返信メールを設定したい場合は

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法

「自動返信メールの設定」をクリック

 

何か変更したら必ず設定を保存する(確認)設定を保存する(確定)をクリックしてくださいね。

問合せメールフォームをWordPressのグローバルメニューに設置

エックスサーバーでプラグインなしで問い合わせフォームを作成しグローバルメニューに設置する方法

グローバルメニューというのは上図の赤枠で囲んだところのメニューですね。

 

サイドバーに設置する時と同じ方法でグローバルメニューに設定すると・・・

グローバルメニューをクリックしてから再びリンクをクリックして初めて問い合わせフォームが出るという2段階になるため、読者のユーザビリティが下がってしまいます。

 

そこでこちらの記事では、ワンクリックで問い合わせフォームに到達できる設定を紹介します!

エックスサーバーの「設置用のHTMLタグ」をメモ帳にコピペ

エックスサーバーでプラグインなしで問い合わせフォームを作成する方法

「メールフォーム設置用のHTMLタグ」をコピー

 

メモ帳(など何でも良いです)にペースト

 

こんな感じ↓になっていると思います!

<a href=”http://○○○○.com/script/mailform/△△△△/”>お問い合わせフォーム</a>

○○○○はドメイン名で△△△△はエックスサーバーの問い合わせフォームを作る際に自分で決めた文字列です

 

<a href=”
 と
“>お問い合わせフォーム</a>

削除

 

こんな感じで↓URLだけの状態にします

http://○○○○.com/script/mailform/△△△△/

 

サイトのSSL化をしている方は

https://○○○○.com/script/mailform/△△△△/

という風に、sを入力

SSL化がまだの方はそのままで大丈夫です。

「SSL化って何?」という方は恐らく何もされてないと思うのでそのままで良いと思いますが、もちろん自己責任でお願いします。

 

URLを(次にWordPressでペーストするために)コピー

賢威7の「カスタムリンク」を使って問い合わせフォームをグローバルメニューに設定

WordPressウィジェットの

エックスサーバーでプラグインなしで問い合わせフォームを作成しグローバルメニューに設置する方法

「外観」→「メニュー」をクリック

 

グローバルメニューを初めて設定する場合は…

グローバルメニューにエックスサーバーの問い合わせフォームを設置する方法

メニュー名にグローバルメニューと入力
 ↓
「メニューを作成」をクリック

グローバルメニューにエックスサーバーの問い合わせフォームを設置する方法

メニューの位置:グローバルメニューにチェック
 ↓
「メニューを作成」をクリック

 

これまでにグローバルメニューを設定したことがある場合は…

グローバルメニューが選択されていることを確認(選択されていなければグローバルメニューを選択)

エックスサーバーでプラグインなしで問い合わせフォームを作成しグローバルメニューに設置する方法

 

「カスタムリンク」をクリック

 

エックスサーバーでプラグインなしで問い合わせフォームを作成しグローバルメニューに設置する方法

URL:枠内に入っているhttp://を削除してから、先ほどメモ帳からコピーしておいたURLをペースト

リンク文字列:「お問い合わせ」や「CONTACT」など適宜入力

「メニューに追加」をクリック

 

カスタムリンクが右へ移動します

エックスサーバーでプラグインなしで問い合わせフォームを作成しグローバルメニューに設置する方法

このように一番下にある場合は、グローバルメニューの一番右に表示されます。

例えばグローバルメニューの一番左に表示させたい場合は一番上にドラッグするなど、好みの場所に移動させてください。

 

「メニューを保存」をクリック

 

これで、エックスサーバーの問い合わせフォームをグローバルメニューに設置することができました!

さいごに

こんな風にプラグインなしで問い合わせフォームを設置できるエックスサーバーの機能は、ぜひ有効活用していきたいですね。