サービスご利用中のお客さま

VPSならラピッドサイト。VPS(仮想専用サーバー)販売15年の実績!

06) フォームメールの設定

設置方法

FormMail 管理メニューからフォームメールの新規作成ボタンを押して次の画面に進んでください。

初期セットアップ画面で、フォームメール名称と受け取りメールアドレスを入力し、作成するボタンを押してください。

フォームメール名称ファイル名の一部として使用されるため半角英数にて表記します。(ここでは "test" と入力したものとします)
受け取りメールアドレスフォーム投稿時に送信されるメールアドレスになります。管理者のメールアドレスを指定するのが一般的です。

これで必要最低限のセットアップは完了です。特にフォームを編集する必要がなければ、この時点で下記URLより使用することができます。

フォーム(HTML,CSS)の編集

/FormMail/test/FormMail.html
/FormMail/test/default.css
(フォームメール名称を"test"とした場合)

HTMLファイルの編集
FormMail.htmlには、メールフォームをカスタマイズするための「初期設定」項目があります。「value="....."」の部分を変更する事によってカスタマイズを行います。

フォームに関する設定

<!-- フォームに関する設定 (フォーム名:別名:必須入力) -->
<input type="hidden" name="_label_" value="name:名前:required">
<input type="hidden" name="_label_" value="zip:郵便番号">
<input type="hidden" name="_label_" value="address:住所">
<input type="hidden" name="_label_" value="tel:電話番号">
<input type="hidden" name="_label_" value="email:メールアドレス:required">
<input type="hidden" name="_label_" value="homepage:ホームページ">
<input type="hidden" name="_label_" value="comment:メッセージ">

name="_label_" とし、 value の値を "name:名前" のように指定することで、
フォームメールの項目を追加することができます。項目の並び順についても、
ここで設定した順番通りフォームメールに反映されます。
また、"name:名前:required" のように :required を付加することで、
必須項目として指定することができます。
必須項目とした項目を入力することなく、ユーザが送信しようとしてもエラーとなります。
なお、email に関してはラベル名を変更せずにそのままご使用ください。(メールアドレスをチェックしています)

例1)「名前」の次の入力項目として「ふりがな」を必須項目として追加した場合
※<!-- 以下、追加項目 -->から<!-- 以上、追加項目終了 -->までの文章を追加します。

① 初期設定項目に「ふりがな」の項目を追加します。
<!-- フォームに関する設定 (フォーム名:別名:必須入力) -->
<input type="hidden" name="_label_" value="name:名前:required">
<input type="hidden" name="_label_" value="name2:ふりがな:required">
<input type="hidden" name="_label_" value="zip:郵便番号">
...

② フォームで表示される「ふりがな」の項目を追加します。
<table border="1" class="input">
<tr>
<th>名前 (必須)</th>
<td><input type="text" name="name" size="40"></td>
</tr>
<tr>
<th>ふりがな (必須)</th>
<td><input type="text" name="name2" size="40"></td>
</tr>
<tr>
<th>郵便番号</th>
<td><input type="text" name="zip" size="10"></td>
</tr>
...

例2)テキストの入力項目ではなく、ラジオボタン等を追加することも可能です。
上記の例に続けて、「ふりがな」の下に「性別」のラジオボタンを追加します。

① 初期設定項目に「性別」の項目を追加します。 <!-- フォームに関する設定 (フォーム名:別名:必須入力) -->
<input type="hidden" name="_label_" value="name:名前:required">

<!-- 以下、追加項目 -->
<input type="hidden" name="_label_" value="name2:ふりがな:required">
<!-- 以上、追加項目終了 -->

<input type="hidden" name="_label_" value="select_1:性別">
<input type="hidden" name="_label_" value="zip:郵便番号">
... ② フォームで表示される「性別」の項目を追加します。 <table border="1" class="input">
<tr>
<th>名前 (必須)</th>
<td><input type="text" name="name" size="40"></td>
</tr>
<tr>
<!-- 以下、追加項目 -->
<th>ふりがな (必須)</th>
<td><input type="text" name="name2" size="40"></td>
</tr>
<!-- 以上、追加項目終了 -->
<tr>
<th>性別</th>
<td><input type="radio" name="select_1" value="男性">男性
<input type="radio" name="select_1" value="女性">女性</td>
</tr>
<tr>
<th>郵便番号</th>
<td><input type="text" name="zip" size="10"></td>
</tr>
...

