Nuxtにフォームを追加/設置/設定する方法
What is Nuxt?
Nuxtとは
Nuxtは、Reactと双璧をなすVueをベースとしたフレームワークです。Nuxt.jsと呼ばれることもあります。ゼロコンフィグレーションですぐに開発をスタートできたり、ルーティング、静的ページとサーバーサイドレンダリングの切り替えなど、モダンな機能も揃えており、静的サイトにとどまらない使い方ができます。
最初のリリースは2016年なので、比較的新し目のフレームワークです。名前の似たNext（Next.js）から影響を受けており、Vue使いならNuxt、React使いならNextといった棲み分けになりつつあるようです。
Nuxt向けのモジュールもどんどんと増えており、Nuxtの機能を拡張したり、外部のサービスと連携したりするのがよい容易になる環境が整ってきています。Vueの人気に後押しされるかたちで、Nuxtもそのシェアを確実に拡大している印象です。
Nuxtを使うようなプロジェクトではそもそもフォームも一式一緒に作ってしまうことも多いかもしれませんが、とりあえずのフォーム構築といった用途であまり時間をかけたくない場合には、外部のフォームサービスの利用も有力なオプションになります。
Nuxt x SSGform
Nuxtにフォームを追加する方法
Nuxtで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
1. SSGformアカウントを作成する
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
2. SSGformマイページで、フォームを作成する
好きな名前をつけてフォームを管理することができます。ここでは例えば「Nuxtサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
3. Nuxt側にフォームのhtmlを記述する
<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。（※URLはサンプルなので、このままコピペしても動きません）
<input type="text" name="お名前" required="required" />
<input type="email" name="メールアドレス" required="required" />
<textarea name="お問い合わせ内容" required="required"></textarea>
<button type="submit">送信する</button>
</form>
4. テスト送信して、完了です
あとはNuxtのローカル開発環境から、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Nuxtを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なNuxtライフを送ってください！
