【Vue/BootstrapVue導入】シンプルで公式っぽいコンタクトフォームの作り方

Vueバージョン確認

npm list vue

まずは上記コマンドでバージョンの確認

twinzlabo@0.1.0 /Users/twinzlabo

── vue@2.6.11

BootstrapVueの導入

BootstrapVueの導入がまだの方のために念のため導入方法書いときますね

とりあえずコピペして環境を整えてください

main.js

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

ターミナル

npm install vue bootstrap-vue bootstrap

以上でBootstrapVueの導入は完了です

BootstrapVueで公式っぽいフォームの導入

これ超簡単なので文字付きのスライダーをVue開発にて導入したい場合は是非覚えといてください

シンプルかつ洗練されたデザインなのでおすすめです

では早速templateタグ内に下記コードをコピペしてください

<template>
  <div>
    <div>
      <h2>Contact</h2>
    </div>
    <b-form v-if="show">
      <b-form-group
        id="input-group-1"
        label="Email address"
        label-for="input-1"
      >
        <b-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          required
          placeholder="Enter email"
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-2" label="Your Name" label-for="input-2">
        <b-form-input
          id="input-2"
          v-model="form.name"
          required
          placeholder="Enter name"
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-3" label="Your Inquiry" label-for="input-3">
        <b-form-textarea
          id="input-3"
          v-model="form.inquiry"
          required
          placeholder="Enter Inquiry"
          rows="3"
          max-rows="6"
        ></b-form-textarea>
      </b-form-group>

      <b-button @click="createComment" type="submit" variant="secondary" class="button">Submit</b-button>
    </b-form>
  </div>
</template>

では次はscriptタグ内に下記コードをコピペです

<script>
import axios from 'axios'

export default {
  data () {
    return {
      form: {
        email: '',
        name: '',
        inquiry: ''
      },
      show: true
    }
  },
  methods: {
    createComment () {
      axios.post(
        'https://firestore.googleapis.com/v1/projects/catty-ab021/databases/(default)/documents/comments',
        {
          fields: {
            email: {
              stringValue: this.email
            },
            name: {
              stringValue: this.name
            },
            inquiry: {
              stringValue: this.inquiry
            }
          }
        }
      )
        .then(response => {
          console.log(response)
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}

赤文字部分はaxiosを導入してFirebaseで利用する場合のコードです

URLは人によって変わります

axiosのインストール方法

npm install axios

これでインストールできます（yarnでもok）

次はstyleタグのコピペです

<style scoped>
h2 {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 80px;
  font-size: 50px;
  font-weight: 100;
}

.button {
  font-weight: bold;
  margin-top: 100px;
  width: 80%;
}

#input-group-1 {
  font-weight: bold;
  text-align: left;
  margin: 0 auto;
  width: 80%;
}

#input-group-2 {
  font-weight: bold;
  text-align: left;
  padding-top: 50px;
  margin: 0 auto;
  width: 80%;
}

#input-group-3 {
  font-weight: bold;
  text-align: left;
  padding-top: 50px;
  margin: 0 auto;
  width: 80%;
}
</style>

ブラウザで確認してみてください

どうですか？シンプルでそれなりに洗練されたコンタクトフォームができましたね

あとは自分なりにデザインを変更してみてください

以上です

参考