Nuxt.js のお問い合わせフォームに form.runを使う

みなさん、こんにちは。どんぶラッコです。

みなさんはform.runというサービスをご存知でしょうか？

簡単にフォームが作れる & 裏側でステータス管理ができる優れものです。しかも一部機能は無料で使える！

そしてエンジニアにとって嬉しいことは、form.run をAPI的に使うことができるのです！

新規フォーム作成の際に 「コード型で作成」を押下すると…

設置用のコードを表示してくれるのです！

このコードを基に Nuxt.jsでも使えるように設定をしたので、今回はそのコードを公開いたします！

サンプルコード

まずは nuxt.config.js に設定を追加します。といっても head に formrun.js の読み込み設定を追加するだけです。

import colors from 'vuetify/es5/util/colors'

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    script: [
      {
        src: 'https://sdk.form.run/js/v2/formrun.js'
      }
    ],
  },
  // 中略
}

続いてフォームの実装。まずは Template部分から。

<v-form ref="form" class="formrun" action="https://form.run/api/v1/r/n1qq82h6l6j54mp4cnsg7mq7" method="post" @submit="validate">
	<v-text-field
	class="mb-8"
	label="お名前"
	:rules="rules.name"
	placeholder="テスト太郎"
	/>
	<v-btn large color="primary" class="font-weight-bold" type="submit">
	  <v-icon left>
	    mdi-send
	  </v-icon>
	  送信する
	</v-btn>
</v-form>

どんぶラッコ

vuetifyを使っているのでvuetify特有のタグになっていますが、通常のフォームタグを使っても書き換えられますね！

class="formrun" で formrun 対応のフォームの場所を判別しているようなので、こちらは残したままにします。

そして validationについては、別途 vue側で制御をするようにしています。

@submit="validate" 内ではこのような処理を記述しています。

validate () {
  if (!this.$refs.form.validate()) {
    this.isError = true
    event.preventDefault()
  }
},

this.$refs.form.validate() は vuetifyでのバリデーション方法ですね。

Vue単体でformを作る場合のバリデーションについては、公式にもリファレンスがあるのでそれを参照しましょう。

ここで重要なのは event.preventDefault() です。 バリデーションルールを作成して、もしルール通りじゃなかったら フォームを submit しないでね、という処理内容になります。

このメソッドを使うことで、「一度フォーム内容をチェックして、問題がなければ送信」という流れを作ることができるんですね！

form.runの組み込み機能はかなり便利なので、その機能の使い方自体についても解説記事をあげたいなーと思っています！