SolidJS + Astro SSR + GAS で静的サイトにフォームを実装する

PUBLIC_SITE_KEY=****************
SECRET_KEY=****************

const sendMail = (name, email, content) => {

  const subject = "お問い合わせを受け付けました";

  const body = `${name} 様\n以下の内容でお問い合わせを受け付けました。\n\n${content}`;

  const options = {
    name: "Your name",
  }

  GmailApp.sendEmail(email, subject, body, options);
};

const doPost = e => {
  // For Debug
  // const { name, email, content } = JSON.parse(e);
  // Logger.log(e);

  const { name, email, content } = JSON.parse(e.postData.contents);

  sendMail(name, email, content);

  const payload = JSON.stringify({
    method: "POST",
    message: "お問い合わせを受け付けました！",
  });
  return ContentService.createTextOutput(payload).setMimeType(ContentService.MimeType.JSON);
};

// For Debug
const doPostTest = () => {
  const payload = {
    name: "Test User",
    email: "[email protected]",
    content: "TEST TEST TEST",
  }

  doPost(JSON.stringify(payload));
}

import { createSignal } from "solid-js";

const ContactForm = () => {
  const [name, setName] = createSignal("");
	const [email, setEmail] = createSignal("");
	const [content, setContent] = createSignal("");
	const [isAgree, setIsAgree] = createSignal(false);
	const [recaptchaToken, setRecaptchaToken] = createSignal("");
	const [isSubmitting, setIsSubmitting] = createSignal(false);
	const [isOpen, setIsOpen] = createSignal(false);
	const [isSucsess, setIsSucsess] = createSignal(false);

  return (
    // ...
  );
}
export default ContactForm;

import { onMount, onCleanup } from "solid-js";

onMount(() => {
	const script = document.createElement("script");
	script.src = `https://www.google.com/recaptcha/api.js?render=${
		import.meta.env.PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY
	}`;

	script.async = true;
	document.head.appendChild(script);

	onCleanup(() => {
		if (script.parentNode) {
			script.parentNode.removeChild(script);
		}
	});
});

$ npm i -D @types/grecaptcha

const executeRecaptcha = async () => {
	try {
		const token = await window.grecaptcha.execute(
			import.meta.env.PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY,
			{
				action: "submit",
			}
		);
		setRecaptchaToken(token);
	} catch (error) {
		console.error("reCAPTCHA error:", error);
	}
};

	// フォーム送信処理
const handleSubmit = async (e: SubmitEvent) => {
	e.preventDefault();
	setIsSubmitting(true);

	// reCAPTCHA を実行してトークンを取得
	await executeRecaptcha();

	// サーバーへの送信処理
	const response = await fetch("/api/contact", {
		method: "POST",
		headers: {
			"Content-Type": "application/json",
		},
		body: JSON.stringify({
			name: name(),
			email: email(),
			content: content(),
			recaptchaToken: recaptchaToken(),
		}),
	});

	if (response.ok) {
		setName("");
		setEmail("");
		setContent("");
		setIsAgree(false);
		setIsSucsess(true);
	} else {
		setIsAgree(false);
		setIsSucsess(false);
	}

	setIsSubmitting(false);
	setIsOpen(true);
	setTimeout(() => setIsOpen(false), 10000);
};

