Zenn
📧

Next.js + TypeScriptでformrunを利用しお問合せ機能を実装する

2023/02/18に公開
Next.js
TypeScript
Vercel
個人開発
formrun
tech

概要

Next.js + TypeScriptプロジェクトで、formrunと言うサービスを使ってメールフォームを簡単に実現する方法のご紹介をします。
デプロイ先はVercelになります。

事前準備

formrunの公式サイトで登録を済ませ
メールフォームをあらかじめ作って置く。

formrunとは

誰でも簡単に30秒でフォーム作成ができるサービスです。

https://form.run/home/

環境

  • Windows 10
  • Vscode
  • Node.js 18.13.0
  • npm 8.19.3
  • Next.js 13.1.6
  • TypeScript 4.9.5

1. Next.jsプロジェクトの準備

下記コマンドでNext.jsプロジェクトを作成します。

npx create-next-app@latest --typescript

詳しくは以下ページを参照ください。

https://zenn.dev/msk1206/articles/dba565eb3985b4

2. formrunの設定

フォーム一覧ページの左スライドにある、お問合せフォームのプルダウンから
一番下の設定をクリックする。
設定画面ページに変わったら左側の下部にある
「フォームの設置」と言う項目内のフォームの埋め込みをクリックします。

次にフォームの埋め込みページでは、
以下3つの項目があります。

1. フォームの埋め込み先を指定

例
https://hoge.com/contact

2. フォーム送信後のリダイレクトURL
こちらはお好みで設定下さい。

3. 埋め込み方法の選択
以下選択肢が2つありますが、
フォームURLの記入の説明は簡単なので省いて今回はスクリプトの設置を選択します。

  • スクリプトの設置
  • フォームURLの記入

2-2. スクリプトのコピー

スクリプトの設置を選択すると以下スクリプトがコピーできます。

<script src="https://sdk.form.run/js/v2/embed.js"></script>
<div
  class="formrun-embed"
  data-formrun-form="@hoge--0123456789"
  data-formrun-redirect="true">
</div>

3. Next.js側のメールフォームページを作る

3-1. contact.tsxを作る

Next.jsプロジェクトの pages/ directory 内に contact.tsx を新規作成します。
先ほどのコピーしたスクリプトを貼り付けます。

contact.tsx
import Script from "next/script";
import React from "react";
import styles from "../styles/Contact.module.css";

const Contact: React.FC = () => {
  return (
    <main className={styles.main}>
      <div className={styles.formrun_width}>
        <Script src="https://sdk.form.run/js/v2/embed.js" />
        <div
          className="formrun-embed"
          data-formrun-form="@hoge--0123456789"
          data-formrun-redirect="true"
        />
      </div>
    </main>
  );
};

export default Contact;

さてお気づきの方もいらっしゃるでしょうが、実は上記のコーディングだとページ移動すると戻っても再レンダリングされなくなります。F5(reload)するまで再レンダリングされません(泣)

ここでuseEfectを使って状態管理を行います。
関数コンポーネント内で副作用を実行します。

ついでにidが見えたら個人的嫌なので.envで隠します。
※環境変数を設定する場合ははVercel側のsettingから追加をしてください。

修正が完了したコードが以下になります。

contact.tsx
import React from "react";
import { useEffect } from "react";
import styles from "../styles/Contact.module.css";

const Contact: React.FC = () => {
  const FormrunID: string = `${process.env.FORMRUN_FORM_ID}`;
  useEffect(() => {
    const head = document.getElementsByTagName("head")[0] as HTMLElement;
    const scriptUrl = document.createElement("script");
    scriptUrl.src = "https://sdk.form.run/js/v2/embed.js";
    head.appendChild(scriptUrl);
    return () => {
      head.removeChild(scriptUrl);
    };
  }, []);
  return (
    <main className={styles.main}>
      <div className={styles.formrun_width}>
        <div
          className="formrun-embed"
          data-formrun-form={FormrunID}
          data-formrun-redirect="true"
        />
      </div>
    </main>
  );
};

export default Contact;

4. メールフォームを表示する

最後に完成したcontact.tsxをcommitしたら、
Vercelでデプロイされた、contactページを表示してみましょう。

https://my-website-gamma-ten.vercel.app/contact

Next.js + formrun(メールフォーム編)

最後に

走り書きしたので誤字脱字が有るかもです。
formrunのようなサービスは凄い便利です。
コーディングに関して、高い知見がある方は
コメントでご教授くださると嬉しいです。

Discussion