オリジナルHTML作成時の注意点は？
Synergy!LEADのフォーム機能には、入力・確認・完了・非公開画面のデザインを自由に編集できる「デザインカスタマイズ」機能を搭載しています。このページでは、書き換えていい箇所、書き換えていけない箇所、構造上必ず設置しなければならないタグなど、オリジナルHTML作成時の注意点を説明します。
1. テンプレートと項目
以下4点、ご注意ください。
- 項目設定を完了してからテンプレートをダウンロードしてください。また、別のフォームで利用したオリジナルHTMLを、そのままコピーして他のフォームに適用することはできません。必ず該当フォームからダウンロードしたテンプレートを編集してください。
- 入力項目として設定されている項目とその選択肢はHTMLに必ず掲載してください。当社「Synergy!クラウド」では、デザインカスタマイズ後のHTMLに記載の項目とフォームで設定された入力項目との間に過不足がないかをチェックしています。たとえば、「フォーム上の項目が不要だったため、HTMLを編集した際に消去した」場合、反対に「フォームに足りなかった選択肢をHTML上で作り足した」場合、項目（選択肢）に不一致があると判定してエラーとなります。
- 項目の形式をHTML上で変更しないでください。たとえば、フォーム設定では「ラジオボタン型」になっている項目をHTML上で「プルダウンメニュー」に変更した場合もエラーとなります。
- アップロードするオリジナルHTMLの文字コードは「UTF-8」にしてください。
※2016年4月20日以前に作成したオリジナルHTMLファイルの文字コードは、「Shift-JIS」のままとしてください。（参照ページ）
2. 埋込タグ
ダウンロードしたHTMLファイルの中には、各画面に必要な入力項目のタグやエラーメッセージ用の「埋込タグ」などが記述されています。これらは削除しないでください。必要な「埋込タグ」がHTMLに記載されていない場合、HTMLアップロード時にエラーとなります。なお、各画面により、必要な埋め込みタグは異なります。
- 【必須タグ】重複エラーメッセージ <%%DUPERROR%%>
重複エラーメッセージは「フォームに入力された更新キーがすでにオブジェクト内に存在しており、登録エラーになった」場合にこれを通知するタグです。
※フォームの設定によってはこのエラーが出ない場合もありますが、HTMLソース中に必ず記載しておいてください。 - 【必須タグ】エラーメッセージ <%%ERROR**%%> ※**は数字
メールアドレスや氏名などフォームに掲載している個々の入力項目にエラーが発生した際、項目ごとのエラーメッセージを表示するのが「エラーメッセージ」タグです。重複エラーメッセージタグと同様、アップロードするHTMLソース中に必ず記載してください。 - 【任意タグ】エラー発生フラグ <%%IFERROR%%> <%%IFERROR**%%> ※**は数字
「フォームで入力エラーが起きた場合にのみ反映される」という特殊な効果を持ったタグです。使い方の一例としては、入力漏れエラーがあった場合などにスタイルシートと組み合わせて使うことで「エラーがあった項目欄のみ背景色を変え、どの項目がエラーの対象なのか目立たせる」「エラー発生時にのみページ上に注意書きを表示する」などがあります。 - 【任意タグ】reCAPTCHAエラーメッセージ <%%RECAPTCHAERROR%%>
reCAPTCHAによりbotと判定された際やreCAPTCHAが正しく設定されていない場合にエラーメッセージを表示させるタグです。
※「新規登録フォーム」「更新登録フォーム」のタグです。
ファイルアップロード機能で追加されるオリジナルタグ一覧
※ファイルアップロードはオプション機能（有償）です。
| 追加されるタグ | 設置画面 / 箇所 | 内容 |
| <%%PICLIBJS%%> | 入力画面、確認画面、完了画面 </head>タグの直前 |
JavaScriptのURL、各種エラーメッセージの定義を設定 |
| <%%PICLIBBODY%%> | 入力画面、確認画面、完了画面 <body>タグの属性に埋め込み |
ファイルアップロード機能で使用するdata属性を設定 |
| <%%PICLIBFORM%%> | 入力画面、確認画面 <form>タグの属性に埋め込み |
ファイルアップロード機能で使用するid属性を設定 |
| <%%PICLIBERROR%%> | 入力画面 エラーメッセージを表示させたい箇所 |
エラーメッセージを表示 |
| <%%PICLIBITEM*%%> | 入力画面、確認画面 <input>タグの属性に埋め込み ※「*」は1～5の数字 |
ファイルアップロード用のdataplsubject属性を設定 |
3. HTMLサンプル
以下はHTMLサンプルです。
- 黒字の部分：自由に編集できます。
- 赤字の部分：フォームの挙動上、HTML上に必ず設置しなければならないタグです。
- 青字の部分：上記の必要設置タグ（赤字部分）の中で、編集が可能な部分です。
- <form method="post" ～ >：どのフォームにデータを送信するかを指定します。
- 各入力項目：フォームに設定された項目です。 <input /> など、項目の種別によってタグが異なります。
フォームからダウンロードした直後のHTMLサンプル：
<html>
<head>
<title>オリジナルHTMLサンプル</title>
</head>
<body>
以下のフォームに必要な項目を入力のうえ、送信をクリックしてください。<br><br>
<%%DUPERROR%%>
<form method="post" action="/webapp/form/10000_xxx_1/setParameters.do" >
<p>
メールアドレス<br/>
<input type="text" name="singleAnswer(ANSWER1236)" size="50" />
<%%ERROR1236%%>
</p>
<p>
氏名<br/>
姓：<input type="text" name="singleAnswer(ANSWER1237-1)" size="10" />
名：<input type="text" name="singleAnswer(ANSWER1237-2)" size="10" />
<%%ERROR1237%%>
</p>
<p>
単一選択型（プルダウンメニュー）<br/>
<select name="singleAnswer(ANSWER1238)">
<option value="0">---お選びください---</option>
<option value="1">選択肢１</option>
<option value="2">選択肢２</option>
<option value="3">選択肢３</option>
<option value="4">選択肢４</option>
<option value="5">選択肢５</option>
</select>
<%%ERROR1238%%>
</p>
<p>
複数選択型<br/>
< table border="0"><tr><td>
<input type="checkbox" name="multiAnswer(ANSWER1239)" value="1"/>選択肢１
</td></tr><tr><td>
<input type="checkbox" name="multiAnswer(ANSWER1239)" value="2"/>選択肢２
</td></tr><tr><td>
<input type="checkbox" name="multiAnswer(ANSWER1239)" value="3"/>選択肢３
</td></tr><tr><td>
<input type="checkbox" name="multiAnswer(ANSWER1239)" value="4"/>選択肢４
</td></tr><tr><td>
<input type="checkbox" name="multiAnswer(ANSWER1239)" value="5"/>選択肢５
<input type="text" name="singleAnswer(ANSWER1239-5)" size="40" />
</td></tr></table>
<%%ERROR1239%%>
< /p>
<input type="submit" value=" 送 信 " >
<input type="reset" value=" リセット " >
</form>
</body>
</html>
4. 項目変更後のHTMLアップロード
フォームの項目を変更した後に「入力画面」のオリジナルHTMLファイルをアップロードせずにフォームを「公開」しようとするとエラーになります。
現在アップロード中のオリジナルHTMLを再度アップロードしてからフォームを「公開」してください。
選択肢項目の並び順の変更/削除を行った場合は、選択肢番号などが変わります。必ず、変更後のテンプレートHTMLをダウロードし、当該選択肢を現在アップロード中のオリジナルHTMLに反映してから再アップロードしてください。
（参考：選択リスト値を変更した場合のフォームへの影響）
※「確認画面」にオリジナルHTMLを適用している場合はそちらの変更、アップロードが必要です。
