マニュアル

  1. ホーム
  2. マニュアル
  3. メールフォーム

メールフォーム

本マニュアルは新・旧サーバーパネルに合わせて2種類ご用意しています。

目次

サーバーパネルの「CGIツール」メニューから、お問い合わせの受付などにご利用可能なメールフォームをワンクリックで設置することができます。

設置後、専用の設定画面でメールフォームの各種設定を変更することが可能です。

エックスサーバー・メールフォーム

サーバーパネル上でCGIツールを選択

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

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

メールフォームURL インストール先のフォルダ名を任意で入力します。
管理ツールログインID（ユーザーID） メールフォームの設定画面にログインするユーザー名です。
管理ツールパスワード メールフォームの設定画面にログインする際のパスワードです。
受信メールアドレス お問い合わせの内容を受信するメールアドレスです。

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

以上でメールフォームの設置が完了です。

メールフォーム設置完了

設置完了画面に表示されている「メールフォームURL」のアドレスにアクセスすると、現在のメールフォームを確認することが出来ます。
メールフォームの設定を編集する場合、「設定画面URL」のアドレスへアクセスしてください。

独自SSLの利用

無料独自SSLを設定いただくか、もしくはオプション独自SSLのご契約を行っていただくことで、独自SSLを利用した「設定画面」へのログインが可能です。
設定・お申し込みの方法はそれぞれ下記のページをご覧ください。

独自SSLが利用可能になりましたら、下記にアクセスすることで、「設定画面」にログインすることが出来ます。

https://ドメイン名/script/mailform/フォルダ名/admin/

メールフォーム設置完了画面に記載のある「設定画面URL」のアドレスにアクセスしてください。

設定画面が表示されましたら、まずはフォームの「基本設定」を行います。

メールフォームの基本設定画面

ページのタイトル メールフォームページに表示されるタイトルです。
メールフォームの名前 メールフォーム上に表示される見出しです。
サイトへの戻りURL 「サイトへ戻る」リンクをクリックした際の、遷移先URLです。
受信するメールアドレス メールフォームからのお問い合わせ内容を受信するメールアドレスです。
受信するメールの件名 お問い合わせ内容を載せたメールの件名です。
メールの連続送信を制限する時間 メールの連続送信を行えないようにする時間を指定します。

それぞれ入力できたら、次に「メールフォーム項目の設定」へと進みます。

続いて、ページを下へと進めると、「メールフォーム項目の設定」を行うことが出来ます。
ここでは、フォームに使用する項目と、それらの細かな設定が可能です。

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

使用する項目は、ページ右側の一覧より「追加」をクリックして追加してください。
また、使用しない項目は、ページ左側の一覧より「除外」をクリックしてください。

使用する項目には、それぞれ下記のような項目が設定可能です。

並べ替え
フォーム項目の表示する順序を変更します。
変更を行う項目の「▲」もしくは「▼」で、表示順を並べ替えることが可能です。
表示名
実際にフォームとして表示される際の、項目名を設定することが可能です。
入力必須
チェックすることで、入力必須の項目とすることが可能です。
オプション
項目によっては、オプションの設定が可能なものがあります。
上記以外の補助的な設定項目は、こちらから設定が可能です。

フォームに使用する項目の設定が完了したら、ページ下部の「設定を保存する」をクリックしてください。

それぞれ設定した情報が表示されますので、ご確認の上、問題が無ければ「確定」をクリックしてください。

プレビュー表示

以上、メールフォームの設定が完了です。
メールフォームが設置されているアドレスにアクセスして、設定が反映されていることを確認してください。

※設定を変更したい場合は、何度でもこの設定画面から変更を行うことができます。

初期設定のままでもお使いいただくことは可能ですが、サイトや用途に合わせて、お好みのデザインを設定することが出来ます。
設定を行う際は、メールフォームの設定画面の上部メニューより「デザインの設定」をクリックしてください。

設定画面では、まずメールフォームの「スキン」を選択します。
「定型スキン」と「自作スキン」の2種より選択が可能です。

フォームデザイン用スキンの選択

選択したスキンに応じて、デザイン設定を施します。

定型スキンの場合

エックスサーバーでの初期設定のデザインを用いて、パーツ毎のカラーやメッセージなど、簡易的なデザイン設定を施すことが出来ます。
簡単に導入を行いたい方などにおすすめです。

