Embedded Files
紐付ける質問数（項目数）の多い予約フォームでの解説です
（その他フォームは、「カスタムフォーム」にあります）
Googleフォームで予約フォームなどを作りたいがデザインが今一つで「う～ん」とお考えの方も多いのではないでしょうか？
そんな方のためにGoogleフォームのカスタマイズのやり方を解説します。
以下はその一例です。
試しにカスタマイズしたフォームから（架空の情報で）申し込んで、挙動をご確認ください。(Googleフォームは画像です）
送信後のサンクスページに関してはGoogleフォームが出てしまいますが、サンクスページをうまく作成出来なかったためご愛嬌だと思ってくださいｗ
回答状況が確認できるよう、予約の回答も埋め込んでおきます
カスタマイズの流れ
➀ Googleフォームの作成 ⇒ ➁フォームを自作 ⇒ ③ Googleフォームとの紐付け
➀は通常のGoogleフォームの作成なので問題ないでしょう
➁の自作フォームの作成はHTMLの知識が必要ですが、下記のコードをコピーしてアレンジすれば問題ないと思います。
③のGoogleフォームとの紐付けはちょっと厄介ですが、丁寧に解説していますので頑張ってください。（どのサイトの説明より分かりやすいはずです）
Googleフォームと自作フォームの質問数（項目数）は必ずそろえてください
Googleフォームの作成
フォームを自作
コード（予約フォーム）
<div class="box">
<form action="**************************">
<h2>お客様ご予約フォーム</h2> <!-- 文字の大きさ -->
<label>予約日:
<input type="date" name="entry.**********" required> <!-- requiredを入れると入力項目が必須となります -->
</label>
<label>予約時間:
<input type="time" name="entry.**********" required>
</label>
<label>予約人数:
<input type="number" value="1" name="entry.**********" required>
</label>
<label>名前（カタカナ）:
<input type="text" name="entry.**********" placeholder="必須" required
pattern="[\u30A0-\u30FFー\s]+"
title="カタカナで入力してください"> <!-- カタカナ入力制限 -->
</label>
<label>電話番号:
<input type="tel" name="entry.**********" placeholder="必須" required
pattern="[0-9]*"
inputmode="numeric"
title="数字のみ入力してください"> <!-- 数字入力制限 -->
</label>
<label>メールアドレス:
<input type="email" name="entry.**********">
</label>
<label>ご質問など:
<textarea name="entry.**********" rows="4"></textarea>
</label>
<button type="submit">申し込む</button>
</form>
</div>
<style>
.box {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #ad7d4c; /* 外側の背景色 */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
form {
background-color: #fff; /* 内側の背景色 */
padding: 10px;
border-radius: 0px; /* 内側の角の丸み */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影の大きさ */
max-width: 400px;
width: 100%;
margin: 10px 0;
}
h2 {
text-align: center;
color: #333; /* お客様ご予約フォームの色 */
}
label {
display: block;
margin: 15px 0 5px;
font-weight: bold;
color: #555; /* フォーム内の文字色 */
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #ccc; /* 入力枠の太さと色 */
border-radius: 4px; /* 入力枠の角の丸み太さと色 */
}
textarea {
resize: vertical;
}
button {
background-color: #6a5d21; /* 申し込みボタンの色 */
color: #fff; /* ボタンの文字色 */
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
display: inline-block;
}
button:hover {
background-color: #69821b; /* 申し込みボタンにカーソルを合わせた時の色 */
}
</style>
青の部分には検証（デベロッパーツール）で取得した情報を入力します
自作フォームとGoogleフォームとの紐付け作業
作成したGoogleフォームを公開します
回答者へのリンクをコピーをクリック
コピーをクリック
すでにGoogleフォームを作成しHPに埋め込み済みで「回答者へのリンクをコピー」のアイコンがない場合には
送信をクリック
リンクアイコンをクリック
コピー
コピーしたURLをブラウザの検索欄に貼り付け → Enterキー →（公開したGoogleフォームが開きます）
Googleフォームの入力欄に適当な情報を入力
Windowsでは「F12」キーを押す（または右クリックプルダウンメニューの「検証」）、Macでは「Command + Option + I」を押す → デベロッパーツールが右に展開します
Ctrl+Fキー（Windowsの場合）を押すと赤枠の検索窓が出ますので <form と入力 → Enterキー → （<form の箇所がオレンジ色でハイライトされます）
該当箇所の … をクリック（または右クリックから） → Copy element をクリック
メモ帳を開き貼り付け（必要なのは一番先頭の <form action="https ～ formResponse" の https ～ formResponse の部分です）
今度は検索窓に entry と入力 → Enterキー
Googleフォームで作成した項目分の <input type= ～ name="entry.**********" が見つかります
… をクリックし面倒ですがメモ帳に貼り付けます（あるいはメモっておいて下さい）
<input type="hidden" name="entry.127362851" value="アイウエオ">で項目ごとの番号を把握できます
予約日には、year,month,day に同じ数字が当てられています
予約時間には、hour,minute に同じ数字が当てられています
取得した情報を自作したフォームコードに入れる
<form action="***************">の * 部分に https ～ formResponse を
name="entry.**********"の * 部分に項目ごとの数字をいれます
これでGoogleフォームと自作のフォームの紐付けは完了です
このHTMLコードを埋め込んでお使いください（もちろん埋め込むのはGoogleフォームではなく自作フォームのみです）
その他Googleフォームでやっておいた方が良いこと
回答で、スプレッドシートにリンク（リンクをしておけば回答をスプレッドシートで一括管理できるので便利です）
回答で、新しい回答についてのメール通知を受け取る（これも便利です）
設定で、確認メッセージを編集 ⇒「予約を受け付けました」（デフォルトは「回答を記録しました」）などに変更
メッセージ変更後は、保存を忘れずに
別の回答を送信するためのリンクを表示をOFF
（なお、自動返信メールを送る設定にする場合は、Form Notifications（無料） というアドオン（拡張機能）をケバブメニュー（︙）からインストールして設定してくださいーーーここでは説明を省きます）
スプレッドシート（予約の回答）を新しい順に表示させる方法
（✕）は画像なし
リンクしたスプレッドシートファイルを開く → Apps Script（✕）
コード.gs に下記コードをペースト → プロジェクトを保存 → ▷実行 → 権限を確認
トリガー
トリガーを追加
イベントの種類をフォーム送信時に変え → 保存
アクセス承認の画面になります
自身のアカウントを選択 → Avanced → Go to 〜(unsafe）→ Allow（掲示板作成の画像を参照）（✕）
これでスプレッドシート予約回答は、新しい順で表示されます
このサイトのように受付回答をサイトに表示する場合は、この後デプロイをして取得したURLを埋め込んでください
並べ替えコード
function myFunction() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getActiveSheet();
var rows = sheet.getLastRow()-1; //1行目はカラム行のため-1
//並べ替えるデータの範囲
var range = sheet.getRange(2,1,rows,8); //2行目から並び替える列数（1列目から8列目まで）
//並べ替えの条件
range.sort({column:1,ascending:false}) //降順（新しい順）で並び替え（trueは昇順）
}
Google Sites
Report abuse