前回の続きです。
####Google Formの利用
PHPの知識がない方のために、今回はGoogle Formでお問い合わせフォームを作成していきます。
Googleアカウントがない方は事前に作っておいてください。
まずはhttps://docs.google.com/forms/u/0/にアクセスし、「新しいフォームを作成」の下にある「空白」を選択します。
下の画面のようなフォームを作ってください。
フォーム全体
お名前
メールアドレス
内容
フォームの作成が終わったら、右上にある送信ボタンを選択します。
<>タブを選択するとHTMLに埋め込むためのコードがあるので、それをコピーする。
####お問い合わせフォームの設置
index.vueにコードを追加します。
pages/index.vue
<template>
<div>
<Top />
<v-divider></v-divider>
<Profile />
<v-divider></v-divider>
<Work />
<v-divider></v-divider> // 追記
<Contact /> // 追記
</div>
</template>
<script>
import Top from '~/components/Top.vue'
import Profile from '~/components/Profile.vue'
import Work from '~/components/Work.vue'
import Contact from '~/components/Contact.vue' // 追記
export default {
components: {
Top,
Profile,
Work,
Contact // 追記
}
}
</script>
次にcomponentsディレクトリにContact.vueを作成します。
components/Contact.vue
<template>
<div id="contact">
<v-container
fluid>
<v-card
width="100vw"
>
<iframe
:src="src"
width="100%"
height="750px"
frameborder="0"
marginheight="0"
marginwidth="0"
>読み込んでいます…
</iframe>
</v-card>
</v-container>
</div>
</template>
<script>
export default {
data: () => ({
src: "https://docs.google.com/forms/d/e/1FAIpQLSdqWDVjIQJwy1J2Tz4kBS9RnaKF_vmanmU2KipvHeqf4aeKUA/viewform?embedded=true"
}),
};
</script>
ブラウザを確認してみましょう。
これでお問い合わせフォームを埋め込むことができました。
次が最終回です。最後はインターネット上で公開する方法を説明します。