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

お問い合わせフォームを簡単に実装By:Xserver

WordPressでブログを運営していれば、プラグインContact Form 7で簡単にお問い合わせフォームを作成することが出来ます。が!プラグインを30個以上使ってるから1つでも減らしたい人に超おススメ^^

またプラグインを設置しても、メールが届かないなど、うまく使いこなせない、エックスサーバー運営者に、目からウロコ情報!

エックスサーバー利用中なら、お問い合わせフォームを簡単に設置することができます。ただ、設置しても画面幅の狭いスマホなどのデバイスには対応してないので、一部コピペで対応できるレスポンシブWebデザインにさせました。

お問い合わせフォーム設定方法から、レスポンシブ化させてWordPressの管理画面でメニューに実装させるまでの工程を書いていきますね♪

スポンサーリンク

エックスサーバーでお問い合わせフォームを作成

エックスサーバーのCGIツールでドメインを選択し、お問い合わせフォームを簡単に作ることができます。

そのまま設置するには、HTMLの構造の対応(大見出しがh3からのため)とCSSを触ってレスポンシブ対応させるため、少しだけカスタマイズが必要です。コピペして、簡単に設置できるようしてみました。

お問い合わせフォーム:メールフォーム作成

はじめに、Xserverサーバーパネルのログイン画面よりCGIツールを選択してから設定をしていきます。

Xserverサーバーパネル画面:CGIツールの場所

Xserverサーバーパネル画面:CGIツールをクリック。

カウンターとメールフォームを作成するプログラムリストが出てくるので、ここから、お問い合わせフォームを作って準備をはじめます。

メールフォームの『一覧・インストール』をクリック。

メールフォームの『一覧・インストール』をクリック。

次に独自ドメインと、エックスサーバーの✖✖.xsrv.jpと言うドメインのものが出てくるので、

独自ドメインの『選択する』をクリック。

独自ドメインの『選択する』をクリック。

『メールフォームの一覧』には『現在、インストールされたメールフォームはありません。』となってるので、画像のように隣のタブ

メールフォームのインストールタブを選択

『メールフォームのインストール』タブを選択

画面がかわったら項目を入力するだけで、難しいコードを自動で作成してメールフォームができるので、確認しながら見ていきましょう^^

Xserver:メールフォームのインストール画面の説明

Xserver:メールフォームのインストール画面の説明

  1. インストールURL
    • 例)ドメインabc.comや、abcなど文字列を入力
      • お問い合わせフォームのアドレスになる
  2. ユーザーID
    • ログイン時のIDを決める
  3. パスワード
    • 任意のもので解読されないものに
  4. 受信メールアドレス
    • お問い合わせを受信するアドレス
  5. メールフォームの作成(確認)をクリック。
  6. 次の画面を確認したら、メールフォームの設置(確定)をクリック。
  7. 設定画面へのログインする。
    メールフォームの設置準備完了:設定画面へのログインへ
  • メールフォームの一覧の管理ツールからログインでも可能。

メールフォームの基本項目の設定

Xserverデフォルトのお問い合わせフォーム

お問い合わせフォームを作るにあたって、ユーザーさんが見て入力する画面の文字など確認していきます。

基本設定は下記。

メールフォームの基本設定:デフォルト

メールフォームの基本設定:デフォルト

  1. ページのタイトル
    • ブラウザのタブに書かれる名前

      Chormeのタブにはお問い合わせ

      Chormeのタブにはお問合せ

  2. メールフォームの名前
    • 見出しになる名前

      メールフォームのデフォルト:見出しの文字

      メールフォームのデフォルト:見出しの文字

    • デフォルトの『お問合せフォーム』の文字列を確認する
  3. サイトへの戻りURL
    • フォームから、サイトへ戻るリンク先URLトップページがデフォルト
  4. 受信するメールアドレス
    • 受信するメアド(お問い合わせを受けるアドレス)
  5. 受信するメールの件名
    • 『お問合せを受信しました』がデフォルト
    • ブログ名など入れてると良いかも
  6. メールの連続送信を制限する時間
    • 3分なら3分間、同一IPアドレスから連続投稿できない設定。

メールフォーム項目の設定

お問合せフォームの項目:デフォルト

お問合せフォームの項目:デフォルト

お問い合わせフォーム入力欄の右『お名前連絡先のメールアドレスお問合せ内容など』項目の文字列を設定をします。後で変更も可能。

必要最小限で良いのでデフォルトのまま、名前・連絡先アドレス・お問合わせ内容の3点のみに、私はしました。

メールフォーム項目の設定:管理画面

メールフォーム項目の設定:管理画面

  • 管理画面の『表示名』は、お問合せフォーム『右側の項目』に反映。

