Embedded Files
掲示板投稿・質問受付・予約の各フォームを用意しました（適当にコードを修正してお使いください）
予約フォームは「カスタムフォーム紐付」にもあります
オリジナルのGoogleフォームのデザインは「どうもな〜」という方はお使い下さい。
[フォームの使い方]
下記フォームに合わせた Googleフォームの作成 ➡ 下記フォームとGoogleフォームとの紐付け
Googleフォームとの紐付方法については「カスタムフォーム紐付」をご覧ください。
右（下）のGoogleフォームを作成し、こちらに紐付けます
（必ず質問の数をそろえます）
NO.1（タイトルなし）
NO.2（タイトルあり）
NO.3（質問受け付け用）
NO.5（メールアドレス入力欄なし）
NO.6（（希望席種選択あり）
Googleフォームとの紐付けに必要な箇所を入力してお使い下さい ▼
NO.1 コード（掲示板）
<box>
<form action="********************">
<h2>○○○ 掲示板</h2>
<label>名前：（必須）
<input type="text" class="name" name="entry.**********" placeholder="ハンドルネーム（ニックネーム）" required>
</label>
<label>コメント：（必須）
<textarea name="entry.**********" rows="4" placeholder="枠の右下ドラッグで、入力欄を大きくできます" required></textarea>
</label>
<button type="submit">送信</button>
</form>
</box>
<style>
box {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background-color: gray;
margin: 0;
padding: 0;
}
form {
display: block;
max-width: 600px;
width: 100%;
margin: 0px 0;
text-align: center;
background-color: white;
padding: 5px 20px;
border: 1px solid gray;
border-radius: 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
h2 {
text-align: center;
color: #696969;
margin-bottom: 35px;
}
label {
display: block;
color: #151515;
text-align: left;
margin: 10px 0;
}
.name, textarea {
width: 100%;
color: #555;
font-size: 14px;
font-weight: 400;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
textarea {
resize: vertical;
}
button {
display: inline-block;
width: 100%;
margin-bottom: 25px;
padding: 10px 20px;
font-size: 17px;
background-color: gray;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: dimgray;
}
</style>
NO.2 コード（掲示板：変更可能箇所を色付け)
<box>
<form action="********************">
<h2>○○○ 掲示板</h2>
<label>
<input type="text" class="title" name="entry.**********" placeholder="タイトル">
</label>
<label>
<input type="text" class="name" name="entry.**********" placeholder="ハンドルネーム" required>
</label>
<label>
<textarea name="entry.**********" rows="4" placeholder="コメント（枠の右下ドラッグで、入力欄を大きくできます）" required></textarea>
</label>
<button type="submit">投稿</button>
</form>
</box>
<style>
box {
display: flex;
justify-content: center;
align-items: center;
font-family: serif;
background-color: silver;
margin: 0;
padding: 0;
}
form {
display: block;
max-width: 600px;
width: 100%;
margin: 10px 0;
text-align: center;
background-color: white;
padding: 10px 20px;
border: 1px solid silver;
border-radius: 0px;
box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #696969;
margin-bottom: 35px;
}
label {
display: block;
margin: 15px 0 5px; /* 余白（上・左右・下） */
}
.title, .name, textarea {
width: 100%;
color: #555;
font-size: 14px;
font-weight: 400;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
textarea {
resize: vertical;
}
button {
display: inline-block;
width: 100%;
margin-bottom: 25px;
padding: 10px 20px;
font-size: 17px;
background-color: gray;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: dimgray;
}
</style>
ピンクの部分は適当に変えて下さい
青の＊＊＊＊＊＊＊は、Googleフォームとの紐付けで必要な情報を入力する部分です
NO.3 コード（質問受付）
<box>
<form action="********************">
<h2>○○○ 質問箱</h2>
<p>回答はHPの回答用ページでさせていただきます</p>
<label>
<input type="text" class="title" name="entry.**********" placeholder="タイトル">
</label>
<label>
<input type="text" class="name" name="entry.**********" placeholder="お名前（必須）" required>
</label>
<label>
<input type="email" class="email" name="entry.**********" placeholder="メールアドレス">
</label>
<label>
<textarea name="entry.**********" rows="4" placeholder="ご質問（必須）" required></textarea>
</label>
<button type="submit">送信する</button>
</form>
</box>
<style>
box {
display: flex;
justify-content: center;
align-items: center;
font-family: serif;
background-color: #e5e5ff;
margin: 0;
padding: 0;
}
form {
display: block;
max-width: 600px;
width: 100%;
margin: 10px 0;
text-align: center;
background-color: #ffffef;
padding: 10px 20px;
border: 1px solid silver;
border-radius: 0px;
box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #696969;
margin-bottom: 35px;
}
label {
display: block;
margin: 10px 0 5px; /* 余白（上・左右・下） */
}
.title, .name, .email, textarea {
width: 100%;
color: #555;
font-size: 14px;
font-weight: 400;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
textarea {
resize: vertical;
}
button {
display: inline-block;
width: 100%;
margin-bottom: 25px;
padding: 10px 20px;
font-size: 17px;
background-color: #a3a3ff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #7f7fff;
}
</style>
NO.4 コード（掲示板：背景画像）
<box>
<form action="********************" autocomplete="off"> <!-- オートコンプリートをOFFにしています -->
<h2>○○○ 掲示板</h2>
<label>タイトル
<input type="text" class="title" name="entry.**********">
</label>
<label>ハンドルネーム
<input type="text" class="name" name="entry.**********" placeholder="必須" required>
</label>
<label>コメント
<textarea name="entry.**********" rows="4" placeholder="必須" required></textarea>
</label>
<button type="submit">投稿</button>
</form>
</box>
<style>
box {
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
background-color: orange;
margin: 0;
padding: 0;
}
form {
display: block;
max-width: 600px;
width: 100%;
margin: 10px 0;
text-align: center;
background-color: #fff;
padding: 5px 20px;
border: 1px solid orange;
border-radius: 0px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-image: url(https://lh3.googleusercontent.com/pw/AP1GczPiqNatqC2fIDcfrXj3cDI_9gowXLNjwpEBFlBeq8WsB5BJgmS5GOVk_pj6XoBjGkx4jeCGksQ1VcWbgHDKCqWaoIBOKSOOAaf1ISuX9m5OCriFlE-8M0J3uWAB23ipvMoTcIttqIRz0XCs9KSSvvN1eg=w720-h450-s-no-gm?authuser=0); /* 背景画像のアドレスです */
background-size: cover;
}
h2 {
text-align: center;
color: white;
margin-bottom: 35px;
}
label {
display: block;
color: white;
text-align: left;
margin: 15px 0 5px;
}
.title, .name, textarea {
width: 100%;
color: white;
font-size: 14px;
font-weight: 400;
background-color: black;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
opacity: 0.7;
}
textarea {
resize: vertical;
}
::placeholder {
color: white;
}
button {
display: inline-block;
width: 100%;
margin-bottom: 25px;
padding: 10px 20px;
font-size: 17px;
background-color: #004800;
opacity: 0.7;
color: white;
border: 1px solid black;
border-radius: 4px;
cursor: pointer;
}
button:hover {
opacity: 1;
}
</style>
NO.5 コード（予約）
<box>
<form action="************************************">
<h3>お客様ご予約フォーム</h3> <!-- 文字の大きさ -->
<label>予約日:
<input type="date" name="entry.**********" required>
</label> <!-- requiredを入れると入力項目が必須となります -->
<label>予約時間:
<input type="time" name="entry.**********" required>
</label>
<label>予約人数:
<input type="number" name="entry.**********" required>
</label>
<label>名前（カタカナ）:
<input type="text" name="entry.**********" required>
</label>
<label>電話番号:
<input type="tel" name="entry.**********"required>
</label>
<label>ご質問など:
<textarea name="entry.**********" rows="4"></textarea>
</label>
<button type="submit">申し込む</button>
</form>
</box>
<style>
box {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: transparent; /* 外側の背景色 */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
form {
background-color: #ffffea; /* 内側の背景色 */
padding: 20px;
border: 1px solid green; /* 枠線の色 */
border-radius: 0px; /* 内側の角の丸み */
box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
margin: 10px 0;
}
h3 {
margin-top: 0px;
text-align: center;
font-weight: 400;
padding: 10px;
color: #fff; /* お客様ご予約フォームの文字色 */
background-color: green;
border-radius: 4px;
}
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: green; /* 申し込みボタンの色 */
font-size: 16px; /* 文字の大きさ */
color: #fff; /* ボタンの文字色 */
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
display: inline-block;
}
button:hover {
background-color: green; /* 申し込みボタンにカーソルを合わせた時の色 */
}
</style>
NO.6 コード（予約：希望席種選択）
<box>
<form action="************************************">
<h3>お客様ご予約フォーム</h3> <!-- 文字の大きさ -->
<label>希望席種:
<input type="radio" name="entry.**********" value="テーブル席" required>テーブル席
<input type="radio" name="entry.**********" value="座敷席">座敷席
<input type="radio" name="entry.**********" value="どちらでも">どちらでも
</label><br>
<label>予約日:
<input class="a" type="date" name="entry.**********" required>
</label> <!-- requiredを入れると入力項目が必須となります -->
<label>予約時間:
<input class="a" type="time" name="entry.**********" required>
</label>
<label>予約人数:
<input class="a" type="number" name="entry.**********" required>
</label>
<label>名前（カタカナ）:
<input class="a" type="text" name="entry.**********" required>
</label>
<label>電話番号:
<input class="a" class="a" type="tel" name="entry.**********"required>
</label>
<label>ご質問など:
<textarea name="entry.**********" rows="4"></textarea>
</label>
<button type="submit">申し込む</button>
</form>
</box>
<style>
box {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: transparent; /* 外側の背景色 */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
form {
background-color: #efffff; /* 内側の背景色 */
padding: 20px 30px;
border: none; /* 枠線の色 */
border-radius: 0px; /* 内側の角の丸み */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影の大きさ */
max-width: 400px;
width: 100%;
margin: 10px 0;
}
h3 {
margin-top: 0px;
text-align: center;
font-weight: 400;
padding: 10px;
color: #4169e1; /* お客様ご予約フォームの文字色 */
border: 1px solid #7f7fff;
background-color: transparent;
border-radius: 4px;
}
label {
display: block;
margin: 10px 0 5px;
font-weight: 400;
color: #555; /* フォーム内の文字色 */
}
.a, 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: #7f7fff; /* 申し込みボタンの色 */
font-size: 16px; /* 文字の大きさ */
color: #fff; /* ボタンの文字色 */
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
display: inline-block;
}
button:hover {
background-color: #4169e1; /* 申し込みボタンにカーソルを合わせた時の色 */
}
</style>
Google Sites
Report abuse