Zenn
💻

NuxtでヘッドレスフォームのHyperFormを実装してみた！

2023/01/23に公開
JavaScript
Nuxt
Vue.js
Nuxt 2
hyperform
tech

NuxtでヘッドレスフォームのHyperFormを実装してみた！

NuxtやNextの環境を含め、フォーム実装を行う際は

  • Google form
  • NetlifyのForms機能
  • SendGrid
  • formrun
  • HyperForm

などなどありますが、今回HyperFormで実装してみました。

開発環境

package.json
{
"dependencies": {
    "@nuxt/content": "^1.15.1",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/date-fns": "^1.5.0",
    "@nuxtjs/google-fonts": "^3.0.0-0",
    "@nuxtjs/gtm": "^2.4.0",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/sitemap": "^2.4.0",
    "@nuxtjs/style-resources": "^1.2.1",
    "@types/sanitize-html": "^2.6.2",
    "core-js": "^3.19.3",
    "gsap": "^3.11.0",
    "nuxt": "^2.15.8",
    "nuxt-microcms-module": "^2.0.1",
    "raw-loader": "^4.0.2",
    "ress": "^5.0.2",
    "sanitize-html": "^2.7.3",
    "sass": "^1.54.0",
    "sass-loader": "^10.3.1",
    "swiper": "^5.4.5",
    "three": "^0.142.0",
    "three-orbit-controls": "^82.1.0",
    "uninstall": "^0.0.0",
    "vee-validate": "3.0",
    "vue": "^2.6.14",
    "vue-awesome-swiper": "^4.1.1",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "vue-underscore": "^0.1.4",
    "vuelidate": "^0.7.7",
    "webpack": "^4.46.0"
  }
}

主なバージョンや環境の確認

  1. Nuxtは、2.15.8
  2. Vueは、2.6.14
  3. SSG(Static Site Generator)

 

インストールするもの、アカウントを作るもの

  1. HyperFormのアカウント作る

 

実装したコード

上記のURLのHyperForm 問い合わせデータをAPIで送信する形にして実装いたしました。

 

sample.vue

  <div id="app">
    <h2>Form</h2>
    <label>
      Name
    </label>
    <input v-model="name">
    <label>
      E-Mail
    </label>
    <input v-model="email">
    <label>
      Body
    </label>
    <textarea v-model="body"></textarea>
    <button type="button" @click="send">Send</button>
  </div>
sample.vue

new Vue({
  el: "#app",
  data: {
    name:'',
    email:'',
    body:'',
  },
  methods: {
  	async send() {
    	await fetch('https://hyperform.jp/api/async/{your-form-id}/complete', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json'
          },
          body: JSON.stringify({
              name: this.name,
              email: this.email,
              body: this.body
          })
      })
      this.name = ''
      this.email = ''
      this.body = ''
    }
  }
})

上記のコードですが

mikkameeeさんから参考コードを頂き実装いたしました。

 

ポイントは

  1. 今回は参考サイトに従って、fetch APIを使用
     
     

  2. body: JSON.stringifyのemailは、絶対変えない

sample.vue NG ❌

    body: JSON.stringify({
        name: this.name,
        メールアドレス: this.email, 
        body: this.body
    })
sample.vue OK ⭕️

    body: JSON.stringify({
        name: this.name,
        email: this.email, 
        body: this.body
    })

 

  1. methodは、POSTにする
sample.vue

  method: 'POST',

 

  1. HyperFormのsampleであるactionは不要である
sample.vue

// action="https://hyperform.jp/api/3zCe4TkP"の部分
<form method="post" action="https://hyperform.jp/api/3zCe4TkP" target="_blank" enctype="multipart/form-data">
</form>

 
 

おまけ

送信完了ページを作りたい場合は、thenを使ってlocation.hrefを設定すれば可能です！

sample.vue
new Vue({
  el: "#app",
    data: {
      name:'',
      email:'',
      body:'',
      urlfix: '/contact/thanks/',
    },
  },
  methods: {
  	async send() {
    	await fetch('https://hyperform.jp/api/async/{your-form-id}/complete', {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json'
          },
          body: JSON.stringify({
              name: this.name,
              email: this.email,
              body: this.body
          })
      })
      .then((responase) => {
        this.name = ''
        this.email = ''
        this.body = ''
        location.href = this.urlfix;
      })
    }
  }

上記は近日に応用編のような形で、また記事にしたいと思います！
 

まとめ

フロントエンドエンジニアやマークアップエンジニアなど、フロント側にとっては頼もしいライブラリです！
今回、サポートして頂いたmikkameeeさんには感謝です🙇‍♂‍
ありがとうございました！
今後もfetch APIを絡んだヘッドレスフォーム、ヘッドレスCMSは注目して行きたいです👍
 

参考記事URL

  • HyperForm
  • HyperForm 問い合わせデータをAPIで送信する

Discussion