これで基本設定は終了です^^

デザインの設定で自作スキンを使う(必須項目あり)

デザインの設定タブに移ると、定型スキンか自作スキンを利用するか選択できます。配色の設定で、好きな色を選んでから、自作スキンを作成しても良いですね。

定型スキンの横幅、配色を決める画面

定型スキンの横幅、配色を決める画面

横幅720px(デフォルト)は最大幅です。※320pxのスマホでみると、フォームがはみ出すので、自作スキンで修正します(必須事項)。

ポイント
  • サイズの設定で横幅の最大値を指定。
    • 幅の狭い画面からみると画面右端が見切れる
    • レスポンシブWebデザインに修正。必須事項
  • 大見出しがh3から始まってる
    • ブログによってはh2から始めたいので、見出しを変更
    • 入力画面と確認画面・完了画面のhtmlがある
      • hタグの変更は3種類のテンプレートに
  • CSSの編集。必須事項
  • タイトル・メッセージ・項目の文字や、背景色など配色を変更したい場合

CSSでの設定が面倒なときは、ここでザックリしておくのも良いですね。変更したら、プレビューで装飾などの設定を保存してください。

定型スキンの配色・文字列の設定保存など

定型スキンの配色・文字列の設定保存など

  • メッセージの設定では、メッセージの文字列を変更。
    • 段落と改行の指定もできるので、サッと目を通してください。

文字列の変更は、『自作スキンを利用する』からも出来ます。入力・確認・完了の各テンプレートのプレビューもタブを選択することで、そこから確認できます。

自作スキンを利用する画面で、各プレビューも見れる

自作スキンを利用する画面で、各プレビューも見れる

必須!XserverメールフォームをCSSの編集でスマホ対応にする

純正はスマホ未対応

純正はスマホ未対応、画面が見切れてグラグラする。

純正のままだとスマホビューやPC画面の幅が狭いとき、入力画面の右側が見切れます。レスポンシブWebデザインにしてスマホ対応すると、はみ出ません。(ブラウザはChromeで確認。)

スマホ対応に変更させる

スマホ対応に変更させる

下記CSSの/*コメントアウト*/内には簡単な説明を入れてるので、お好みの数値に変更しても良いですね^^

下記コードをCSS編集画面の一番下に追記すれば、より簡単です。

メールフォームの設定:CSSの追記場所

メールフォームの設定:CSSの追記場所

ほかレスポンシブ対応にしたい部分があれば、メディアクエリを使ってみてはいかがでしょうか。

LINKレスポンシブ対応!メディアクエリの書き方と書く場所

不具合が見つかれば、またゆっくり更新します^^

CSSでお問い合わせフォームのデザインに変更

せっかくお問い合わせフォームに入力してもらうなら、見やすいように、またスマホでタップしやすいように、簡単にstyleの変更を追加しておきました。

styleの追記をする場所:レスポンシブ対応の下

styleの追記をする場所:レスポンシブ対応の下



最低限の変更ですが、数値や色はお好みによって変更してくださいね。ボタンの色が灰色が良い場合。

1行のみ削除または、色を指定してください。

❦おすすめリンクのご紹介❦
  • WEB上にある色と同じ配色したい場合、カラーピッカーが使える便利な拡張機能は下記。

LINKカラーコードを即ゲット!ColorZillaはweb上で見つけた色をコード化する超便利な拡張ツール

  • CSSでカスタマイズを始めたいなら、Chormeの要素の検証がおすすめ。

LINK初心者が要素の検証でカスタマイズできる方法!HTMLとCSS入門編

  • キャッシュをクリアしたい時に便利な拡張機能の紹介

LINK便利過ぎて神!カスタマイズ時のキャッシュを削除!ワンクリで手間省けるChrome拡張機能「Incognito This!」

デフォルトの入力画面

デフォルトの入力画面

上の入力フォームをカスタマイズすると、下記のようになります。

コンタクトフォーム:PCビュー

お問い合わせフォームの入力画面:PCビュー

お問い合わせフォーム、確認画面

お問い合わせフォーム、確認画面

お問い合わせフォームの確認画面:320pxでのビュー

お問い合わせフォームの確認画面:320pxでのビュー

上記のようにボタンも離れて、押しやすいですね。幅の指定は、1文字の半分0.5emを指定してるので、広げたい時は、1文字分の1emと半角英数字を入れてくださいね。

お問い合わせフォーム、送信画面

お問い合わせフォーム、送信画面

これで、レスポンシブWebデザインになってスマホビューにも優しく完全にモバイルフレンドリーなりましたね^^

