フォームのデザイン（デザインフォーム）

  • 更新

フォームのデザインを設定する（デザインフォーム）

フォームの新規作成で、フォームのタイプとして［デザイン］を選択した場合の操作を説明します。 フォームのタイプにより画面構成（どのような画面があるか）が異なりますが、デザインを設定する操作は共通です。 フォームの自動生成タイプからデザインタイプへの変換方法については、「自動生成からデザインフォームの変換方法/デザインフォームの編集方法」を参照してください。

このページの概要

差込記号によるソースコード編集方法 デザインフォーム内に使用する差込記号を一覧でご紹介します。
確認画面の設定 入力画面の内容を表示する確認画面の設定ができます
完了画面の設定 フォーム入力完了時の完了画面の設定ができます。
完了画面の遷移先指定 完了画面の遷移先を任意に指定できます。ステップフォーム作成時には設定が必要です。
選択数を取得するURLを利用しセミナーの残席数を表示する 選択肢ごとの登録可能回数や、残席数、現在の登録人数を表示させることができます。

注意

  • デザインフォームでは、［認証画面］［入力画面］［確認画面］［完了画面］［完了済み画面］の各画面をすべて設定する必要があります。
  • フォームグループ作成時に、「設定のキャリア間同期」を有効チェックしていると、PC以外は「（PCと同じ設定を利用）」と表示されます。

操作手順

1　［フォーム］＞［フォーム設定］を選択します。
［データベース一覧］画面が表示されます。

2　対象となるデータベース名称の［フォーム一覧］をクリックします。
［フォーム一覧］画面が表示されます。

3　対象となるフォームの［デザイン］をクリックします。
［フォームデザイン］画面が表示されます。

［フォームデザイン］画面　（［登録］フォームの入力画面）

［フォームデザイン］画面　（［登録］フォームの入力画面）.jpg

4　［ソース］を入力します。すべての画面にソースの入力が必要です。

  • 各画面の赤えんぴつアイコンをクリックして、下のソース欄にソースを設定します。［サンプルソースをコピー］をクリックすると、設定されたシステムメッセージとフォーム項目（差込記号）を含む基本のHTMLソースが表示されます。それをベースにデザインすることができます。
  • ［選択肢の差込記号を個別にする］にチェックを入れると、選択肢の項目IDと表示名がソースに表示されます。
  • ［差込記号］をクリックし、その他のフォーム要素、画像、絵文字を挿入することができます。詳細については、次ページを参照してください。
  • ［ソースチェック］をクリックし、半角かな文字、機種依存文字、制御文字、HTML検証エラーについて、チェックすることができます。
  • [サンプルソースを一括登録する]を選択すると、すべてのデザインへ一括で登録する事が出来ます。
  • UTF-8の文字コードでの表現に対応しているフォームの対応キャリアは【PCその他／Android、iPhone】のみとなり、【docomo(iモード)／au(EZweb)／SoftBank（Yahoo!ケータイ）／WILLCOM】などの携帯キャリア向けのソースに対しては、機種依存文字の入力は出来ません。

［サンプルソースを一括登録する］の項目設定画面（例）
［サンプルソースを一括登録する］の項目設定画面（例）.jpg

一括挿入するデザインにチェックを入れて[実行]を選択します。

  • [リッチエディタ]リッチエディタを使うことでデザインフォームを簡単に作成することができます。また、詳細まで設定したい場合は、HTMLソースを編集する事ができます。

［リッチエディタツール］の詳細画面（例）
［リッチエディタツール］の詳細画面（例）.jpg

