.bubbleにAirtableの問い合わせフォームを埋め込む方法

こんにちは！NoCode学生会のほうた（@Houta_NoCode）です！
今回は.bubbleで問い合わせフォームを扱う方法について紹介しようと思います！では、いきましょう！

問い合わせフォームを埋め込む方法

まず、Airtableで問い合わせフォームを作りましょう。
メニューから「Form」を選択します。

赤枠の部分をクリックして、フィールドを増やしましょう。そして、フィールドを必要に応じて編集します。

編集が完了したら「Share form」をクリックしましょう。

そして「Embed this form on your site（フォームをサイトに埋め込む）」を選択します。

すると以下のような画面になります。そして左の赤枠の部分「Autosize height」はONにしておいてください。これをOFFにするとスクロールがついてしまい、UXが悪くなります。右の赤枠の部分はコピーしてください。
Airtableでの操作はこれで完了です。

次に.bubbleで「Visual element」の「HTML」エレメントを選択します。
そして縦長に大きく配置してください。そして先ほどコピーしたコードをペーストします。これで完成です。

ではプレビューで見てみましょう。いい感じですね(笑)

フォームの内容はAirtableのtableに記載されます。
注意事項としては、無料プランの場合「Submit」ボタンを押した後にAirtableの広告が流れてしまいます。よってUXが非常に悪くなります。
案件などで使う場合は有料プランが必須ですね。

最後に

今回の内容はいかがでしたでしょうか？？
問い合わせフォームはWebサイトを作る際には必須になってくるのでしっかり使いこなせるようにしておきましょう！

最後に「この記事良かった！」と思ったらいいね！をお願いします☆

それでは今後もNoCode学生会をよろしくお願いします(^▽^)/
最後まで読んでくれてありがとうございました！！