スマートフォンまたは表示端末ごとにフォームの表示を最適化するには

表示する端末ごとにWebページやWebサイトを最適な大きさで表示することをレスポンシブデザインと言います。

下記のフォームはレスポンシブ対応しています。
 ・新フォーム管理
 ・フォーム管理の標準デザイン(新スタイル)

フォーム管理の旧スタイルを適用している場合は、フォームに下記の設定を行うことにより、レスポンシブ対応が可能です。
※PC向けで作成した場合のみ対応可能です。

1.オリジナルHTMLデザインを適用する。
2.レスポンシブ対応のHTMLタグを追加する。

詳しくは下記手順をご覧ください。

<レスポンシブ対応イメージ図>※スマートフォン(iPhone)での表示例

レスポンシブ対応の注意点

・スタイル設定の「分割パターン」は設定内容にかかわらず「分割なし」の形式で表示します。

・フィーチャーフォン(ガラケー)の仕様により、表示に数秒かかる場合や表示できない場合、表示端末の容量によりページが切れてしまう場合があります。

手順

1.作成したフォームのオリジナルHTMLテンプレートをダウンロードします。

フォーム>フォーム管理>編集したいフォームの【編集】>フォーム編集画面から「画面設定」の各画面設定より【設定】>「デザイン選択」で「オリジナルHTMLを適用する」を選択します。
【テンプレート(標準デザイン)を取得】をクリックし、オリジナルHTMLテンプレートをダウンロードします。

2.テキストエディタ等でダウンロードしたテンプレートのHTMLソースを表示し、下記PDFファイルを参考に修正します。

※PDFファイルをクリックしてブラウザで表示し、必要な箇所をコピー&ペーストしてご利用ください。

PDF.gif(画像をクリックして表示)

3.修正したHTMLファイルをアップロードします。

オリジナルHTMLアップロードの【ファイルを選択】より修正したHTMLファイルを呼び出し【フォームを更新】をクリックします。

上記手順を、確認画面や完了画面などの各画面にも設定してください。

オリジナルHTMLにあまり詳しくない方は以下の設定でスマートフォンでの表示を最適化することができます。(レスポンシブデザインではありません。)

※標準デザインはレスポンシブに対応しています。旧スタイルをご利用の際にお使いください。

【携帯向けフォームの場合】
フォーム編集画面 > スマートフォン対応(METAタグ挿入)の設定を「利用する」に変更

【PC向けフォームの場合】
フォーム編集画面 > METAタグ挿入の入力枠へ以下のタグを設置

<meta name="viewport"content="width=device-width‚target-densitydpi=device-dpi‚user-scalable=yes‚initial-scale=0.5">

※この方法は、フォームの表示幅をスマートフォン用に一定の大きさにします。表示端末の画面幅により多少の表示ズレが起きます。


※ご利用における注意点※

・ここでご紹介しているレスポンシブ対応は、フォーム機能のフォームを対象としていますデザインカスタマイズ機能を持たないアンケート機能等には適用できません。

・携帯端末には様々な仕様を持つ機種が存在するため、表示する機種によっては動作しない場合があります。

オリジナルHTMLの記述方法についてはサポートの対象外としております
こちらでは活用例のご紹介を目的としており、個別の案件に対応するためのオリジナルHTMLの記述方法についてのご質問は承りかねますのであらかじめご了承ください。

・お持ちのフォームにすでにオリジナルHTMLを使ったデザインカスタマイズを行っている場合には、こちらにご紹介したHTMLタグがフォームに影響を及ぼす可能性もあります。十分に動作検証を行ってください

この記事は参考になりましたか?
参考になった参考にならなかった
読み込み中...
この記事への評価、ご指摘がございましたらご入力ください。
※ご入力内容への回答はできません。ご質問はフォームよりお問い合わせください。