［元に戻す］ 変更（装飾）した内容を1つ前の状態に戻します。
［やり直す］ 変更（装飾）した内容を1つ先の状態にやり直します。
［フォント］ フォントを指定します。
［フォントサイズ］　 文字の大きさを変更します。
［太字］ 文字を太字にします。
［斜体］ 文字を斜体にします。
［下線］ 文字に下線を付けます。
［打消し線］ 文字に取消線を付けます。
［下付き・上付き］　 文字を上付き、または下付きにします。
［文字色］ 文字の色を変更します。
［文字の背景色］ 文字に背景色を設定することができます。
［書式を解除］ 変更した文字を選択した状態でこのボタンを押すと設定した装飾が解除できます。
［切り取り］ 文字や画像を切り取ります。
［コピー］ 文字や画像を複製します。
［貼り付け］ 複製した（切り取った）画像や文字を貼り付けます。
［すべて選択］ 内容を全選択します。
［段落の書式］ 段落を見出しとして設定します。
［左揃え・右揃え・
中央揃え・両端揃え］		 文字や画像の横並び位置を指定します。
［番号付きリスト］ 番号付きの箇条書きを作成します。
［番号無しリスト］ 番号のない箇条書きを作成します。
［リンク挿入/編集］ 文字や画像にリンクを設定します。
［リンクを解除］ 設定したリンク情報を解除します。
［イメージ］ 画像を挿入します。画像URLは絶対パスで指定してください。
［表］ 表組（table）を挿入します。
［水平線］ 区切り線を挿入します。
［ブロック表示］ < div> や< p> などのブロック表示にします。
［ソース］ HTMLソースとプレビューを切り替えます。

5　プレビューのアイコンをクリックし、画面の仕上がりを確認します。

6　［次へ］をクリックします。
［フォーム設定を更新しました。］とメッセージが表示されます。

HTML・CSSの仕組み

HTML・CSSの基本的な仕組みと、クライゼルにおけるCSSの使用方法についてご紹介。（約5分30秒）

差込記号によるソースコード編集方法

デザインフォームでは、以下の差込記号を使用してソースコードを編集します。1～15の番号は次の「置換後のソース（例）」の赤い丸付き数字と対応しています。

1 DOCTYPE宣言
： ##html:doctype##		 キャリアごとの <DOCTYPE宣言>に置換されます。
2 <html>タグ
：##h tml:html##		 キャリアごとの<html>のネームスペースに置換されます。
3 <meta>タグ （Content-Type）
：##html:content_type##		 各キャリアごとの文字コードに置換されます。
4 タイトル：##msg:title## ［メッセージ設定］画面で設定したタイトルに置換されます。
5 システムメッセージ
：##msg:message##		 ［メッセージ設定］画面で設定したシステムメッセージに置換されます。
6 フォーム開始：##form## <form>タグに置換されます。
7 フォーム終了：##/form## </form>タグおよびシステムにより発行される <hidden>値に置換されます。
8 エラーメッセージ
： ##form:errors##		 フォームエラー発生時のメッセージに置換されます。
9 確認ボタン
：##msg:send_button##		 ［メッセージ設定］画面で設定した文字列に置換されます。
10 戻るボタン
： ##msg:back_button##		 ［メッセージ設定］画面で設定した文字列に置換されます。
11 送信ボタン
：##msg:commit_button##		 ［メッセージ設定］画面で設定した文字列に置換されます。
12 【名称】XXX※設定項目
：##e_xxx:title##		 フォームの［項目設定］画面で設定した項目名に置換されます。
13 【項目】XXX ※設定項目
：##e_xxx##		 フォームの［項目設定］画面で設定した項目のHTMLタグ<input><select><textarea>などに置換されます。
14 【エラー】XXX ※設定項目
：##e_xxx:errors		 フォームの［項目設定］画面で設定したエラーメッセージに置換されます。
※一部携帯機種にて、エラーの色が指定出来ない場合がありますので、ケータイフォームではエラーの差込記号を<font color=“XXX”>～</font>で囲んでください。（XXXはカラーコード）
15 送信ボタン【ラベル】
##msg:send_button##
戻るボタン【ラベル】
##msg:back_button##
確認ボタン【ラベル】
##msg:commit_button##		 ［メッセージ設定］画面で設定した文字列に置換されます。
16 ワンクリック
##foc:○○##
ワンクリック【ボタン】
<a href="##foc:○○##"><input type="button" value="次へ" /></a>		 更新、削除フォームへのワンクリックログイン用URLに置換されます。
17 ワンクリック（サイト）
##fos:○○##
ワンクリック【ボタン】
<a href="##fos:○○##"><input type="button" value="次へ" /></a>		 サイトの会員限定エリア内に作成されたページへのワンクリックログイン用URLに置換されます。
18 【選択肢名称】XXX ※設定項目：##e_xxx:desc_選択肢ID## フォームの［項目設定］画面で設定した単一選択もしくは複数選択項目の選択肢名称に置換されます。

