getform.ioを利用して問い合わせフォームを設定する
getform.ioを利用してGridsomeのデモサイトに問い合わせフォームを設置します。
[ 目次 ]
はじめに
こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。
今回はgetform.ioを利用して問い合わせフォームを作成したいと思います。
設置するサイトは、以前作成したGridsomeのデモサイトになります。
GridsomeについてはGridsomeを利用して簡単なサイトを作成しよう を参照ください。
getform.ioとは
Getform is a form backend platform that lets you handle your forms on your websites and apps. You can set up a form and start collecting submissions to your form within minutes.
フォームのバックエンド機能を提供するプラットフォームです。
websiteに簡単にフォームを組み込む為のサービスを提供します。
こちらの動画も参考にご確認ください。
今回は、Freeプランとして試していきます。
getform.io登録方法
公式サイト からアカウントの新規登録を行っていきます。
新規登録画面から新規登録してください。
以下の内容から新規登録が可能です。
- Full Name: 名前
- E-mail Address : メールアドレス
- Password : パスワード
新規登録完了するとダッシュボードに遷移します。
getform.ioのフォーム作成
ダッシュボードからフォームを作成していきます。以下のスクショの赤枠の＋ボタンからフォーム作成に進みます。
続いてフォームに名前を設定して"Create Form"ボタンを押下します。
Freeプランの場合、Thanksページはgetform.ioの画面になるようです。
"Your form has been successfully created!"と表示された画面が表示されればフォームの作成が完了です。
フォームのEndpointやHTMLのサンプルが用意されています。
【Endpoint】
https://getform.io/f/4ecadf57-24d6-4b01-ac36-c90xxxxxxxxx
【HTMLサンプル】
<form
action="https://getform.io/f/4ecadf57-24d6-4b01-ac36-c90xxxxxxxxx"
method="POST"
>
<input type="text" name="name">
<input type="email" name="email">
<input type="tel" name="tel">
<button type="submit">Send</button>
</form>
【HTMLサンプル】
<form
action="https://getform.io/f/4ecadf57-24d6-4b01-ac36-c90xxxxxxxxx"
method="POST"
enctype="multipart/form-data"
>
<input type="text" name="name">
<input type="email" name="email">
<input type="tel" name="tel">
<input type="file" name="file">
<button type="submit">Send</button>
</form>
Gridsomeのデモサイトに問い合わせページを追加
それでは、Gridsomeのデモサイトに問い合わせページを作成していきましょう。
問い合わせページとしてsrc/pages/Contact.vueを作成します。
Contact.vue
まずは、UI部分を中心に以下の内容でContact.vueを作成します。
<template>
<Layout>
<div class="container mx-auto px-2 p-5 md:p-10 flex justify-center">
<div class="max-w-lg">
<h1 class="py-1 text-center">Contact</h1>
<p class="text-grey-darken text-center text-xs">お問い合わせ</p>
<form
action="https://getform.io/f/4ecadf57-24d6-4b01-ac36-c90xxxxxxxxx"
method="POST"
enctype="multipart/form-data"
class="bg-white border shadow-md rounded px-8 pt-6 pb-8 mt-10 mb-4"
>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label
class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
for="name"
>
名前
</label>
<input
id="name"
type="text"
placeholder="山田 太郎"
class="appearance-none block w-full bg-grey-lighter text-grey-darker border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
>
</div>
<div class="w-full md:w-1/2 px-3">
<label
class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
for="email">
メールアドレス
</label>
<input
id="email"
type="text"
placeholder="example@nnn.com"
class="appearance-none block w-full bg-grey-lighter text-grey-darker border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-grey"
>
</div>
</div>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<label
class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
for="tel"
>
電話番号<small class="ml-1">(任意)</small>
</label>
<input
id="tel"
type="text"
placeholder="03-1234-1234"
class="appearance-none block w-full bg-grey-lighter text-grey-darker border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
>
</div>
<div class="w-full md:w-1/2 px-3">
<label
class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
for="file">
添付ファイル<small class="ml-1">(任意)</small>
</label>
<input
id="file"
type="file"
name="file"
>
</div>
</div>
<div class="mb-6">
<label
class="block text-grey-darker text-sm font-bold mb-2"
for="content">
問い合わせ内容
</label>
<textarea
name="content"
rows="6"
class="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker mb-3 bg-grey-lighter focus:outline-none focus:bg-white"
></textarea>
</div>
<div class="flex items-center justify-center">
<button
type="submit"
class="bg-teal-dark hover:bg-teal text-lg text-white font-bold py-4 px-8 border-b-4 border-teal-darker hover:border-teal-dark rounded"
>
送信する
</button>
</div>
</form>
</div>
</div>
</Layout>
</template>
<script>
export default {
metaInfo: {
title: 'Contact'
}
}
</script>
vuelidateでバリデーション
vuelidateを利用して問い合わせフォームのバリデーションを追加します。
vuelidateインストール
まずはvuelidateをインストールしていきます。
■ npmを利用する場合
$ npm install --save-dev vuelidate
■ yarnを利用する場合
$ yarn add --dev vuelidate
vuelidateの読み込み
src/main.jsにvuelidateのimport設定を追加します。
import '~/assets/tailwind.css'
import 'prismjs/themes/prism-okaidia.css'
import DefaultLayout from '~/layouts/Default.vue'
// vuelidateのimportを追加
import Vuelidate from 'vuelidate'
export default function (Vue, { router, head, isClient }) {
// vuelidateを設定します
Vue.use(Vuelidate)
// Set default layout as a global component
Vue.component('Layout', DefaultLayout)
head.htmlAttrs = { lang: 'ja' }
head.link.push({
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Bree+Serif'
})
}
Contact.vue修正
続いて、Contact.vueを修正していきます。
formタグにsubmitイベント追加
@submit.prevent="submit"を追加します
<form
action="https://getform.io/f/4ecadf57-24d6-4b01-ac36-c90xxxxxxxxx"
method="POST"
enctype="multipart/form-data"
class="bg-white border shadow-md rounded px-8 pt-6 pb-8 mt-10 mb-4"
@submit="submit"
>
inputタグにv-modelを設定＆エラー時のclassを追加
名前のinputタグを例として以下に記載します。
- inputタグに
v-model.trim="$v.form.name.$model"を追加 :class="{ 'border-red': !$v.form.name.$error }"でエラー時のclass制御- pタグで該当するエラーメッセージを追加
<input
id="name"
type="text"
name="name"
placeholder="山田 太郎"
class="appearance-none block w-full bg-grey-lighter text-grey-darker border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
:class="{ 'border-red': !$v.form.name.$error }"
v-model.trim="$v.form.name.$model"
>
<p
class="text-red text-xs italic"
v-if="$v.form.name.$error && !$v.form.name.required"
>名前は必須です</p>
scriptに変数＆バリデーション設定を追加
scriptタグ内は以下のように修正しました。
<script>
import { required, minLength, email } from 'vuelidate/lib/validators'
export default {
metaInfo: {
title: 'Contact'
},
data: () => ({
form: {
name: '',
email: '',
tel: '',
file: '',
content: '',
},
serverErrors: {}
}),
validations: {
form: {
name: {
required,
},
email: {
required,
email,
},
content: {
required,
minLength: minLength(4)
}
}
},
methods: {
submit: function (event) {
this.$v.$touch()
if (this.$v.$invalid) {
if (event) event.preventDefault()
return false
}
}
}
}
</script>
問い合わせ画面
今回作成した問い合わせ画面は以下のようになります。
フォーム作成のところでも述べましたが、フォーム送信後のThanksページはFreeプランの場合、getform.ioの画面になります。
完成した問い合わせ画面は以下から確認できます。
Gridsome Starter Site - 問い合わせ画面
フォームの送信結果について
getform.ioのダッシュボードからフォームの送信結果が確認できます。
送信一覧
設定
フォームが送信されたタイミングでメールアドレスに通知することが可能です。
最後に
今回はgetform.ioを利用したフォーム作成を試していきました。
簡単に導入できるのでホームページの問い合わせフォームやアンケートフォームに利用できそうですね！
ajax通信によるフォーム送信もできるようなので、業務でやるときはajax通信を試してみようと思います。
