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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• メールフォームの一覧の管理ツールからログインでも可能。

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

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

基本設定は下記。

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

     Chormeのタブにはお問合せ

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

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

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

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

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

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

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

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

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

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

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

• タイトル・メッセージ・項目の文字や、背景色など配色を変更したい場合

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

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

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

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

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

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

/***********************
 追記レスポンシブ対応に
************************/
#wrapper {
	max-width:  100%;
	box-sizing: border-box;
}
.section__body {
	padding: 0;
}
input[type=text], input[type=password], textarea {
	width: 98%;
	max-width: 100%;
	height: auto;
	border: none;
	box-sizing: border-box;
}
/*table左領域の幅指定：任意の数値を*/
.table th {
	width: 25%;
}
.table td {
	padding: 3px;
	vertical-align: middle;
}

/*入力部分の幅を広げ、縦のみ可動させる*/
.table td input,
.table td textarea {
	resize: vertical; /*テキストエリア縦のみ変更*/
}
p, .table {
	margin-bottom: 1.5em;
}
input[type="submit"] {
	padding: 0.5em 1.5em;
	margin-bottom: 1em;
}

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

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

スマホ対応！HTMLにコードを追加

2018年6月、エックスサーバーお問い合わせフォームのアップデートが行われ、スマホ対応が全く行われなくなったので、3か所HTMLタグの追加が必要になりました。

<meta name="viewport" content="width=device-width, initial-scale=1">

上記コードを入力画面テンプレート・確認画面テンプレート・完了画面テンプレートに挿入してください。

挿入場所はmetaタグの下です。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

こんな感じになるよう追記すれば、スマホビューにも対応できるようになります。

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

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

/************
　見栄え変更
*************/
/*フォントサイズ*/
body {
    font-size : 100% ;
}
/*段落を見やすく高さを出す*/
p {
    line-height: 1.7;
}
/*ボタンBOX*/
.button_box {
    margin-top: 1em;
}
.button_box input {
    padding: 0.5em 1em;
    border-radius: 3px;
    margin-left: 0.5em; /*ボタンとボタンの隙間*/
    background: #f7b1c7; /*ボタンの色*/
}

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

background: #f7b1c7; /*ボタンの色*/

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

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

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

margin-left: 0.5em; /*ボタンとボタンの隙間*/

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

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

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

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

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

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

<h3>{$basic_formname}</h3>
                <div class="inner">
                    <div id="txt_explain">
                        <p>以下のフォームに必要事項をご記入の上、「確認」をクリックしてください。*の付いている項目は必須項目です。</p>
                    </div>

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

<h2>{$basic_formname}</h2>

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

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

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

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

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

/* コンテンツ内の[h3]タグ */
#contents h3

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

/* コンテンツ内の[h3]タグ */
#contents h2

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

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

/* コンテンツ内の[h3]タグ */
#contents h2 {
    /* ココにスタイルを貼りつける */
}

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

このCSSは下記のとおり。

#contents h2 {
	font-size: 22px;
	margin: 48px -5px 24px;
	padding: 0.4em 0.4em 0.4em 1.4em;
	position: relative;
	border-bottom: 2px solid #d917e6;
	clear: both;
}
#contents h2:before {
	content: "";
	position: absolute;
	background: #ff81cc;
	top: 0;
	left: 0.4em;
	height: 12px;
	width: 12px;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
}
#contents h2:after {
	content: "";
	position: absolute;
	background: #fd00ff;
	top: 1em;
	left: 0;
	height: 8px;
	width: 8px;
	transform: rotate(15deg);
	-moz-transform: rotate(15deg);
	-webkit-transform: rotate(15deg);
	-o-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
}

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

text-align: left; /*テキスト左揃え*/

を追記してください。

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

自動返信メールの設定

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

設置用のHTMLタグについて

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

<a href="http://ドメイン/script/mailform/自分で決めた名前/">お問い合わせフォーム</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に＾＾

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

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

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

さいごに

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

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

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