注意

  • 16,17のワンクリックの有効期限はフォームのセッションと同一で3時間です。有効期限が切れると、パスワードを入れる認証画面が表示されます。
  • 16,17のワンクリックの差込記号は、データベースの複製時には機能しなくなります。

［入力画面］［確認画面］の各ボタンの<name>値、<id>値は以下のとおり指定してください。

［入力画面］ 例） <input type="submit" name="__send" id="__send" value="##msg:send_button##" />
［確認画面(戻る)］　 例） <input type="submit" name="__back" id="__back" value="##msg:back_button##" />
［確認画面(次へ)］ 例） <input type="submit" name="__commit" id="__commit" value="##msg:commit_button##" />

参考

 

置換後のソース（例）
置換後のソース（例）.jpg

確認画面の設定

確認画面も入力画面と同様にソースの登録が必要です。
フォームは、「入力」→「確認」→「完了」の3ステップで画面遷移しますが、確認画面が不要な場合は、スキップして確認画面を表示させないようにすることもできます。
ステップフォーム作成時には、この設定をすることで確認画面をスキップさせることができます。 

確認画面の設定.jpg
確認画面の赤えんぴつアイコンをクリックして、「確認画面をスキップ」で有効を選択。次へ→実行をクリックします。

注意

  • 確認画面をスキップさせると、入力内容の確認や修正ができなくなるので誤登録が増える恐れがあります。運用上問題ない場合のみ有効にしてください。
  • reCAPTCHA・画像投稿が有効な場合は、確認画面スキップ設定はできません。
  • 確認画面スキップを有効にすると、入力画面の##msg:send_button##が##msg:commit_button##に変換されます。お客様にてソースを修正する必要はありません。
  • フォームグループ作成時に、「設定のキャリア間同期」を有効チェックしていると、PC以外は「（PCと同じ設定を利用）」と表示されます。
  • 削除フォームでスキップを有効にすると、ワンクリックログイン先に当該削除フォームを指定できなくなります。
  • 確認画面スキップを有効にすると、［レポート］機能で確認画面のアクセス数集計に反映されません。経路分析等の画面で、表示がERRORやマイナス数値など、離脱率（離脱数）として正しくない表示になる場合があります。

完了画面の設定

完了画面も入力、確認画面と同様にソースの登録が必要です。画面下部の「表示URL」欄に任意のURLを入力すると、クライゼルの完了画面ではなく入力したURLを表示させることができます。
完了画面の設定.jpg

完了画面の遷移先指定

「入力」→「確認」→「完了」の完了画面の遷移先を任意のURL以外にも指定できます。初期設定では「フォーム完了時の遷移先」欄は表示されていません。
システム管理者が「システム＞機能の有効化」で有効にした場合のみに表示されます。
ステップフォームを作成したい場合は、本機能の設定が必要です。 

完了画面の遷移先指定1.jpg


完了画面の遷移先指定2.jpg

確認画面の赤えんぴつアイコンをクリックして、「フォームの完了時」で有効を選択し、［設定］ボタンをクリックします。
ポップアップウインドウで遷移先を指定します。

項目の説明

分岐なし～分岐数 フォームの遷移先を複数指定したい場合は、分岐先の数をプルダウンから選択します。
抽出条件 分岐数を指定した数(-1)だけ抽出条件を設定します。「分岐なし」の場合は表示されません。
遷移時の動作 フォームへログイン：更新フォームのログイン後画面に遷移させる（ステップフォーム）
サイトへログイン：サイト機能で作成した会員ページログイン後画面に遷移させる
URLを指定：完了画面の代わりに任意のURLに遷移させる
遷移先詳細 遷移先のフォームやURL等を指定します。更新フォームを指定する場合、［設定］の名称欄で指定した名称が選択肢に出ます。

注意

フォームグループ作成時に、「設定のキャリア間同期」を有効チェックしていると、PC以外は「（PCと同じ設定を利用）」と表示されます。

選択数を取得するURLを利用しセミナーの残席数を表示する

説明をこちらのページに移動しました。