まずは、「サイズの設定」を行います。

フォームサイズの設定

サイズの設定
メールフォームの横幅を、ピクセル(px)単位で設定します。

続いて、各パーツのカラーを設定します。
「色見本」から選択すれば簡単に設定も出来ますが、「RGBカラーコード(16進数)」を入力することでも指定が可能です。

フォーム各所のカラー設定

設定可能な項目は下記の通りです。

タイトル フォームのタイトル(見出し)部分のカラーを設定します。
「お問合せフォーム」と記載されている部分の文字および付随する線のカラーです。
説明文 タイトルの下に記載される、説明文の文字色を設定します。
背景色 画面全体の背景色を設定します。
枠線 フォーム入力部の表に使用する枠線の色を設定します。
項目背景 フォーム入力部の項目見出し部分に使用する背景色を設定します。
項目文字 フォーム入力部の項目を表示する文字色を設定します。
エラー表示 エラーが表示された際の文字色を設定します。

また、メールフォームの各画面において、表示される文章の設定を行うことが出来ます。

表示される文章の設定

設定できるのは、下記の3画面で表示される文章です。

入力画面 メールフォームの入力画面において表示される文章を設定します。
確認画面 入力内容の確認を行う画面で表示される文章を設定します。
完了画面 メールフォームからの送信が完了した際に表示される文章を設定します。

設定作業が終わったら、ページ下部にある「設定を保存する」をクリックしてください。
内容を確認した後、確定ボタンをクリックすることでデザインが反映されます。

自作スキン

HTMLテンプレートやスタイルシートを直接編集し、自由自在にデザインを変更することが出来ます。
こだわったデザインにしたい方などにおすすめです。

自作スキン設定画面

編集が行える箇所は下記の通りです。

  • 入力画面テンプレート(HTML)
  • 確認画面テンプレート(HTML)
  • 完了画面テンプレート(HTML)
  • スタイルシート(CSS)

編集画面の右側にあるボタンでは下記のような操作が行えます。

  • 保存する … 現在の状態を保存します。
  • リセット … 前回保存した時点での状態まで戻します。
  • プレビュー … 現在の状態でのフォームを確認することが出来ます。

それぞれ保存を行った時点で、実際のフォームに編集が反映されます。

お問い合わせに対してメールの自動返信を設定することが出来ます。
設定を行う際は、メールフォームの設定画面の上部メニューより「自動返信メールの設定」をクリックしてください。

※メールの自動返信を使用するには、フォームに「ご連絡先メールアドレス」の項目を設定する必要があります。「ご連絡先メールアドレス」が未設定の場合は、自動返信メールは送信されません。

設定画面では、まずメールの自動返信を行うかを選択します。

自動返信メールの設定

使用する場合は、下の項目を入力します。

メールの件名 自動返信を行うメールの件名です。
メールの本文 自動返信を行うメールの本文です。
差出人のアドレス 自動返信を行うメールの差出人(from)のメールアドレスです。

フォームに使用する項目の設定が完了したら、ページ下部の「設定を保存する」をクリックしてください。

それぞれ設定した情報が表示されますので、ご確認の上、問題が無ければ「確定」をクリックしてください。

以上、メールの自動返信設定が完了です。

メールフォームの上部メニューより「設置用のHTMLタグ」をクリックしてください。
HTMLページ内に設置するための、下記のようなコードが表示されますので、ご確認ください。

設置用HTMLコード

テキストエリア内にあるコードをコピーし、お客様のサイト上で表示したい箇所に貼り付けてください。
表示されたリンクをクリックすることで、設置したメールフォームへとアクセスすることが出来ます。

無料独自SSLを設定いただくか、もしくはオプション独自SSLのご契約を行っていただくことで、独自SSLを使用した「メールフォーム」の利用が可能です。
設定・お申し込みの方法はそれぞれ下記のページをご覧ください。

独自SSLが利用可能になりましたら、下記のようなURLへのリンクをお客様のサイト上に追加してください。

https://ドメイン名/script/mailform/フォルダ名/

古いバージョンをお使いの方は、新しいバージョンがリリースされた際にメールフォームをアップグレードすることができます。

サーバーパネル上でCGIツールを選択

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

「アップデート」をクリック

「アップグレードする」をクリック

以上でアップグレードが完了です。

目次

このマニュアルは役に立ちましたか？