NewtとSvelteKitを利用して、問い合わせフォームを作成する

.env

1PUBLIC_NEWT_FORM_ENDPOINT=https://xxxxxx.form.newt.so/v1/xxxxxx

src/routes/contact/+page.svelte

1<script lang="ts">
2  import { PUBLIC_NEWT_FORM_ENDPOINT } from '$env/static/public'
3</script>
4
5<svelte:head>
6  <title>Newt・SvelteKitフォーム</title>
7  <meta name="description" content="NewtとSvelteKitを利用した問い合わせフォームです" />
8</svelte:head>
9
10<div>
11  <h1>Contact us</h1>
12  <form action={PUBLIC_NEWT_FORM_ENDPOINT} method="post">
13    <label for="name">Name</label>
14    <input id="name" name="name" />
15    <label for="email">Email</label>
16    <input id="email" name="email" type="email" />
17    <label for="message">Message</label>
18    <textarea id="message" name="message" />
19    <button type="submit">Submit</button>
20  </form>
21</div>

src/routes/contact/+page.svelte

1<script lang="ts">
2  import { PUBLIC_NEWT_FORM_ENDPOINT } from '$env/static/public'
3  import { createForm } from 'felte'
4
5  type FormValues = {
6    name: string
7    email: string
8    message: string
9  }
10
11  const { form, errors } = createForm<FormValues>({
12    validate: (values) => {
13      const errors: Record<string, string> = {}
14      if (!values.name) {
15        errors.name = 'Name is required'
16      }
17      return errors
18    },
19    onSubmit: async (values) => {
20      const formData = new FormData()
21      Object.entries(values).forEach(([key, value]) => {
22        formData.append(key, value)
23      })
24
25      await fetch(PUBLIC_NEWT_FORM_ENDPOINT, {
26        method: 'POST',
27        body: formData,
28        headers: {
29          Accept: 'application/json'
30        }
31      })
32    }
33  })
34</script>
35
36<svelte:head>
37  <title>Newt・SvelteKitフォーム</title>
38  <meta name="description" content="NewtとSvelteKitを利用した問い合わせフォームです" />
39</svelte:head>
40
41<div>
42  <h1>Contact us</h1>
43  <form use:form>
44    <label for="name">Name*</label>
45    <input id="name" name="name" aria-describedby="error-name-required" />
46    {#if $errors.name}
47      <span id="error-name-required" aria-live="assertive">
48        {$errors.name}
49      </span>
50    {/if}
51    <label for="email">Email</label>
52    <input id="email" name="email" type="email" />
53    <label for="message">Message</label>
54    <textarea id="message" name="message" />
55    <button type="submit">Submit</button>
56  </form>
57</div>

.env

1PUBLIC_NEWT_FORM_ENDPOINT=https://xxxxxx.form.newt.so/v1/xxxxxx
2PUBLIC_RECAPTCHA_SITE_KEY=xxxx

src/routes/contact/+page.svelte

1<script lang="ts">
2  import { PUBLIC_NEWT_FORM_ENDPOINT, PUBLIC_RECAPTCHA_SITE_KEY } from '$env/static/public'
3  import { createForm } from 'felte'
4
5  type FormValues = {
6    name: string
7    email: string
8    message: string
9    googleReCaptchaToken: string
10  }
11
12  const { form, errors } = createForm<FormValues>({
13    validate: (values) => {
14      const errors: Record<string, string> = {}
15      if (!values.name) {
16        errors.name = 'Name is required'
17      }
18      return errors
19    },
20    onSubmit: async (values) => {
21      grecaptcha.ready(() => {
22        grecaptcha
23          .execute(PUBLIC_RECAPTCHA_SITE_KEY, { action: 'submit' })
24          .then(async (token) => {
25            values.googleReCaptchaToken = token
26
27            const formData = new FormData()
28            Object.entries(values).forEach(([key, value]) => {
29              formData.append(key, value)
30            })
31
32            await sendRequest(formData)
33          })
34      })
35
36      const sendRequest = async (formData: FormData) => {
37        await fetch(PUBLIC_NEWT_FORM_ENDPOINT, {
38          method: 'POST',
39          body: formData,
40          headers: {
41            Accept: 'application/json'
42          }
43        })
44      }
45    }
46  })
47</script>
48
49<svelte:head>
50  <title>Newt・SvelteKitフォーム</title>
51  <meta name="description" content="NewtとSvelteKitを利用した問い合わせフォームです" />
52  <script
53    src="https://www.google.com/recaptcha/api.js?render={PUBLIC_RECAPTCHA_SITE_KEY}&hl=ja"
54    async
55    defer
56  ></script>
57</svelte:head>
58
59<div>
60  <h1>Contact us</h1>
61  <form use:form>
62    <label for="name">Name*</label>
63    <input id="name" name="name" aria-describedby="error-name-required" />
64    {#if $errors.name}
65      <span id="error-name-required" aria-live="assertive">
66        {$errors.name}
67      </span>
68    {/if}
69    <label for="email">Email</label>
70    <input id="email" name="email" type="email" />
71    <label for="message">Message</label>
72    <textarea id="message" name="message" />
73    <button type="submit">Submit</button>
74  </form>
75</div>

src/routes/thanks/+page.svelte

1<svelte:head>
2  <title>Thank you</title>
3  <meta name="description" content="問い合わせの送信が成功しました" />
4</svelte:head>
5
6<div class="Result">
7  <h1>Thank you!</h1>
8  <div>
9    <a href="/contact">Back to Previous Page</a>
10  </div>
11</div>

src/routes/error/+page.svelte

1<svelte:head>
2  <title>Error</title>
3  <meta name="description" content="問い合わせの送信が失敗しました" />
4</svelte:head>
5
6<div class="Result">
7  <h1>Error!</h1>
8  <div>
9    <a href="/contact">Back to Previous Page</a>
10  </div>
11</div>

src/routes/contact/+page.svelte

1  import { goto } from '$app/navigation'
2  import { PUBLIC_NEWT_FORM_ENDPOINT, PUBLIC_RECAPTCHA_SITE_KEY } from '$env/static/public'
3  import { createForm } from 'felte'
4
5（省略）
6
7    onSubmit: async (values) => {
8      grecaptcha.ready(() => {
9        grecaptcha
10          .execute(PUBLIC_RECAPTCHA_SITE_KEY, { action: 'submit' })
11          .then(async (token) => {
12            values.googleReCaptchaToken = token
13
14            const formData = new FormData()
15            Object.entries(values).forEach(([key, value]) => {
16              formData.append(key, value)
17            })
18
19            await sendRequest(formData)
20            try {
21              const response = await sendRequest(formData)
22              if (response.ok) {
23                goto('/thanks')
24              } else {
25                goto('/error')
26              }
27            } catch (err) {
28              goto('/error')
29            }
30          })
31      })
32
33（省略）