LINKあなたのサイトは、優しいですか?★モバイルフレンドリー★って何?

画面テンプレートでhタグの変更をする(必要な人のみ)

テンプレートは入力・確認・完了画面の3種類あるので、入力画面のテンプレートから順番に見てみましょう^^

入力画面のテンプレート、hタグの編集

18行目がh3タグになってますけど、普段見出しをh2タグで設定してるなら、これを編集します。

18行目の開始タグ<h3>と、終了タグ</h3>を自分の大見出しに変更します。

テキストエディタ見るとみやすいですので、下記の場所を参考に編集してください。

入力画面のhタグの変更場所

入力画面のhタグの変更場所

確認画面テンプレート、hタグの編集箇所

17行目のh3タグをh2に変更

17行目のh3タグをh2に変更

完了画面テンプレート、hタグの編集箇所

16行目のh3タグをh2に変更

16行目のh3タグをh2に変更

CSSもh3タグからh2タグに変更

h2タグに変更したことで、hタグの装飾がなくなってしまうので、CSSのセレクタをh3からh2へ変えると、純正の装飾が現れます。中ほどにある、60行目の#contents h3を#contents h2に変更するだけでOK!

上▲が変更前、変更後は▼下。

CSSのhタグh3をh2に変更

CSSのhタグh3をh2に変更

ブログで使ってる見出しh2に変える方法

ブログ内で使ってる見出しに変更するには、親テーマの本文中のh2の装飾と子テーマのh2の装飾をコピーして#contents h2の装飾内に貼りつけて微調整すれば似た見出しができますね。

例えば下記のような感じはGush4のhタグですけど、このデザインも見かけますよね。

上のCSSで装飾した見出し。

上のCSSで装飾した見出し。

このCSSは下記のとおり。

ブラウザの影響で、h2タグが真ん中に寄ってるのが気になる場合、左揃えにするには

を追記してください。

こうすれば簡単に、見出しを自分のテーマのものに変更できますね!

自動返信メールの設定

自動返信メールの設定:管理画面

自動返信メールは、自動で返信するかしないか。そのままです。

設置用のHTMLタグについて

メールフォーム設置用のHTMLタグ

設置用のHTMLタグは、aタグのリンクです。

Xserverのお問い合わせページのパスは、下記のとおり。

  1. ブログのURL
  2. script
  3. mailform
  4. 自分で決めた名前

サイドバーや記事下などの自己紹介欄に貼るには、ピッタリですけど、メニューボタンのお問い合わせフォームにそのリンクをそのまま貼ると、ユーザーさんは2度手間になります。

  1. メニューのお問い合わせへ向かうクリック
  2. そこから、リンク先のお問い合わせフォーム入力欄へのクリック

※固定ページでは、ドメイン以下のパスの入力は出来ないので

http://ドメイン/script/mailform/自分で決めた名前/

カスタムメニューを使えば、メニューボタンに任意のURLを入れることが可能なので、カスタムメニューから記事上のメニューボタンに追加する方法が1番有効になります。

Xserverのお問い合わせフォームを、カスタムリンクでメニューに置く方法

カスタムメニューは、任意のページのリンクを貼ることが可能なので、WordPressの管理画面から、お問い合わせフォームを作成する方法をご紹介します。

WordPressのカスタムメニューでお問い合わせフォームを作成

カスタムメニューを作る工程は色々ありますが、WordPressの管理画面『外観』から、『メニュー』より、カスタムリンクを作ればメニューバーに追加することが可能になります。

  1. 管理画面『外観』より『メニュー』をクリック
  2. カスタムリンクをプルダウン
カスタムリンクの場所

カスタムリンクの場所

  1. URLをXserverのお問い合わせページのリンクをコピー
  • http://ドメイン/script/mailform/自分で決めた名前/
    • SSL設定済みならhttpsに^^
WordPressカスタムリンク作成工程。

WordPressカスタムリンク作成工程。

  1. カスタムリンクのURLにペースト。
  2. リンク文字列に『お問い合わせ』など入力
  3. 『メニューに追加』ボタンをクリック

以上で、メニュー構造に配置できるようになります^^

あとはテーマのメニュー設定などと合わせてやると、プラグインを使わずお問い合わせページを作ることができました。

さいごに

さいごは自分でお問い合わせフォームから、入力して確かめてみてくださいね。エックスサーバーの設定は、SLL化も無料で簡単に設定できるし、お問い合わせフォームも付いてるので、便利ですよね^^

一度Xserverで運営してみてはいかがでしょうか。独自ドメインを複数お持ちの方にお勧めのレンタルサーバー!

それでは、かうたっくでした♪

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー