HTMLのデザインを適用する | Synergy! サポートページ

HTMLのデザインを適用する

フォーム>フォーム管理>編集したいフォームの【編集】>フォーム編集画面から「画面設定」の各画面設定より【設定】ボタンをクリックしてください。

デザイン選択で「オリジナルHTMLを適用する」を選択すると、「オリジナルHTMLアップロード」の画面が表示されます。

【手順】
1.テンプレートダウンロード

2.オリジナルHTMLの加工

  2.1 埋め込みタグ一覧

  2.2 コンテンツ一覧

3.オリジナルHTMLアップロード

4.デザインを適用する

1.テンプレートダウンロード

標準デザインのHTML、もしくは既にアップロードされているオリジナルデザインのHTMLをダウンロードします。

デザインを編集する場合には、ダウンロードしたHTMLを加工してください。

必ず項目設計を終わらせてからテンプレートをダウンロードしてください。

オリジナルHTMLをアップロードした後に項目設計を変更すると、再アップロードが必要となります。

  • 【テンプレート(デザインなし)を取得】ボタン

    フォームの表示に必要なタグが書かれたHTMLをダウンロードします(デザインは適用されていません)。

    はじめにこちらのHTMLをダウンロードし、加工してください。

  • 【テンプレート(標準デザイン)を取得】ボタン

    Synergy!の標準デザインのHTMLをダウンロードします。

  • 【現フォームのHTMLを取得】ボタン

    現在アップロードされている、オリジナルHTMLをダウンロードします。

    ※一度もHTMLをアップロードしていない場合は、ボタンはクリックできません。

2.オリジナルHTMLの加工

ダウンロードしたHTMLのデザインを編集してください。

ダウンロードしたHTMLの中には、各画面に必要な入力項目のタグやエラーメッセージ用の埋め込みタグなどがあらかじめ挿入されています。これらは削除しないようにしてください。

必要な埋め込みタグがHTMLに記載されていない場合、エラーメッセージが表示され、HTMLをアップロードすることができません。

※各画面により、必要な埋め込みタグは異なります。

入力項目タグ

singleAnswer(ANSWER○○)
multiAnswer(ANSWER○○)

Synergy!で作成したフォームでのみ利用されるタグになります。
○○の部分にはフォーム、項目ごとにユニークな番号が付与され、同じ項目でもフォームが異なると違う番号が付与されます。

画像投稿機能で追加されるオリジナルタグ一覧

画像投稿はオプション機能です。

追加されるタグ 設置画面 / 箇所 内容
<%%PICLIBJS%%> 入力画面、確認画面、完了画面
</head>タグの直前
JavaScriptのURL、各種エラーメッセージの定義を設定
<%%PICLIBBODY%%> 入力画面、確認画面、完了画面
<body>タグの属性に埋め込み
画像投稿で使用するdata属性を設定
<%%PICLIBFORM%%> 入力画面、確認画面
<form>タグの属性に埋め込み
画像投稿で使用するid属性を設定
<%%PICLIBERROR%%> 入力画面
エラーメッセージを表示させたい箇所
エラーメッセージを表示
<%%PICLIBITEM*%%> 入力画面、確認画面
<input>タグの属性に埋め込み
※「*」は1~5の数字
画像投稿用のdataplsubject属性を設定

2.1 埋め込みタグ一覧

各画面に必要な埋め込みタグの一覧が表示されます。

