ヘッドレスCMS「Newt」のForm AppにTwilio SendGridを設定する

Twilio SendGridサポートエンジニアの菊田(@kikutaro_)です。最近、ContentfulやmicroCMSなどの「ヘッドレスCMS」をよく見かけるようになりました。WordPressのような従来のCMSと違って、フロントエンドの画面がないヘッドレスCMSは、好みに合わせて画面を作れる自由度の高さが特徴です。

今回のブログでは「Newt」というヘッドレスCMSが提供しているForm AppとSendGridを使って、お問い合わせフォームを作成する手順を紹介します。メール通知の処理を含めて、とても簡単に構築できるのでぜひ試してみてください。

Form Appについて

Form AppはNewtが提供するWebフォームを作成する機能です。フォームは自由に作れるのでヘッドレスCMSと関連づけてヘッドレスフォームアプリとも呼ばれるようです。

Newt

フォームのHTMLを準備する

Form Appの設定を進める前に、お問い合わせフォームのHTMLを準備します。テキストエディタに以下の内容をコピー＆ペーストして、form.htmlなどの名前で保存してください。formタグのaction属性は空で構いません。後ほどForm Appが生成するURLを指定します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cirrus-ui/dist/cirrus.min.css">
        <title>Form App問い合わせフォーム</title>
    </head>
    <body>
        <div class="p-12 u-center">
            <form action="" method="post">
                <div class="row">
                    <div class="col-8">
                        <div class="input control">
                            <input type="email" name="email" placeholder="Email" />
                        </div>
                    </div>
                </div>                        
                <div class="row">
                    <div class="col-6">
                        <div class="input control">
                            <input type="text" name="sei" placeholder="姓" />
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="input control">
                            <input type="text" name="mei" placeholder="名" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <textarea name="content"></textarea>
                    </div>
                </div>
                <div class="row">
                    <button type="submit" class="btn-primary">送信</button>
                </div>
            </form>
        </div>
    </body>
</html>

保存したファイルをブラウザで開いて次のようなフォームが表示されたらOKです。

フォームの表示

Form Appの設定

Newtのアカウントを作成したら、まず始めにスペース（作業場所のようなもの）を作成します。このスペースの中でブログやヘルプセンター、Webフォームなどのアプリ（App）を定義できます。

最初に「Appを追加」の「Appテンプレート」を選択してください。

Appテンプレート

Appテンプレートの中から「Contact」を選んで「このテンプレートを追加」を押します。

「フォームを作成」を選択すると表示されるダイアログのフォーム名に「お問い合わせフォーム」と入力します。

フォーム名

フォームの設定はこれだけです。以下の画面に表示されたエンドポイントのURLを「フォームのHTMLを準備する」のformタグのaction属性に設定してください。

メールの設定

「メール設定」で自動返信メールとSendGridを利用するための設定を行います。

自動返信メールの設定

次のように設定しました。

自動返信メールの設定

SendGridの設定

「独自ドメインを有効にする」をONにしてSendGridのSMTP接続情報を設定します。SMTPユーザ名は「apikey」、SMTPパスワードはAPIキーの値です。送信元メールアドレスは所有ドメインであれば自由に指定可能です。

SendGridの設定

実行結果

最初に作成したフォームのHTMLにお問い合わせ内容を入力して送信します。

内容を入力して送信

成功するとNewtが用意した以下の画面が表示されます。この画面は設定で変更することも可能です。

成功画面

Newtのダッシュボードをみるとフォームに入力された内容が保存されています。JSON形式のデータもみれるのが地味に嬉しいです。

Newtのダッシュボード

フォームへの登録を受け付けたメールがSendGridから届くことも確認できました。

メールの受信

フォームに入力された宛先はCSV出力もできるので、集めた宛先にSendGridのマーケティングキャンペーン機能で一斉送信するといった使い方も可能です。今回のブログでは画面のキャプチャを細かく掲載したので手順が長くみえてしまうかもしれませんが、実際にやっていることは「Form Appが生成したURLをformタグのaction属性に設定した」だけです。入力項目の定義やマッピングも不要でかなりお手軽なので、ぜひお試しください！