今回は、Netlify Formsで「お問い合わせ」を作る方法を解説していきます。
Netlify Formsを使用すると簡単に素早く、お問い合わせを作ることができます。

前提として、[Netlify](https://www.netlify.com/)にサイトをホスティングしている必要があります。Netlifyにデプロイする際に、Netilify BuildがHTMLを解析し、機能を追加してくれます。
\
Netlify Formsのドキュメントは、[Forms setup](https://docs.netlify.com/forms/setup/#html-forms)から確認できます。

それでは、解説していきます。

## 2枚のHTMLを用意する

- 入力フォームのHTML
- 送信後に遷移するHTML

を用意します。
\
例として、`/contact/index.vue`と`/contact/success.vue`というVueファイルを作成しました。

```bash
├── contact
│   ├── index.vue
│   └── success.vue
```

`/contact/index.vue`のPOSTメソッドでNetlify Formsにリクエストを送信した後に、`/contact/success.vue`に遷移するように設定していきます。

## 入力フォームの作成

`index.vue`に以下のようなHTMLを追記します。

```html
<form name="contact" method="POST" data-netlify="true" data-netlify-honeypot="bot-field" action="/contact/success">
  <input type="hidden" name="form-name" value="contact" />
  <input id="name" name="name" type="text" />
  <input id="email" name="email" type="email"/>
  <textarea id="message" name="message" />
  <button type="submit">送信</button>
</form>
```

`<form>`に、`data-netlify="true"`属性を追加すると、Netlifyが解析時にNetlify Formsを使用することを理解してくれます。
\
また、`action`属性で、送信後に遷移するHTMLを指定できます。
ここでは、先ほど作った`/contact/success`を指定しています。
\
`/contact/success`は送信したことを明示できるUIがいいでしょう。

## 送信されたテキストを確認する

送信されたフォームは、NetlifyのSite overviewから確認することができます。
※無効のメールアドレスの場合、フォームは送信されません。

![Netlify Forms](//images.ctfassets.net/0jyj5pjwic68/66zJL5bBPJIcqg2gIUjS3R/49393a1e40b5bb7f08224aeb3b06b9b1/Netlify_Forms.png)

## メールアドレスに通知されるように設定する

Netlify Formsに送信されたフォームは、Slackやメールアドレスに送信することができます。

![Forms Notification](//images.ctfassets.net/0jyj5pjwic68/6wPPdCBFhpbJbBdhvaqrCo/28bde96ca225df36a29b7244b2fcd98f/____________________________2020-11-01_19.18.26.png)

個人で開発しているのであればメールアドレスに、組織で開発しているのであればSlackが良いかもしれません。

今回は、Netlify Formsで「お問い合わせ」を作る方法を解説していきます。
Netlify Formsを使用すると簡単に素早く、お問い合わせを作ることができます。

Netlify

Netlify Formsでお問い合わせを作る方法

<p>今回は、Netlify Formsで「お問い合わせ」を作る方法を解説していきます。
Netlify Formsを使用すると簡単に素早く、お問い合わせを作ることができます。</p>
<p>前提として、<a href="https://w...

## 前提
- Googleドメインを取得していること
- Apexドメインを使用すること
- Netlifyにサイトをデプロイしていること

## ステップ１ Googleで取得したドメインを設定する

![Netlify-GoogleDomains01](//images.contentful.com/0jyj5pjwic68/1l1HnWdB0ebM3zeWfrvPoU/fbe3ce5058e344bf41f5a5347ea3ba3f/Netlify-GoogleDomains01.png)

## ステップ2 Netlify の Name servers を設定する

Netlify の Name Serversを、Google Domains の 「DNS」→「カスタム」タブから追加し、設定を反映させる。

![Netlify-GoogleDomains02](//images.contentful.com/0jyj5pjwic68/3hSDikOwdSLwKDiGJU2hx4/df19505fee58da3ec1dc3c4de10ec49a/Netlify-GoogleDomains02.png)

### Google側

![Netlify-GoogleDomains03](//images.contentful.com/0jyj5pjwic68/3UOMPCV80N1et7mWpW3Otn/9fc6dc782fa2cc5cabadd3f6e5600d13/Netlify-GoogleDomains03.png)

ここまで設定すると、任意のドメインがNetlifyに設定され、サイトを閲覧できるようになる。

## ステップ3 リソースレコードの追加

SSL化するために、リソースレコードの追加する必要がありそうだったので、追加した。

|ホスト名|タイプ|TTL|データ|
|---|---|---|---|
|example.com|A|1時間|104.198.14.52|
|www.example.com|CNAME|1時間|example.com|

## 注意事項
- 内部的にLetsEncryptを使っていて、LetsEncryptは１日5回,1週間に20回という制限があるので、複数回SSL化を実行していると、24時間以上待つ必要があります。


GoogleドメインをNetlifyに設定する

Nuxt.jsとNetlify Functionsで構成しています。
\
開発環境(ローカル)は、以下のポートを使っています。

- `localhost:4000`: アプリ(NuxtJS)
- `localhost:9001`: API(Netlify Functions)

## 決済のコンポーネント

`nuxt.config.js`でstripeをCDNで読み込む。

```js
export default {
  head: {
    script: [{ src: "https://js.stripe.com/v3/" },],
  },
}
```

決済のコンポーネントを作る。

```js
<template>
  <div>
    <div id="card-element" />
    <p>{{ `${price}`¥ }}</p>
    <button @click="submit">送る</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      card: null,
      stripe: [],
      stripeAPIToken: process.env.STRIPE_PUBLIC_KEY,
      price: "500",
    }
  },

  mounted() {
    this.stripe = Stripe(this.stripeAPIToken)
    const elements = this.stripe.elements()
    this.card = elements.create("card", {
      hidePostalCode: true,
    })
    this.card.mount("#card-element")
  },

  methods: {
    async submit() {
      try {
        // ここでStripeにカード情報(決済情報)を送り、トークンを受け取る。
        const tokenResult = await this.stripe.createToken(this.card)

        if (
          !tokenResult.token ||
          !tokenResult.token.id ||
          tokenResult.token.id === ""
        ) {
          throw new Error("トークン発行エラー")
        }

        // APIサーバにリクエストを送り、決済を行う。
        const chargeResult = await this.$axios.post("http://localhost:9001/.netlify/functions/support", {
          token: tokenResult.token.id,
          price: Number(this.price),
        })

        if (!chargeResult || chargeResult.data !== "NORMAL") {
          throw new Error("決済エラー")
        }

      } catch (error) {
        this.error = error
      }
    },
  },
}
</script>
```

※Stripe Elementsは、httpsでないといけません。
※本人確認をしないと、入金を引き落とすことはできません。
※開発環境と本番環境をうまく分けれないか思案中

## Netlify Functions

```bash
yarn add stripe
```

`functions/support.js`

```js
require("dotenv").config()

exports.handler = async function (event) {
  const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY)

  let result = false

  try {
    const data = JSON.parse(event.body)
    const res = await stripe.charges.create({
      amount: Number(data.price), // 値段
      currency: "jpy", // 通貨
      source: data.token, // トークン
    })
    if (res && res.status === "succeeded") {
      result = true
    }
  } catch (error) {
    console.log(error.message)
  }

  const headers = {
    "Access-Control-Allow-Origin": "http://localhost:4000", // 適宜変更して下さい。
    "Access-Control-Allow-Headers": "Content-Type",
  }

  return {
    statusCode: 200,
    headers,
    body: result ? "NORMAL" : "ERROR",
  }
}
```

ローカル起動

```bash
yarn run serve --port=9001
```

※Stripeの決済は、サーバサイドでないと実行できません。
※ローカルでテストする場合は、`netlify-cli`をインストールしておいてください。

## 終わり

- サブスクリプション
- 従量課金
- シンプルな購入
- 支払い方法の変更

などStripeの活躍する場は、たくさんありそうです。直近作りたいアプリなどがないのですが、使い方を知っておくとすぐに戦力になりそうなので、全部やってみたいと思います。

Netlify FunctionsとStripeでサポート機能(charge)を作る

Nuxt.js(SSG)で構成されたプロジェクトにNetlify Functionsを統合していきます。

## ディレクトリ構成

` netlify-lambda`をインストールします。

```bash
yarn add netlify-lambda
```

サーバレス関数を置くディレクトリを作ります。

```bash
mkdir functions
```

その配下に、`hello.js`というファイルを作ります。

```bash
touch functions/hello.js
```

netlifyの構成ファイルを作ります。

```bash
touch netlify.toml 
```

```bash
.
├── functions/hello.js
├── netlify.toml
├── nuxt.config.js
├── package.json
└── yarn.lock
```

## コード

`hello.js`

```js
exports.handler = async (event, context) => {
  return {
    statusCode: 200,
    body: "Hello, World"
  }
}
```

`package.json`

```json
{
  "scripts": {
    "serve": "netlify-lambda serve functions/",
  }
}
```

`netlify.toml`

```js
[build]
  Command = "netlify-lambda build functions/ && nuxt generate --modern=server"
  functions = "functions/dist"
  publish = "dist"
```

※Netlify Functionsは`{TARGET}/dist`にデプロイされます。
\
`https://{DOMAIN}/.netlify/functions/hello`にデプロイされます。

## ローカル開発

ローカルで起動する。

```bash
 yarn run serve --port=9001
 ```

` http://localhost:9001/.netlify/functions/hello`から実行できます。

## 資料
- [netlify/netlify-lambda](https://github.com/netlify/netlify-lambda)
- [Netlify Functions](https://www.netlify.com/products/functions/)
- [Functions overview](https://docs.netlify.com/functions/overview/)

Netlify Formsでお問い合わせを作る方法

2枚のHTMLを用意する

入力フォームの作成

送信されたテキストを確認する

メールアドレスに通知されるように設定する

Related

Tags

Share

Table of Contents