【Next.js】React-Hook-FormとSSGformを使ったお問い合わせフォーム作成【フォーム送信】

はじめに

Next.jsで作成中のポートフォリオにお問い合わせフォームを設置したいと考え、 色々試行錯誤しながらなんとか原型が出来たので備忘録がてらここに書き記す。

使ったパッケージ等

• "react-hook-form": "^7.39.1"
• "yup": "^0.32.11"
• "@hookform/resolvers": "^2.9.10"
• SSGform

SSGform

フォーム送信よりも先にバリデーションを実装してしまい、その後にフォーム送信機能を作成しようとして詰まった。 サーバーレスで簡単に実装出来るフォーム送信ライブラリを探していたところ、ヒットしたのがこちらの

SSGformと言うサービス。
無料会員登録さえ行えばJSX内のformやinputにちょろっと記載するだけでフォーム機能を実装できる優れもの。

コード例

<form action="https://ssgform.com/s/AbcDeFgHiJkL" method="post">
  <input type="text" name="お名前" required="required" />
  <input type="email" name="メールアドレス" required="required" />
  <textarea name="お問い合わせ内容" required="required"></textarea>
  <button type="submit">送信する</button>
</form>

１、formのactionには会員登録後、フォーム追加で生成されるURLを入れて、methodはPOSTにする。
２、各inputやtextareaにname属性を持たせる

ほとんどこれだけでフォームができちゃう。ヤヴァイ。

ただし、自分の環境の場合、React-Hook-FormとYupを使ってバリデーションを実装しているので、actionとmethodをformタグに追加すると、メールは遅れるがバリデーションが発動しない。その逆もしかり。みたいな状況に、、、
まあ原因は割とすぐに見つかって、このonSubmitがあるとどうやらうまくいかないらしい、、、

<form onSubmit={handleSubmit(onSubmit)}>

どうしたか

色々試したんですが、結局落ち着いたのはこれ。 actionとmethodは使わず、onSubmit関数にaxiosを追加することでバリデーションとフォーム送信機能を両立しました。

//フォーム送信処理
  const onSubmit: SubmitHandler<InputsProps> = (data) => {
    console.log(data)
    axios.post('URL', data, {
      headers: {
        'content-type': 'multipart/form-data', //axiosでフォーム送信する時に必要なheader情報
      },
    })
  }

dataと言う引数に入力データが格納されているので、axiosの第二引数に指定。
headers情報に'multipart/form-data'を持たせることでエラーも出ず、正常にフォーム送信ができるようになりました。

めでたしめでたし。