Reactを『なんとなく』は書ける人が、2日で自信を持って使えるようになる新刊書リリース【React初級〜中級者向け】くわしくはコチラ

Gatsbyサイトにメルマガ登録フォームを設置する方法

pen-icon 2021.02.17 rewrite-icon 2021.10.08

この記事は約4分で読めます

メールアドレス登録フォームを静的サイトに設置する

先日、メールアドレスと名前を入力して送信すると自動でダウンロードリンク付きのメールが送られる、いわゆるユーザー登録フォームを既存サイトに設置しました。

登録してもらったメールアドレス宛てに特典を送ったり、メルマガを送ったりするのをよく目にする機能です。

この仕組みを作るには通常バックエンドのサーバーが必要となって静的サイトでは不可能ですが、そこは単なる静的サイトではない「現代版静的サイト」であるJamstackなので、バックエンドがなくても可能です。

social-card

これだけ読めばOK！ Jamstackのすべてがわかります

今回はGatsbyサイトにメール登録フォームを作る方法と、登録後にメールを自動送信する方法を紹介します。

NetlifyのForms機能ではダメなのか？

当サイトのようにGatsbyサイトをNetlifyにデプロイしている人は多いと思います。

NetlifyではFormsという機能が提供されていて、決められたコードを数行組み込むだけで静的サイト/Jamstackサイトにお問い合わせページを設定することができます。

しかしこのFormsには、メッセージを受け取るだけで送信する機能はないので、例えばお問い合わせを受け付けたことを知らせるために自動返信したり、登録されたメールアドレスを管理することなどはできません。

私が今回したかったのは、ユーザーが打ち込んだメールアドレス宛てにダウンロードリンク付きのメールを自動送信する機能だったので、NetlifyのFormsは使えませんでした。

そこで使ったのがMailchimpです。

Gatsbyプラグインのインストール

Mailchimpの解説の前にまずGatsby側のセットアップをします。

MailchimpとGatsbyをつなげるgatsby-plugin-mailchimpというプラグインがあるので、これをダウンロードします。

npm install gatsby-plugin-mailchimp

gatsby-config.jsに設置します。

# gatsby-config.js

plugins: [

    ...
    
    {
        resolve: 'gatsby-plugin-mailchimp',
        options: {
            endpoint: 'https://xxxxxx.us1....'
        },
    },
];

このendpointに入力するURLをこれから入手します。

Mailchimpのセットアップ

Mailchimpはメールマーケティングのツールを提供しているアメリカの企業で、vimeoやTEDなどの有名企業もクライアントのようです。

Mailchimpでは様々なマーケティングツールを利用可能ですが、今回必要なのはメールアドレスと名前を登録する機能と、その登録者宛てにメールを自動送信する機能だけなので深入りはしません。

まずこちらのページからMailchimpにサインアップしましょう。

https://login.mailchimp.com/signup

サインアップのプロセスでは、名前やメールアドレスといったことのほかに住所の入力も求められます。

これはスパムメール関連で必要な情報のようです。

プランを選ぶページでは0円の「Free」を選択してください。

下のように登録者のリストの有無を聞かれる質問もありますが、わからなければ「No」や「I'm not sure」を選んでください。どれを選んでも今回特に違いはありません。

audience

ログインするとこのような画面が表示されるので、左側の「Audience」をクリックします。

audience

次に「Signup forms」「Embedded forms」と進みます。

signup-forms-embedded-forms

スクロールダウンするとページ下部に「Embedded Form Code」とあり、その右側に「Generate Embed Code」という緑色のワクに囲まれたボタンがあります。

そこをクリックし、表示されたコードの中から下のような<form>タグを探します。

<form action="https://xxxxxxxxxx.us1.list-manage.com/subscribe/post?u=xxxxxxxxxx852dcb13c1fe7e&amp;id=xxxxxxxxxx" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

"action='....'"以下のコードをコピーして、先ほどのgatsby-config.jsのendpointに貼り付けます。

# gatsby-config.js

plugins: [

    ...
    
    {
        resolve: 'gatsby-plugin-mailchimp',
        options: {
            endpoint: ''https://xxxxxxxxxx.us1.list-manage.com/subscribe/post?u=xxxxxxxxxx852dcb13c1fe7e&amp;id=xxxxxxxxxx"
        },
    },
];

これでMailchimpとGatsbyをつなげる作業は完了です。

なお、ここは必要に応じて環境変数として保存するなどしてください。

次にユーザーがメールアドレスを入力するフォームを作ります。

フォームUIの作成

今回、ユーザーにはメールアドレスだけなく名前（苗字）も入力してほしいので2つのフォームを設置します。

苗字（Last Name）はMailchimp側で"LNAME"が指定されているので、gatsby-plugin-mailchimpプラグインのaddToMailchimpに"LNAME"と指定します。

もし苗字と名前、二つを別々に入力するフォームを設置する場合、苗字は"LNAME"、名前は"FNAME"で指定します。

下のようにpathnameなども指定できます。

addToMailchimp('email@example.com', {
    PATHNAME: '/blog-post-1',
    FNAME: 'Yasunari',
    LNAME: 'Kawabata'
    ...
})

フォームのコードは下のようになります。

なお、今回emailとlastNameのstateとChangeハンドラは、わかりやすいように別々に作ってあります。

# form.js

import React, { useState } from 'react'
import addToMailchimp from 'gatsby-plugin-mailchimp'

const Form = () => {
    const [lastName, setLastName] = useState("")
    const [email, setEmail] = useState("")

    const handleSubmit = (e) => {
      e.preventDefault()
      addToMailchimp(email, { LNAME: lastName })
            .then((data) => {
                alert("5分以内にダウンロードリンク付きのEメールをお送りします。しばらく待っても受信できない場合は、迷惑メールフォルダを確認してください。")
                setLastName("")
                setEmail("")
            })
            .catch((err) => {
                alert("エラーが発生しました。メールアドレスが正しく入力されているか確認をして、もう一度操作を行なってください。")
            })
    }
  
    const handleLastNameChange = (e) => {
        setLastName(e.currentTarget.value)
    }

    const handleEmailChange = (e) => {
        setEmail(e.currentTarget.value)
    }
  
    return (
       <div>
            <form onSubmit={handleSubmit}>
                <h3>無料ダウンロードリンクをメールでお送りします</h3>
                <div>
                    <input onChange={handleLastNameChange} value={lastName} placeholder="*お名前" name="lastname" type="text" required/>
                    <input onChange={handleEmailChange} value={email} placeholder="*メールアドレス" name="email" type="text" required/>
                    <button type="submit">無料ダウンロードリンクを入手する</button>
                </div>
            </form>
      </div>
    )
}