【ご利用にあたって】

この度は本スクリプトにご興味をお持ち頂きまして誠にありがとうございます。
ご利用にあたってどの部分を変更すればカスタマイズできるかを以下ご説明致します。

まずはウェブアプリのデプロイを行います。
新しいデプロイ>>>ウェブアプリ
を選択してスクリプトのデプロイを行って下さい。
複数のユーザーが使用する場合は『アクセスできるユーザー』の変更を行って下さい。

(ご参考)
https://auto-worker.com/blog/?p=3565

1.ウェブアプリIDを変更する

htmlファイルのスクリプト(form.html)の11行目をデプロイされたご自身のウェブアプリのIDに書き換えて下さい。
<form method="post" class="form cf" action="(https://script.google.com/macros/s/[デプロイされたウェブアプリのID]/exec)">

IDはデプロイされたウェブアプリのURLの
https://script.google.com/macros/s/[この部分]/dev
です

2.スプレッドシートの指定

スプレッドシートのサンプルはご購入後にcode.gsに記載のコメントアウトをご参照下さい。

スプレッドシートのメニューから
ファイル>>>コピーを作成
でご利用下さい。
スプレッドシートをコピー後にカスタマイズすることをオススメします。

また、本スクリプト(code.gs)の97行目の
SpreadsheetApp.openById("スプレッドシートID").getSheetByName("シート名");
の変更で呼び出すスプレッドシートを指定します。

スプレッドシートIDは
https://docs.google.com/spreadsheets/d/[この部分]/edit#gid=0
になります

また、100行目から110行目までについてはウェブアプリからの入力の範囲を変更できます。

htmlファイルのスクリプト(form.html)と対応する変数(Companyなど)の変更で
入力項目の変更、追加削除を自由に行うことができます。

3.ダウンロードリンクの指定

ダウンロードリンクのスクリプト(download.html)の12行目をご自身のスプレッドシートIDに書き換えて下さい。

<button class="Form-Btn" type="button" onclick="location.href='https://docs.google.com/spreadsheets/d/[ご自身のスプレッドシートID]/export?format=pdf&gid=0&size=A4&scale=4&horizontal_alignment=CENTER&gridlines=false'">download

初期設定はpdfの出力はA4にしておりますが、URLオプションを変更すると詳細設定が可能です。

(ご参考)
https://officeforest.org/wp/2018/11/25/google-apps-script%E3%81%A7pdf%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B/


4.CSSファイルで見た目を変える

ウェブアプリの見た目はCSSで自由に変更が可能です。
CSS.htmlがCSSの部分となります。
codepenで見た目を確認しながら変えると便利です。

(ご参考)
https://copypet.jp/
https://codepen.io/pen/

5.使い方説明

使い方の説明をGoogleスライドで入れております。
htmlファイルのスクリプト(form.html)の69行目にGoogleスライドで使用方法の説明を入れることができます。
別途Googleスライドを作成して公開をした後、URLを該当部分に貼り付けます。(<iframe></iframe>の間)
尚、64行目から71行目はごっそり削って頂いても動作します。

<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQRG9JX7mkK6pZzMFJEP9ebAspX4HNO-OUdqe6stAuvMw9deQl-UOEqrprFxU2YfEqG0Af1LUnHCIiO/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

使用方法の説明は以上となります。