Google マップの埋め込み
Google マップで表示したい場所を検索、メニューバーを開く
「地図、共有を埋め込むを選択」
リンクをコピーする
「地図を埋め込む」を選択すると、HTMLが出てくるのでそれをコピーする
コードに貼り付ける
<template>
<div class="accese">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.828029576439!2d139.7671248!3d35.68123620000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f700b%3A0x277c49ba34ed38!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1643588658811!5m2!1sja!2sjp" width="" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</template>いろいろ調整して、下記のようにしました。
お問い合わせフォーム
最初にHTMLでコードを書いていたため、そのままコードを活かしてPHPで書こうと思いましたが
今後、納品した際にお客様の使いやすさを考えた結果、外部サイトを使うことにしました！
いろいろありますが、今回使用したのはform.runです
ログインor新規登録をする
フォームを作成する
作り方はめちゃくちゃ簡単です！
よく使う項目をドラックして右にドラッグすると、その項目を追加できますし
項目を上下に動かすと並べ替えもできます。
その後保存すると、次の画面に進みます
表示方法の選択
保存に進むと、下記のようになります。
今回はサイトに表示したいので、「WEBページに埋め込む」を選択してください！
埋め込み先、リダイレクト画面の設定
サイトのどこに埋め込むか、リダイレクト後（お問合せフォーム送信後）のURLを記入します。
リダイレクト後にURLを、今回は空欄にしていますが、その時はform.runのデフォルトサイトに飛ぶようになります。
デザイン的に浮かなかったので、私はデフォルトサイトで設定してみました！
実際の画面
お問合せ管理
問い合わせフォームから送信された内容も、form.runで管理することができて便利です！
「対応中」「対応済」等の進捗もここで、チーム管理できて優れものだと思います！
まとめ
外部サイトを利用することで、見栄えのいいページを簡単に使うことができます！
いろいろなサービスがあるので、みなさんも調べて使ってみてください
ちなみに今回ご紹介したform.runは無料で1つフォーム作成ができて、2つ以上作成したい場合は有料になるみたいです。
ご参考までに↓
最後まで読んでいただき、ありがとうございました！
↓よかったらいいねお願いします🥺
コメント