エフトラEFO

操作マニュアル

ガイドナビゲーションの設定

エフトラEFO初期設定の入力支援機能「ガイドナビゲーション」の設定方法です

1ガイドナビゲーションについて

ガイドナビゲーション機能とは、フォーム入力中のユーザーに、入力の進行状況をナビゲートするダイアログを表示する機能です。

詳しくはガイドナビゲーション表示をご覧ください。

2ガイドナビゲーション設定ページへのアクセス

入力支援機能の選択に続いて表示されます。

またはダッシュボード内の、「入力支援機能」欄の「ガイドナビゲーション」ボタンからもアクセスすることが可能です。

ダッシュボードの「入力支援機能」欄の「ガイドナビゲーション」ボタン

▲ダッシュボードの「入力支援機能」欄の「ガイドナビゲーション」ボタン

入力支援機能の選択時に機能を選択していないと、設定画面へのリンクも表示されませんのでご注意下さい。

下記の画面が表示されます。

ガイドナビゲーションの設定画面

3ガイドナビゲーションの設定

各種設定項目にご記入ください。

ガイドナビゲーションの設定 各メニュー

各項目について

1PCでのみ表示 ガイドをPCでのみ利用したい(スマートフォンデバイスでは利用しない)場合はチェックを入れて下さい。
※アクセス端末にスマートフォンを選んだ場合は表示されません。
2HTML内にインライン表示する

スマートフォン向けの利用オプションです。
ガイドナビゲ-ションをダイアログ型ではなく、HTML内に挿入する形で表示させたい場合にお選び下さい。

インライン表示したガイド なお、この利用オプションを選択すると、次の項目「表示位置」の登録内容が変化します。 ※補足1参照
3横位置、縦位置

※利用オプション「HTML内にインライン表示」を選択している場合は 補足1をご覧ください。

ガイドナビゲーションのダイアログを表示する位置を指定することができます。
縦横それぞれ始点と距離(px)を指定してください。詳しくは下記の通りです。
  • 横位置

    画面の「左から」を選んだ場合は画面の左端とガイドの左辺の間の距離を、「右から」の場合は画面右端とガイド右辺との間の距離をpxで指定して下さい。詳しくは下記のとおりです。

    左右起点のガイドの配置図
  • 画面の「下から」を選んだ場合は画面の下端とガイドの下辺の間の距離を、「上から」の場合は画面上端とガイド上辺との間の距離をpxで指定して下さい。詳しくは下記のとおりです。

    上下起点のガイドの配置図
4表示オプション 位置以外のガイドの表示方法を設定できます。適用させたい表示方法にチェックを入れて下さい。
  • ページ上に固定表示する

    スクロールに影響されず、ブラウザ画面上の一定の位置に固定して表示できます ※補足2参照

  • ドラッグ可能にする

    ガイドの位置ドラッグで自由に移動可能にします

  • 表示開始位置を指定

    画面をある程度スクロールしたタイミングでガイドを表示させることができます。ランディングページなどでフォームがページ下部にレイアウトしている場合などにご利用をおすすめしています。
    このオプションを選択すると表示される入力欄に、表示開始するスクロール位置(上からのpx)を指定してください

5ガイドのデザイン ガイドの枠線、背景、不透明度を指定することができます。
  • 枠線の色

    枠線の色をカラーピッカーから選択もしくはカラーコードを記入してください。
    枠線を表示したくない場合は背景色と同じ色をご記入ください。

  • 背景色

    背景色をカラーピッカーから選択もしくはカラーコードを記入してください。

  • 不透明度

    ガイドの背景を透かしたい場合は、不透明度を下げてください。

6画像の使用

ガイドに画像(アイコン)を添えることがきます。
「アイコンを使用する」を選択すると、アイコンの一覧が表示されますので、選択ください。

アイコンの一覧
7項目数カウントの編集 ガイドでは、フォームの項目数をカウントして表示することが可能ですが、その場合に、複数に入力欄が分かれている項目(郵便番号、電話番号など)同士を纏めてひとつの項目とみなすことができます。
詳しい設定方法は下記をご覧ください。
8入力中テキスト ユーザーがページに訪問してからすべての項目に入力を終えるまでの間にガイドに表示するテキストとそのデザインを編集できます。
  • テキスト入力欄

    表示するテキストを入力して下さい。HTMLタグを使用することが可能ですので、スタイルシートの知識がある方はインラインでスタイルを指定いただくことも可能です。(テキストエリア内の改行のみ、自動で反映されます。)

    また、下記の数値についても記載可能です。数値を挿入したい箇所に下記のタグを挿入してください。

    • 必須項目の合計数: <#total>
    • 未記入の必須項目の数: <#>
    • 入力進行率: <#%>
  • 文字揃え

    ダイアログ内で文字を揃える方向を選択してください

  • 書式

    標準の書式のほか、斜体や太字も設定することができます

  • 文字サイズ

    テキストのフォントサイズをpxで指定できます

  • 文字色

    文字の色をカラーピッカーから選択もしくはカラーコードを記入してください。

補足1: HTMLインライン表示時の表示位置設定について

「HTML内にインライン表示する」の利用オプションを選択すると、「表示位置」の登録エリアが下記に切り替わります。

HTMLインライン表示時の表示位置設定画面

設定方法としては、HTML内の特定の要素の直後にガイドコンテンツを挿入するという形になります。

要素の指定方法は、jQueryのセレクターの記載方法に沿ってご記入ください。

補足2: スマートフォンにおける「ページ上に固定表示する」について

HTMLが後方互換モードでマークアップされている場合、スマートフォンにおける「ページ上に固定表示する」は動作いたしません。ご注意ください。

4ガイドナビゲーション設定の保存

設定が完了したら、「保存して次の機能へ」を押下し保存、次の機能の設定に移ります。

「保存して次へ」ボタン

他機能の詳しい設定方法については、下記よりご覧ください。

サブミットブロック設定に進む
離脱ブロック設定に進む
住所自動入力に進む
ふりがな自動入力に進む
初期項目フォーカスに進む
入力モード自動変換に進む
半角・全角自動変換に進む
リアルタイムアラートに進む
入力形式事前指示に進む
入力成功サインに進む
エラー時背景色設定に進む
入力時背景色設定に進む
初期表示文言設定に進む
メアドサジェストに進む
送信ボタンデザインに進む
スマホキーボード変換に進む
Facebook自動入力に進む
Yahoo!自動入力に進む

すべての入力支援機能の設定を終えたら

フォームに2ページ目以降の入力画面が存在する場合は、下記を参照のうえ2ページ目以降の設定に進んで下さい。

2ページ目以降の設定

2ページ目の入力画面が存在しない、またはすべての入力ページの入力支援機能の設定を終えた場合は、本番反映/タグ貼り付けのステップにお進みください。

お問合せ

お困りのことや不明点など、サポート事務局までお気軽にご相談ください。
お電話、チャット、メールの3つの方法でお問い合わせいただけます。

  • お電話

    平日10:00~18:00

    03-6272-8993

    ※担当者不在の場合、折り返しのご連絡となります
  • メール

    24時間受付中

    お問合せフォーム ※営業時間外のお問合せは翌営業日の確認となります