埋め込みタグはダウンロードしたテンプレート内にあらかじめ挿入されていますが、各埋め込みタグの用途を確認したり、誤って消してしまった埋め込みタグをコピーする場合に、この画面を利用してください。

  • 重複エラーメッセージ <%%DUPERROR%%>

    重複エラーメッセージは「フォームに入力された更新キーがすでにデータベース内に存在しており、登録エラーになった」場合にこれを通知するタグです。

    ※フォームの設定によってはこのエラーが出るケースがない場合もありますが、HTMLソース中に必ず記載しておいてください。

  • エラーメッセージ <%%ERROR**%%> ※**は数字

    メールアドレスや氏名などフォームに掲載している個々の入力項目にエラーが発生した際、項目ごとのエラーメッセージを表示するのが「エラーメッセージ」タグです。重複エラーメッセージタグと同様、アップロードするHTMLソース中に必ず記載してください。

  • エラー発生フラグ <%%IFERROR%%> <%%IFERROR**%%> ※**は数字

    「フォームで入力エラーが起きた場合にのみ反映される」という特殊な効果を持ったタグです。使い方の一例としては、入力漏れエラーがあった場合などにスタイルシートと組み合わせて使うことで「エラーがあった項目欄のみ背景色を変え、どの項目がエラーの対象なのか目立たせる」「エラー発生時にのみページ上に注意書きを表示する」などがあります。

  • reCAPTCHAエラーメッセージ <%%RECAPTCHAERROR%%>

    reCAPTCHAによりbotと判定された際やreCAPTCHAが正しく設定されていない場合にエラーメッセージを表示させるタグです。
    ※「新規登録フォーム」「新規・更新登録フォーム」「新規・更新登録フォーム(Synergy!問い合わせ管理機能連携用)」のPC向けフォーム向けのタグです。

2.2 コンテンツ一覧

オリジナルHTML内で利用するための、画像やスタイルシートなどのコンテンツの一覧が表示されます。

コンテンツのURLをオリジナルHTML内に埋め込んで利用してください。

また、この画面からコンテンツを合計10MBまでアップロードできます。

アップロードできるファイルの種類に制限はありませんが、動作を保証するのは以下の拡張子のファイルのみです。

JPEG, GIF, PNG, BMP, CSS, JS

「ファイル管理」にアップロードしたファイルもご利用いただけます。
「ファイル管理」は、合計100MBまでアップロードでき、フォルダを分けたファイル管理も可能です。
ファイル管理の利用方法についてはこちらをご覧ください。

  • URLを「https://~」「http://~」で表示

    「https://~」または「http://~」を選択するたびに、コンテンツのURL表示を切り替えます。

    ※「URLをhttp://~で表示」を選択したコンテンツを「https://~」のURLで表示されるフォームに載せた場合、警告が出ることがあります。

  • コンテンツアップロード

    一度に5コンテンツまでアップロードできます。

    ※1ファイルのサイズ上限は2MBまでです。

    ●コンテンツアップロードの方法については「フォームマニュアル」の「コンテンツ管理」を参照してください。

  • すべて選択/解除

    画像を削除するためのチェックボックスをすべて選択または解除します。

    チェックボックスは一つずつ選択することも可能です。

  • 選択したコンテンツを削除

    チェックボックスで選択されたコンテンツを削除します。

    公開中のフォーム内で使用されているコンテンツも削除されますので、削除の際は十分ご確認ください。

  • URL

    オリジナルHTMLに埋め込むURLが表示されます。
    コンテンツをクリックするかURL上をクリックすると、URL全体が選択されますので、コピーまたはドラッグしてオリジナルHTMLへ埋め込んでください。

3.オリジナルHTMLアップロード

編集したHTMLファイルを指定してください。

※次の画面に進むまでは、フォームには反映されません。

アップロードできるファイルサイズは500KBまでです。

すでにオリジナルHTMLをアップロードしていて、標準デザインからオリジナルデザインに切り替えたいだけの場合は、ファイルを指定する必要はありません。

4.デザインを適用する

適用するオリジナルHTMLをアップロードしたら、【フォームを更新する】ボタンをクリックしてください。

ボタンをクリックした時点で、デザインが適用されます。

オリジナルHTMLデザインを適用した後に標準デザインに戻したい場合は、もう一度同じ設定画面を開き、「標準デザインを適用する」を選択して、設定を完了してください。

その際、アップロードしているオリジナルHTMLは削除されませんので、アップロード済みのオリジナルHTMLに再び切り替えることも可能です。



この記事へのご意見、ご指摘がございましたらご入力ください。
※ご入力内容への返信はできません。お問い合わせの場合はこちらからお願いします。
この記事は参考になりましたか?
参考になった参考にならなかった
読み込み中...