フォームやサイトでPDFを見せたい

  • 更新

ファイル置き場にPDFをアップロードして、画面にリンクを設置したり、PDFをそのまま埋め込むことができます。
ここでは、リンクの設置方法と直接埋め込む方法を説明いたします。
 

事前準備：見せたいPDFファイルを「ファイル置き場」にアップロード

  1. 管理画面にログインし、上部メニューから [フォーム] または[サイト]＞ [ファイル置き場] をクリックします。
  2. [ファイルのアップロード]からPDFファイルをアップロードしてください。
  3. アップロードを完了すると、【ファイル一覧】に追加されます。
    ID列にファイルIDが表示されます。対象ファイルのID値を事前にご確認ください。

PDFのアップロードが完了しましたら、ご希望の表示方法に合わせて該当する手順にお進みください。
→リンクをクリックして別タブでPDFを表示/閲覧させたい場合

→フォームやサイトの画面内にそのままPDFを埋め込みたい場合

 

注意

  • アップロード可能なファイルサイズは最大1MB、保存ファイル数は最大500ファイル、保存容量は最大10MBです。
  • 1MB以上のPDFファイルをダウンロードさせたい場合は、ファイル置き場＋（プラス）
    （https://support.krs.bz/hc/ja/articles/47264773187225）の機能をご利用ください。
  • ファイル置き場の保存容量を最大100MBまで拡張できるオプション機能もご用意しております。詳しくはカスタマーサポートまでお問い合わせください。

 

リンクをクリックして別タブでPDFを表示/閲覧させたい場合

下記サンプルコードのファイルIDを変更して、設置したい箇所に貼付してください。該当箇所にリンクが表示されます。
リンクをクリックすると別タブでPDFが表示されます。

<a href="##pdf:ファイルID##" target="_blank">PDF資料はこちらよりご覧ください。</a>

テキストリンクではなく、URLリンクで表示したい場合は、下記サンプルコードのファイルIDを変更して、設置したい箇所に貼付してください。該当箇所にリンクが表示されます。
リンクをクリックすると別タブでPDFが表示されます。

<a href="##pdf:ファイルID##" target="_blank">##pdf:ファイルID##</a>

PDFのリンクは主に以下の設定箇所でご利用いただけます。

  • フォームの[メッセージ]＞入力時のメッセージなど
  • フォームグループの[更新]＞規約文章の[設定]＞規約文章内
  • フォームの[項目]＞項目毎の表示名
  • フォームの[項目]＞単一/複数選択などの[設定]＞表示する選択肢の表示名
  • フォームの[項目]＞項目毎の[設定]＞補足メッセージ
  • デザインフォームの[デザイン]＞ソース欄
  • 自動生成フォームの[デザイン]＞下表でテキスト要素を追加＞テキスト要素の[設定]＞表示するテキスト内（※表示方法はHTMLタグ有効を選択してください。）
  • サイトで作成した各種ページのソース欄

 

フォームやサイトの画面内にそのままPDFを埋め込みたい場合

下記サンプルコードのファイルIDを変更して、設置したい箇所に貼付してください。該当箇所にPDFが埋め込まれます。

<div style="width: 100%; height: 90vh; border: 2px solid #333;">
    <object 
        data="##pdf:ファイルID##" 
        type="application/pdf" 
        style="width: 100%; height: 100%;">
        
        <div style="padding: 20px; text-align: center;">
            <p>ブラウザでPDFを表示できません。</p>
            <a href="##pdf:ファイルID##" target="_blank">ここをクリックしてPDFをダウンロード</a>
        </div>
    </object>
</div>

フォームやサイトの動作環境によって埋め込んだPDFが閲覧できない場合があるため、サンプルコードはPDFが表示されなかった場合に別タブで表示されるように設定しております。

なお、主に以下の設定箇所でPDFを埋め込むことが可能です。

  • フォームの[メッセージ]＞入力時のメッセージなど
  • フォームグループの[更新]＞規約文章の[設定]＞規約文章内
  • フォームの[項目]＞項目毎の表示名
  • フォームの[項目]＞単一/複数選択などの[設定]＞表示する選択肢の表示名
  • フォームの[項目]＞項目毎の[設定]＞補足メッセージ
  • デザインフォームの[デザイン]＞ソース欄
  • 自動生成フォームの[デザイン]＞下表でテキスト要素を追加＞テキスト要素の[設定]＞表示するテキスト内（※表示方法はHTMLタグ有効を選択してください。）
  • サイトで作成した各種ページのソース欄