<>
	<form class="mx-auto w-full flex flex-col gap-6" onSubmit={handleSubmit}>
		<div class="flex flex-col gap-2">
			<label for="contact-name">
				<span>お名前</span>
				<span class="text-red-500"> *</span>
			</label>
			<input
				class="rounded-lg p-2 focus:ring-0 focus:outline-blue-500 focus:outline-2"
				type="text"
				id="contact-name"
				value={name()}
				onInput={(e) => setName(e.target.value)}
				required
			/>
		</div>
		<div class="flex flex-col gap-2">
			<label for="contact-email">
				<span>メールアドレス</span>
				<span class="text-red-500"> *</span>
			</label>
			<input
				class="rounded-lg p-2 focus:ring-0 focus:outline-blue-500 focus:outline-2"
				type="email"
				id="contact-email"
				value={email()}
				onInput={(e) => setEmail(e.target.value)}
				required
			/>
		</div>
		<div class="flex flex-col gap-2">
			<label for="contact-content">
				<span>お問い合わせ内容</span>
				<span class="text-red-500"> *</span>
			</label>
			<textarea
				class="resize-none rounded-lg p-2 focus:ring-0 focus:outline-blue-500 focus:outline-2"
				id="contact-content"
				value={content()}
				onInput={(e) => setContent(e.target.value)}
				required
				rows={10}
			/>
		</div>

		<div class="mx-auto flex items-center">
			<input
				id="contact-checkbox"
				type="checkbox"
				checked={isAgree()}
				onInput={(e) => setIsAgree(e.target.checked)}
				class="w-4 h-4 rounded focus:ring-blue-500 focus:ring-2"
				required
			/>
			<label for="contact-checkbox" class="ms-2 text-sm font-medium">
				<a
					href="/privacy-policy"
					target="_blank"
					rel="noopener noreferrer"
					class="text-blue-500 visited:text-purple-500 hover:underline"
				>
					プライバシーポリシー↗
				</a>{" "}
				に同意する
			</label>
		</div>

		<div class="mx-auto">
			<button
				class="w-40 flex items-center justify-center font-bold bg-gradient-to-r from-accent-sub-base to-accent-base px-4 py-2 rounded-lg"
				type="submit"
			>
				{isSubmitting() ? (
					<span class="flex items-center gap-2">
						<span>送信中...</span>
					</span>
				) : (
					<span class="flex items-center gap-2">
						<span>送信する</span>
					</span>
				)}
			</button>
		</div>
	</form>
	<Portal mount={document.body}>
		<Show when={isOpen()}>
			<div
				class={`w-full z-[100] fixed bottom-0 left-0 ${
					isSucsess() ? "bg-green-600" : "bg-red-600"
				} } p-4`}
			>
				<button type="button" onClick={() => setIsOpen(false)} class="absolute top-2 right-2">×</button>
				<div class="text-center flex flex-col gap-2">
					<div>
						{isSucsess() ? "お問い合わせを受け付けました" : "送信に失敗しました"}
					</div>
					<div>
						{isSucsess()
							? "メールボックスをご確認ください。"
							: "お手数ですが、もう一度お試しください。"}
					</div>
				</div>
			</div>
		</Show>
	</Portal>
</>

$ npm astro add cloudflare

import cloudflare from "@astrojs/cloudflare";

export default defineConfig({
  // ...
  output: "hybrid",
  adapter: cloudflare(),
})

export const prerender = false;

import type { APIRoute } from "astro";

export const POST: APIRoute = async ({ request }) => {
  const { name, email, content, recaptchaToken } = await request.json();

  // reCAPTCHA リクエストボディ
  const recaptchaRequestBody = new URLSearchParams({
    secret: import.meta.env.SECRET_KEY,
    response: recaptchaToken
  });

  // reCAPTCHA へのリクエスト
   const recaptchaResponse = await fetch("https://www.google.com/recaptcha/api/siteverify", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded"
    },
    body: recaptchaRequestBody.toString()
  });

  const recaptchaResponseData = await recaptchaResponse.json();

  if (recaptchaResponseData.success) {
    // reCAPTCHA 検証成功
    // GAS へのリクエスト
    const response = await fetch(import.meta.env.GOOGLE_APPS_SCRIPT_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name,
        email,
        content,
      }),
    });

    const responseData = await response.json();

    if (responseData.error) {
      // GAS リクエスト失敗
      return new Response(null, { status: 400 });
    }

    // GAS リクエスト成功
    return new Response(JSON.stringify(responseData), {
      headers: {
        "Content-Type": "application/json"
      },
      status: 200
    });
  }

  // reCAPTCHA 検証失敗
  return new Response(null, { status: 400 });
}