WordPressテーマ変更!SimplicityからCocoonへ

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

スポンサーリンク

お問い合わせフォームを簡単に実装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の/*コメントアウト*/内には簡単な説明を入れてるので、お好みの数値に変更しても良いですね^^

/***********************
 追記レスポンシブ対応に
************************/
#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編集画面の一番下に追記すれば、より簡単です。

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

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

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

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

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

スマホ対応!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の変更を追加しておきました。

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

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行のみ削除または、色を指定してください。

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

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

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

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

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

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

デフォルトの入力画面

デフォルトの入力画面

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

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

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

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

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

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

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

上記のようにボタンも離れて、押しやすいですね。幅の指定は、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タグの変更場所

確認画面テンプレート、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!

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

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

/* コンテンツ内の[h3]タグ */
#contents h2
CSSのhタグh3をh2に変更

CSSのhタグh3をh2に変更

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

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

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

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

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

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

この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タグ

設置用の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に^^
WordPressカスタムリンク作成工程。

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

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

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

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

さいごに

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

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

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

Comments

  1. 櫻井 より:

    こんにちは。
    スマホ様にレスポンシブにしたいので拝見しています。

    記載のようにCSSに張り付けてもレスポンシブになりません。
    何度もやり直しているのですが。
    それと、この件とは関係ないと思うのですが、パソコン上ではメールフォームが表示されるのですが、スマホの画面は真っ白なんです。

    事業用なので早く直したいのです、どうぞ宜しくお願いします。

  2. 櫻井さんに。こんにちは^^

    それと、この件とは関係ないと思うのですが、パソコン上ではメールフォームが表示されるのですが、スマホの画面は真っ白なんです。

    確かにCSSの事をかいてるだけなので関係はないです。。ただ、何かしらのエラーが出ている可能性を考えるとエラーコードを表示させて原因をしぼる手もあります。見出し:『phpのエラーコード、2種類の表示、非表示設定方法』。例えば

    • プラグインとエックスサーバーの問い合わせフォームの競合
      • この場合はプラグインを停止
      • この機能を停止するのが簡単。

    もしエラーコードが表示されない場合

    • エラーログを確認して原因を特定できる可能性があり
      • エラーが出ている(スマホビュー:お問い合わせの真っ白)ページにアクセスした時間を記録
      • そこにアクセスしたときのログを確認。

    確認しても不明な時

    • サーバーにそのエラーログを提示すれば解決方法か代替策を教えてくれるはずです。

    もしWordPressをお使いの場合

    • Contact Form 7を使うのも手
      • メールアドレスの設定をドメインのアドレスにすれば不具合が少ない
      • ※私の環境ではそうでしたが、いろんな環境があるので何とも言えません。

    あとは

    • エックスサーバーに現状どのような対処をした旨を伝え対処方法を考えて頂く。

    これをすればエックスサーバー側も対応してくれやすい気がします。※エックスサーバー側の事は不明なのと、櫻井さんの設定状況も把握できるのがサーバーサイドなので。

    早く解決されますように…!

  3. なお より:

    はじめまして。こんにちは。
    私もエックスサーバのお問合せフォームをレスポンシブにしたくて
    この記事を参考にコピペしてCSSに追加しましたが
    レスポンシブになりませんでした(>_<)

    エックスサーバの方で「css」を適用する場合は「」を指定してください。

    とあったのでこれも入れてみたんですが変わらずでした・・・

  4. なお より:

    大文字にしなかったので表記されませんでした。

    「css」を適用する場合は「<link type=”text/css” rel=”stylesheet” href=”./css/form.css” />」を指定してください。

    です。

  5. なおさんに
    こんにちは。どうやらエックスサーバーの仕様変更があったようですね!

    HTMLが変わっていたので、それに合わせてCSSを書き換え再度レスポンシブ対応させました。ご確認お願いします。

  6. なお より:

    かうたっくさん、ありがとうございました!
    お手数おかけしてすみません。

    新しいCSSを追加したところ
    PC上では横幅がレスポンシブになってるようなんですが
    テキストエリアが狭くなってしまってるのと
    iPhoneで見るとレスポンシブにはなっていないようです(>_<)

  7. なおさん❦
    ご連絡いただきまして、ありがとうございます^^

    エックスサーバーのお問い合わせですが、驚くほどスマホ未対応アップデートっぷりにビックリです(笑

    ざっとスマホビューでも対応させてみました。
    https://bibabosi-rizumu.com/xserver-contact-form/#toc5

    CSSとHTMLをコピペする必要があります。反映されないときは、キャッシュが効いているのでクリアにしてご確認くださいね。

  8. なお より:

    かうたっくさん
    ありがとうございます!
    できました(^^)

    エックスサーバにフォームのスマホカスタマイズの件で問い合わせた時
    とても冷たく「ご自分でどうぞ」的な回答でした。

    なおかつ私も櫻井さんと同じ症状になったので
    (お問合せフォームがPCは404エラー、スマホは真っ白
    エックスサーバの管理画面からフォーム一覧が消えていました。
    現在は解消しています。)
    その件も問い合わせましたが、そんな現象はありえないので
    今後その症状になった場合はそれが起きた時間を
    何時何分になったのか細かく知らせろって言われて
    めげていたので、かうたっくさんが神様のようです!

    本当にありがとうございました。

  9. なおさんに
    こんにちは。無事設置できたようで良かったです^^

    (お問合せフォームがPCは404エラー、スマホは真っ白
    エックスサーバの管理画面からフォーム一覧が消えていました。
    現在は解消しています。)

    ちょっと気になったので解決への近道になる方法を、以下リンク先以外の事も追記しておきます。

    https://bibabosi-rizumu.com/xserver-contact-form/#div-comment-595

    • その他、テーマとの競合を確認するため、一時的にデフォルトテーマで試す
    • 自身で行ったカスタマイズを一時的に無効にする

    テーマでもプラグインでも自身のカスタマイズでもない。サーバー上で何らかの問題がないか、確認をお願いする。みたいな感じです。

    私もエラーが出なかったのでエラーの詳細は不明ですが、情報ありがとうございました!

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る