確認画面の設定

<input type="hidden" name="_conf_enable_" value="1">
確認画面を使用するかどうかの設定です。確認画面を使用する場合は value を "1"に。確認画面を使用せずに、完了画面を表示したい場合は value を "0" として指定してください。
<input type="hidden" name="_conf_title_" value="内容確認">
<input type="hidden" name="_conf_msg_head_" value="下記の内容で、送信します。">
<input type="hidden" name="_conf_msg_foot_" value="ご確認の上、「送信」ボタンを押してください。">
<input type="hidden" name="_conf_submit_" value="送信">

確認画面でのメッセージを指定します。

完了画面の設定

<input type="hidden" name="_comp_title_" value="送信完了">
<input type="hidden" name="_comp_msg_head_" value="下記の内容で、送信しました。">
<input type="hidden" name="_comp_msg_foot_" value="ありがとうございました。">
<input type="hidden" name="_comp_return_text_" value="ホームページへ戻る">

完了画面での各メッセージを指定します。

完了画面の設定

<input type="hidden" name="_comp_return_url_" value="/index.html">
戻り先のURLを指定します。

CSSファイルの編集
default.cssの変更はフォーム(HTML)だけでなく、確認画面・完了画面にも反映されます。

フォームに関する設定

/* ------ ページ全体 ------ */
body {
background-color: #ffffff; /* 背景色 */
}
ページ全体の背景色を指定します。文字色は16進数にて指定します。
/* ------ タイトル ------ */
.title {
color: #000000; /* 文字色 */
text-align: left; /* 配置 */
}
タイトルの文字色と配置を指定します。
/* ------ メッセージ ------ */
.msg_head {
color: #000000; /* 文字色 */
text-align: left; /* 配置 */
}
.msg_foot {
color: #000000; /* 文字色 */
text-align: center; /* 配置 */
}
メッセージヘッダ、及びメッセージフッタの文字色と配置を指定します。
/* ------ テーブル ------ */
table {
border-style: none;
width: 80%;
margin: 20px 10%;
}
table th {
background-color: #cccccc; /* 背景色 */
color: #000000; /* 文字色 */
text-align: left; /* 配置 */
border-style: none;
white-space: nowrap;
padding: 5px;
}
table td {
background-color: #eeeeee; /* 背景色 */
color: #000000; /* 文字色 */
text-align: left; /* 配置 */
border-style: none;
white-space: nowrap;
padding: 5px;
}
フォームメールの項目を表示するためのテーブルの指定です。
背景色、文字色、配置、ボーダーなどが指定できます。
/* ------ ボタン ------ */
.submit {
text-align: center; /* 配置 */
}
ボタン(送信ボタンなど)の配置を指定します。
left, right, center などが指定できます。

フォームメールに、共用SSLをかける場合

フォームメールのHTMLソースを、一部修正する必要があります。
作成したフォームメールのファイルを、テキストエディタで開き、 以下の部分を修正してください。  

CGIを呼び出す部分  

<form method="post" action="/freecgi/FormMail/index.cgi">

<form method="post" action="https://共用SSLサーバー名/www.お客さまドメイン名/freecgi/FormMail/index.cgi">


スタイルシートの指定  

<input type="hidden" name="_css_url_" value="/FormMail/[フォームメール名]/default.css">

<input type="hidden" name="_css_url_" value="https://共用SSLサーバー名/www.お客さまドメイン名/FormMail/[フォームメール名]/default.css">


戻り先URL

<input type="hidden" name="_comp_return_url_" value="/index.html">

<input type="hidden" name="_comp_return_url_" value="https://共用SSLサーバー名/www.お客さまドメイン名/index.html">


SSLの通信を終了してトップに戻る場合は以下となります。  

<input type="hidden" name="_comp_return_url_" value="http://www.お客さまドメイン名/">

ページの先頭へ戻る