エックスサーバーのCGIツールは2012年4月19日(木)にサービスを開始していて、エックスサーバーの全プランを対象にしているため、エックスサーバーを使用している方なら誰でもCGIツールの使用が可能です。
エックスサーバーの使用を開始して2年が過ぎた私ですが、今さらエックスサーバーのCGIツールでメールフォームの作成ができることを知りました。
CGIについての知識に少し触れてから、エックスサーバーのCGIツールでメールフォームを作成してみることにします。
エックスサーバーのCGIツールでできること
エックスサーバーのCGIツールでできることは2つです。
- アクセスカウンターの設置
- メールフォームの設置
今回はエックスサーバーのCGIツールでどんな作成手順でメールフォーム作成ができるのか知りたいのです。
エックスサーバーでメールフォーム作成ができるCGIツールは「CGI」という仕組みを使用しているツールです。
CGI（Common Gateway Interface）
WebサーバーはリクエストされたURLからサーバーに保存しているファイルをかき集めてページの情報をWebブラウザに返します。倉庫(Webサーバー)にあらかじめ保存されている静的なファイル(HTMLファイルとか)をWebブラウザに返すといった感じです。
メールフォームの場合、入力内容やメールで送信する名前やメールアドレス、お問い合わせ内容といった情報は、メールフォーム入力者ごとに異なるため、結果を返すためのファイルが動的になります。急に用意しろ言われても倉庫に在庫がない。
そんなときにサーバー側にあるCGIが救世主となりCGIプログラムを起動することでデータ処理をし、メールフォームのその都度異なる実行結果を出来たてホヤホヤでWebサーバーが返せます。
このようなCGIの処理に対応しているエックスサーバーが、メールフォームの作成を簡単にできるようにツールにして提供してくれたのがエックスサーバーのCGIツールです。
そんなエックスサーバーのCGIツールは、エックスサーバーのサーバーパネルにログインしてホームページメニューにある「CGIツール」をクリックして開きます。
CGIツールでメールフォームをインストール
エックスサーバーのCGIツール画面を表示するとカウンターの下に「メールフォーム」の項目があります。
CGIツールのメールフォームをインストールすときには、メールフォーム側の「一覧・インストール」をクリックします。
次に「ドメイン選択画面」になるので、エックスサーバーのCGIツールからメールフォームを設置したいドメインをクリックします。
そうすると「メールフォーム一覧」が表示しますが「メールフォームインストール」のタブに切り替えます。
「メールフォームインストール」の画面でインストールに必要な項目を入力します。
メールフォームURL
インストール後にブラウザでメールフォームを表示するときに使用するURLの文字列を入力します。
またエックスサーバーのCGIツールからメールフォームをインストールして自動で作成されるファイルは、ここで入力した文字列がフォルダ名になり格納されます。
管理ツールログインID
エックスサーバーのメールフォーム設定画面にログインするためのログインIDを入力します。
管理ツールパスワード
エックスサーバーのメールフォーム設定画面にログインするパスワードを入力します。
受信メールアドレス
メールフォームからのお問い合わせを受信するメールアドレスを入力します。
入力後に「確認画面へ進む」をクリックして入力ミスがないか確認。
入力した設定内容で問題なければ「インストールする」をクリック。3〜5秒くらいでエックスサーバーのメールフォームがCGIツールの画面でインストール完了します。
インストール後にメールフォームのファイル構成を確認したい場合もあるかもしれません。
エックスサーバーのファイルマネージャからpublic_htmlフォルダの階層を下げていくとmailformフォルダ内に、メールフォームURLで設定した入力名のフォルダが作成されています。
CGIツールでインストールしたメールフォームのファイルが格納されていますので確認が必要になったときのためにフォルダ場所を把握しておくと良いかと思います。
エックスサーバーのメールフォームを設定
エックスサーバーのCGIツールでメールフォームのインストールが終わると、画面には「設定画面URL」の表示が登場します。
設定画面URLの右横のURLをクリックすると「メールフォーム設定ページ」に進めます。
「送信しようとしている情報は保護されません」と表示されるかもしれません。そんなときには「このまま送信」のボタンをクリックするとエックスサーバーのメールフォーム設定ページが開きます。
エックスサーバーのメールフォームを設定するときには「基本項目の設定」のタブで「基本設定」と「メールフォーム項目の設定」の2つの設定ができます。
基本設定
- ページのタイトル
- メールフォームの名前
- サイトの戻りURL
- 受信するメールアドレス
- 受信するメールの件名
- メールの連続送信を制限する時間
エックスサーバーのメールフォーム「基本設定」は各項目の説明の通りなので簡単に設定ができてしまいます。
それでも設定で分からないとこがある場合は、メールフォーム設定画面の1番下までスクロールして「プレビュー」を開くと視覚的に「この設定はここに表示できる部分だな」と分かるのでメールフォーム設定が理解しやすくなります。
メールフォーム項目の設定
エックスサーバーの「メールフォーム項目の設定」を使うときには、メールフォームに使用したい項目を「基本可能な項目」の「基本項目」と「予備項目」から選び、「使用中の項目」の方に追加してメールフォームを設定します。
基本項目には「年齢」「性別」「住所」など追加できる種類が多いため、エックスサーバーのメールフォームを使用するWebサイトに合わせやすく便利な設定だと思いました。
エックスサーバーのメールフォームを設定できたら「設定を保存する」のボタンで確認画面へと進み設定を確定させます。
エックスサーバーのメールフォームをデザイン
エックスサーバーのCGIツールでメールフォームを作成するときには、メールフォームのデザインもできます。
CGIツールからメールフォーム設定画面に進むと「デザインの設定」があって2つの「スキン」からどちらかを選択することで、エックスサーバーのメールフォームをデザインすることができます。
スキンの選択肢は以下です。
- 定型スキン
- 自作スキン
定型スキンを使う場合はエックスサーバーのCGIツールでインストールしてからデフォルトで表示されるメールフォームのデザインを土台に「サイズ」「色」「説明文」を変更することができるデザイン設定です。
自作スキンの使用をする場合はエックスサーバーのCGIツールでインストールしたメールフォームのHTMLとCSSを編集してデザインができます。
まずは定型スキンでエックスサーバーのメールフォームをデザインして見ることに。
エックスサーバーの定型スキンでメールフォームを作成するやり方は簡単です。メールフォームの各項目の色を変更するという直感的な操作でデザインをしていくことができます。
メールフォームのデザインで色が変更できる部分は次の7項目
- タイトル
- 説明文
- 背景色
- 枠線
- 項目背景
- 項目文字
- エラー表示
デザインすることができる7項目が実際にメールフォームのどの部分に該当するのかイメージできないときは「プレビュー」で確認しながら作成できるので助かります。
些細なことですが発見したこともあります。エックスサーバーのメールフォームを定型スキンでデザインする場合、カラーコードは6文字のカラーコードで入力しないとダメです。
例えば#ffffffの白のカラーコードを#fffにするとエラーになります。カラーコードは色見本があるので配色に悩む手助けになるかと思います。
メッセージ設定もできます。エックスサーバーのメールフォームの「入力画面」「確認画面」「完了画面」に表示されるメッセージを変更できます。お問い合わせしてくれる方がメールフォームで入力するときの手助けになるようなメッセージをメールフォーム設置予定のWebサイトに合わせて変更できます。
実際にCGIツールでエックスサーバーのメールフォームを定型スキンで作成してみると、上の画像のようにメールフォームを作成することができました。
カラーが変わっただけですね。
メールフォームの各項目に(必須)というメッセージがありますが、デフォルトでは(✳︎)アスタリスクです。変更するにはエックスサーバー のメールフォームのファイル「CFormItems.php」ファイルを直接編集すると変更可能です。
次は「自作スキン」でメールフォームをデザインです。
CGIツールからエックスサーバーのメールフォームを自作スキンを使用してデザインする場合は、スキンの変更で「自作スキンを利用する」に画面を切り替えます。
自作スキンの画面ではエックスサーバーのメールフォームに使われている「入力画面」「確認画面」「完了画面」のテンプレートが表示されてHTMLとCSSを編集してメールフォームデザインができます。
<link type="text/css" rel="stylesheet" href="./css/form.css" />
実際にCSSでメールフォームのデザインをする場合には上記のlinkタグを各テンプレートのheadにコピペしてスタイルを読み込ませます。form.cssというcssファイルを読み込んでいます。
あとはメールフォームのテンプレートのHTMLで必要な要素にクラス付けをしてCSSを適用させていくことで、定型スキンだけでは実現できないデザインでカスタマイズできます。
上の画像は私が実際にエックスサーバーのメールフォームを自作スキンで作成してみたメールフォームのデザインです。
あらためて画像で見ると見出しの影いらない気がしてきました。
エックスサーバーの自作スキンを使用したときに書いたHTMLとCSSは念のためコピペしてファイル保存しておくと良いです。定型スキンに戻すと消えるかもしれません。
メールフォームをレスポンシブにする
エックスサーバーのCGIツールでメールフォームを作成するときに、メールフォームをレスポンシブにできるかどうかも作成してみることにしました。
レスポンシブにできました。しかし細かい調整はしていません。
エックスサーバーのメールフォームをレスポンシブにするやり方は、「入力画面」「確認画面」「完了画面」の3つのHTMLのheadにビューポートを記述します。以下の記述ですね。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
次にCSSにメディアクエリを記述します。
@media screen and (max-width:780px){
.table th,
.table td{
display:block;
}
}
メディアクエリでスタイルが切り替わるブレイクポイントの幅のサイズを指定します。今回は画面の切り替わりを確認するためだけに指定しただけなのでmax-width:780pxにしてます。
そしてエックスサーバーのメールフォームはtableでマークアップしているため、CSSのメディアクエリ内に.table thと.table tdのセレクタを作成し、display:blockを適用すると780pxより狭い画面幅のときは縦並びのレイアウトに切り替わります。
エックスサーバーのメールフォームを縦並びでレスポンシブにしたとき、もしかするとフォームの幅が画面からはみ出すかもしれません。
#mainをセレクタにしてwidth:100%:にするとエックスサーバーのメールフォームは伸縮してくれました。
説明が不十分かと思うので、エックスサーバーのCGIツールでメールフォームを作成してレスポンシブにもしてみた全てのHTMLとCSSはzipファイルでダウンロードできるようにしてみました。
ダウンロードするフォルダ内のファイル構成は以下のようにしてあります。
- x_form.cssがCSSファイル
- input.htmlが入力画面テンプレートのHTML
- check.htmlが確認画面テンプレートのHTML
- done.htmlが完了画面テンプレートのHTML
です。
エックスサーバーのメールフォームをレスポンシブにしたCSSはx_form.cssファイルの一番下に記述してあります。
CSSは試し書き程度の書き方ですが、エックスサーバーのメールフォームをレスポンシブにしたい方の参考になればと思います。
