Embedded Files
掲示板投稿・質問受付・予約の各フォームを用意しました（適当にコードを修正してお使いください）
予約フォームは「カスタムフォーム紐付」にもあります
オリジナルのGoogleフォームのデザインは「どうもな〜」という方はお使い下さい。
[フォームの使い方]
下記フォームに合わせた Googleフォームの作成 ➡ 下記フォームとGoogleフォームとの紐付け
Googleフォームとの紐付方法については「カスタムフォーム紐付」をご覧ください。
右（下）のGoogleフォームを作成し、こちらに紐付けます
（必ず質問の数をそろえます）
NO.1（タイトルなし）
NO.2（タイトルあり）
NO.3（質問受け付け用）
NO.5（メールアドレス入力欄なし）
NO.6（（希望席種選択あり）
Googleフォームとの紐付方法については「カスタムフォーム紐付」をご覧ください。
Googleフォームとの紐付けに必要な箇所（*****部分）を入力してお使い下さい ▼
NO.1 コード（掲示板：タイトルなし）
<div class="box">
<form action="********************">
<h2>○○○ 掲示板</h2>
<label for="name">名前：（必須）</label>
<input type="text" id="name" class="name" name="entry.**********" placeholder="ハンドルネーム（ニックネーム）" required>
<label for="comment">コメント：（必須）</label>
<textarea id="comment" name="entry.**********" rows="4" placeholder="枠の右下ドラッグで、入力欄を大きくできます" required></textarea>
<button type="submit">送信</button>
</form>
</div>
<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: 0;
text-align: center;
background-color: white;
padding: 5px 20px;
border: 1px solid gray;
border-radius: 0;
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 5px;
}
.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 コード（掲示板：タイトルあり)
<div class="box">
<form action="********************">
<h2>○○○ 掲示板</h2>
<label for="title">タイトル</label>
<input type="text" id="title" class="title" name="entry.**********" placeholder="タイトル">
<label for="name">ハンドルネーム</label>
<input type="text" id="name" class="name" name="entry.**********" placeholder="ハンドルネーム" required>
<label for="comment">コメント</label>
<textarea id="comment" name="entry.**********" rows="4" placeholder="コメント（枠の右下ドラッグで、入力欄を大きくできます）" required></textarea>
<button type="submit">投稿</button>
</form>
</div>
<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: 0;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #696969;
margin-bottom: 35px;
}
label {
display: block;
margin: 15px 0 5px;
text-align: left; /* ←入力欄の説明が左揃えになり自然 */
}
.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>
NO.3 コード（質問受付）
<div class="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>
</div>
<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 コード（掲示板：背景画像）
<div class="box">
<form action="********************" autocomplete="off"> <!-- オートコンプリートをOFFにしています -->
<h2>○○○ 掲示板</h2>
<label for="title">タイトル</label>
<input type="text" id="title" class="title" name="entry.**********">
<label for="name">ハンドルネーム</label>
<input type="text" id="name" class="name" name="entry.**********" placeholder="必須" required>
<label for="comment">コメント</label>
<textarea id="comment" name="entry.**********" rows="4" placeholder="必須" required></textarea>
<button type="submit">投稿</button>
</form>
</div>
<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 コード（予約）
<div class="box">
<form action="************************************" method="post">
<h3>お客様ご予約フォーム</h3>
<label for="date">予約日:</label>
<input type="date" id="date" name="entry.**********" required>
<label for="time">予約時間:</label>
<input type="time" id="time" name="entry.**********" required>
<label for="number">予約人数:</label>
<input type="number" id="number" name="entry.**********" min="1" required>
<label for="name">名前（カタカナ）:</label>
<input type="text" id="name" name="entry.**********" pattern="[\u30A0-\u30FFー\s]+" title="カタカナで入力してください" required>
<label for="tel">電話番号:</label>
<input type="tel" id="tel" name="entry.**********" pattern="0\d{1,4}-\d{1,4}-\d{3,4}" title="例: 090-1234-5678" required>
<label for="question">ご質問など:</label>
<textarea id="question" name="entry.**********" rows="4"></textarea>
<button type="submit">申し込む</button>
</form>
</div>
<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: 4px; /* 内側の角の丸み */
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
margin: 10px 0;
}
h3 {
margin-top: 0;
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%;
}
button:hover {
background-color: #006400;
}
</style>
NO.6 コード（予約：希望席種選択）
<div class="box">
<form action="************************************">
<h3>お客様ご予約フォーム</h3>
<fieldset>
<legend>希望席種:</legend>
<label for="seat1"><input type="radio" id="seat1" name="entry.**********" value="テーブル席" required> テーブル席</label>
<label for="seat2"><input type="radio" id="seat2" name="entry.**********" value="座敷席"> 座敷席</label>
<label for="seat3"><input type="radio" id="seat3" name="entry.**********" value="どちらでも"> どちらでも</label>
</fieldset>
<label for="date">予約日:</label>
<input class="a" id="date" type="date" name="entry.**********" required>
<label for="time">予約時間:</label>
<input class="a" id="time" type="time" name="entry.**********" required>
<label for="number">予約人数:</label>
<input class="a" id="number" type="number" name="entry.**********" min="1" required>
<label for="name">名前（カタカナ）:</label>
<input class="a" id="name" type="text" name="entry.**********" pattern="[\u30A0-\u30FF\s]*" title="カタカナで入力してください" required>
<label for="tel">電話番号:</label>
<input class="a" id="tel" type="tel" name="entry.**********" pattern="[0-9]{2,4}-?[0-9]{2,4}-?[0-9]{3,4}" title="電話番号を正しく入力してください" required>
<label for="question">ご質問など:</label>
<textarea id="question" name="entry.**********" rows="4"></textarea>
<button type="submit">申し込む</button>
</form>
</div>
<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;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
margin: 10px 0;
border-radius: 6px;
}
h3 {
margin-top: 0;
text-align: center;
font-weight: 400;
padding: 10px;
color: #4169e1;
border: 1px solid #7f7fff;
border-radius: 4px;
}
fieldset {
border: none;
margin: 10px 0;
padding: 0;
}
legend {
font-weight: 400;
color: #555;
margin-bottom: 5px;
}
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%;
}
button:hover {
background-color: #4169e1;
}
</style>
Google Sites
Report abuse