メール送信

1import React from 'react';
2import { useForm } from 'react-hook-form';
3
4type FormData = {
5  to: string;
6  name: string;
7};
8
9const Mail = () => {
10  const { handleSubmit, register } = useForm<FormData>();
11
12  const submit = (data: FormData) => {
13    fetch('/api/send-mail', {
14      method: 'POST',
15      headers: {
16        'Content-Type': 'application/json',
17      },
18      body: JSON.stringify(data),
19    })
20      .then((response) => response.text())
21      .then((message) => alert(message));
22  };
23
24  return (
25    <form onSubmit={handleSubmit(submit)}>
26      <label>
27        <span className="block">送信先</span>
28        <input
29          {...register('to', {
30            required: true,
31          })}
32          type="email"
33          autoComplete="email"
34          required
35          className="bg-transparent rounded border mt-1"
36        />
37      </label>
38      <p className="mb-4 text-sm mt-2">
39        必ず自分が所有するメールアドレスにしてください。あるいは
40        <a
41          href="https://relay.firefox.com/accounts/profile/"
42          target="_blank"
43          rel="noreferrer"
44          className="text-pink-600"
45        >
46          テスト用のアドレスを作成
47        </a>
48        してください。
49      </p>
50      <label>
51        <span className="block">名前</span>
52        <input
53          {...register('name', {
54            required: true,
55          })}
56          type="text"
57          autoComplete="name"
58          className="bg-transparent rounded border mt-1"
59          required
60        />
61      </label>
62      <button className="block mt-6 w-max px-4 py-2 rounded border">
63        送信
64      </button>
65
66      <div className="opacity-60 pt-6 border-t mt-10">
67        <ul className="list-disc list-inside text-sm leading-relaxed">
68          <li>
69            メールアドレスはデモメール送信のみに使用するため、Flockからお知らせを送ったりFlockのデータベースに記録されることはありません。
70          </li>
71          <li>
72            このデモではSendGridのフリープランが使われているため制限に達してメールが送信できない場合があります。
73          </li>
74          <li>
75            使い捨てメールアドレスなど受け取るメーラーによってはHTMLメールが正しく表示できないことがあります。
76          </li>
77          <li>迷惑メールに入っていることがあります。</li>
78        </ul>
79      </div>
80    </form>
81  );
82};
83
84export default Mail;