🤖
Reactでtypeformを使用してサイト上で問い合わせフォームを作る
お問い合わせフォームってエンジニアの登竜門ですが、
せっかくフォームを作っても、がっつり作りこみをしないと
迷惑メールが届きまくって問い合わせ内容を確認しなくなる...
という結果に陥ってしまいがちです。
がっつり作りこむ or typeformでサクッと作る
現在はこの二つが主流なようなので、
今回はサーバーサイドを使用せず、フロントにある実装をするだけで
簡単に疑似的なお問い合わせフォームが作れるtyprformを解説していきます。
typeformのライブラリ
今回、私が頂くのは、
Typeform React Embedというライブラリです。
▼こちらがデモサイトです
ポップアップの出し方が5種類あるので
気に入ったデザインのものを自由に実装してみてください！
実装手順
MyComponent.js
import { Widget } from '@typeform/embed-react'
const MyComponent = () => {
return <Widget id="<form-id>" style={{ width: '50%' }} className="my-form" />
}
<Widget />というコンポーネントを使用して実装しています。
ポップアップの出し方に合わせてコンポーネントも5種類用意されています。
・Widget
・Popup
・Slider
・Sidetab
・Popover
今回はtypeformを使った
簡易的なお問い合わせフォームの作り方を解説しました！
参考になったらいいねしてくださるとうれしいです！
参考サイト
Discussion