Embedded Files
シークレットページへのアクセス許可を得るため、パスワードおよびユーザーIDの発行を閲覧者が管理者のメールアドレスへ要求するフォームです
架空のメールアドレスで、お試しください ▼
受信側メッセージ
作成方法
コード.gs
function doPost(e) {
try {
const data = JSON.parse(e.postData.contents);
const to = "example@gmail.com"; // ← 送信先メールアドレスを指定
const subject = "フォーム送信通知";
const body = `以下の内容が送信されました：
メールアドレス: ${data.email}
パスワード発行希望: ${data.pass}
ユーザーID発行希望: ${data.user}
同意: ${data.agree ? "あり" : "なし"}
`;
MailApp.sendEmail(to, subject, body);
// 成功レスポンス + CORS対応
return ContentService.createTextOutput(JSON.stringify({ status: "success" }))
.setMimeType(ContentService.MimeType.JSON)
.setHeader("Access-Control-Allow-Origin", "*");
} catch (err) {
return ContentService.createTextOutput(JSON.stringify({ status: "error", message: err.message }))
.setMimeType(ContentService.MimeType.JSON)
.setHeader("Access-Control-Allow-Origin", "*");
}
}
// OPTIONSメソッド対応（必要に応じて）
function doOptions(e) {
return ContentService.createTextOutput("")
.setMimeType(ContentService.MimeType.JSON)
.setHeader("Access-Control-Allow-Origin", "*")
.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS")
.setHeader("Access-Control-Allow-Headers", "Content-Type");
}
②以下のコードをGoogleサイトの埋め込みコードに埋め込みます。
xxxxxxxxxx に ①でデプロイしたGoogle Apps Script WebアプリURLをペースト
埋め込みコード
<p>規約：</p>
<p>＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊<br>
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊</p>
<form class="my-form">
<div>
<input id="check-1" type="checkbox" />
<label for="check-1">上記規約に同意する</label>
</div>
<div>
<input checked id="check-2" type="checkbox" />
<label for="check-2">パスワードの発行を希望する</label>
</div>
<div>
<input id="check-3" type="checkbox" />
<label for="check-3">ユーザーIDの発行を希望する</label>
</div>
<!-- メール入力欄 -->
<div class="email-row">
<div class="check-label">
<input id="check-4" type="checkbox" />
<label for="check-4">メールアドレスを入力</label>
</div>
<input type="email" id="email" placeholder="example@gmail.com" disabled>
</div>
<!-- ボタンとメッセージ -->
<div>
<button id="sendBtn"><span>送信</span></button>
<div id="message"></div>
</div>
</form>
<style>
/* 親フォーム */
.my-form {
width: 100%;
border: 1px solid black;
text-align: left;
font-family: sans-serif;
--_clr-primary: #666;
--_clr-hover: #f33195;
--_clr-checked: #127acf;
}
/* チェックボックス共通 */
.my-form > div {
--_clr-current: var(--_clr-primary);
display: flex;
align-items: center;
gap: 0.5rem;
margin-block-start: 0.5rem;
}
.my-form label {
cursor: pointer;
color: var(--_clr-current);
transition: color 150ms ease-in-out;
}
.my-form input[type="checkbox"] {
appearance: none;
outline: none;
width: 1.5rem;
height: 1.5rem;
aspect-ratio: 1;
padding: 0.25rem;
background: transparent;
border: 1px solid var(--_clr-current);
border-radius: 2px;
display: grid;
place-content: center;
cursor: pointer;
}
.my-form input[type="checkbox"]::after {
content: "\2714";
opacity: 0;
transition: opacity 150ms ease-in-out;
color: var(--_clr-checked);
font-size: inherit;
font-family: inherit;
}
.my-form input[type="checkbox"]:checked::after {
opacity: 1;
}
.my-form label:hover,
.my-form input[type="checkbox"]:focus-visible,
.my-form input[type="checkbox"]:focus-visible + label,
.my-form input[type="checkbox"]:hover,
.my-form input[type="checkbox"]:hover + label {
--_clr-current: var(--_clr-hover);
}
.my-form input[type="checkbox"]:focus-visible::after,
.my-form input[type="checkbox"]:hover::after {
opacity: 0.5;
color: var(--_clr-hover);
}
.my-form input[type="checkbox"]:checked + label:not(:hover),
.my-form input[type="checkbox"]:checked:not(:hover) {
--_clr-current: var(--_clr-checked);
}
/* メール入力欄 */
.email-row {
display: flex;
flex-direction: column; /* 縦並び固定 */
align-items: flex-start;
margin-block-start: 0.5rem;
margin-bottom: 15px;
padding-left: 0;
width: 100%;
}
.email-row .check-label {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
width: 100%;
}
#email {
border: none;
border-bottom: 1px solid #666;
outline: none;
padding: 4px;
width: 100%;
}
/* スマホ表示 */
@media screen and (max-width: 600px) {
.email-row {
flex-wrap: wrap;
align-items: flex-start;
}
.email-row #email {
margin-left: 0;
margin-top: 4px;
}
}
button {
display: flex;
justify-content: center;
align-items: center;
width: 160px;
background-image: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
border: none;
border-radius: 2px;
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
padding: 4px 0px;
margin: 0px 0px 10px 3px;
font-size: 3.1vw;
line-height: 1em;
color: #fff;
cursor: pointer;
transition: all 0.3s;
box-sizing: border-box;
}
button span {
display: inline-block;
width: 100%;
text-align: center;
background-color: rgb(5, 6, 45);
padding: 6px 12px;
border-radius: 0px;
transition: 300ms;
white-space: nowrap;
}
button:hover span {
background: none;
}
button:active {
transform: scale(0.9);
}
/* メッセージ */
#message {
margin-top: -12px;
font-size: 3vw;
color: red;
text-align: left;
width: 100%;
}
</style>
<script>
const GAS_URL = "xxxxxxxxxx"; // Google Apps Script WebアプリURLをペースト
const check1 = document.getElementById("check-1");
const check2 = document.getElementById("check-2");
const check3 = document.getElementById("check-3");
const check4 = document.getElementById("check-4");
const emailInput = document.getElementById("email");
const sendBtn = document.getElementById("sendBtn");
const msg = document.getElementById("message");
// メール欄の有効/無効切替
check4.addEventListener("change", () => {
emailInput.disabled = !check4.checked;
if (!check4.checked) emailInput.value = "";
});
// 送信ボタン
sendBtn.addEventListener("click", async (e) => {
e.preventDefault();
msg.textContent = "";
msg.style.color = "red";
// バリデーション
if (!check1.checked || !check2.checked || !check4.checked) {
msg.textContent = "✓ が不十分です。";
return;
}
if (!emailInput.value) {
msg.textContent = "メールアドレスを入力してください。";
return;
}
const payload = {
email: emailInput.value,
pass: check2.checked ? "希望する" : "希望しない",
user: check3.checked ? "希望する" : "希望しない",
agree: check1.checked,
};
const span = sendBtn.querySelector("span");
span.textContent = "送信中...";
try {
await fetch(GAS_URL, {
method: "POST",
mode: "no-cors",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload),
});
span.textContent = "送信しました";
msg.style.color = "green";
msg.textContent = "";
} catch (err) {
span.textContent = "送信";
msg.style.color = "red";
msg.textContent = "送信中にエラーが発生しました。";
console.error(err);
}
setTimeout(() => {
span.textContent = "送信";
}, 3000);
});
</script>
Google Sites
Report abuse