7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

サイトの見た目に合わせてGoogleフォームを埋め込むサービス Formfacade

Last updated at Posted at 2020-05-26

やりたいこと

  • お問い合わせやアンケートのフォームをサイトに設置したい
  • でもメール配信されて内容を管理するのはNG
  • CRMツールを使った壮大な顧客管理システムまでは不要

からの

  • Googleフォームでフォーム使って裏ではGoogleスプレッドシートでデータ取りまとめできるよね。
  • でもサイトにGoogleフォームを埋め込んだときの見た目が気に入らないのでなんとかしたい

という要件。
CMS(WordPress)のデータベースにデータを溜めたくない時にもおすすめ。(個人的にそんな設計は避けたい)

Formfacade 使いましょう

スクリーンショット 2020-05-26 19.18.24.png
https://formfacade.com/

1フォームで100レスポンス/月までは無料で始められます。フォームや送信数が増えるのなら有料プランへ。(といってもよほどのリクエストがない限り$8/月で始められます)
https://formfacade.com/website/pricing.html

やり方

基本的にGoogleフォームにアドオンを入れるだけ。
https://formfacade.com/website/how-to-embed-google-forms-in-wordpress.html

1. Googleフォームを作る

よしなに作っておきましょう(スクリーンショットは元々あるサンプルのフォーム)。
フォームそのものへのアクセス権も設定しておき、サイトに埋め込む前にブラウザのシークレットモードなどGoogleにログインしていない状態でフォームにアクセスできるかテストしておくと良し。
スクリーンショット 2020-05-26 19.31.30.png

2. GoogleフォームでFormfacadeのアドオンを入れる

送信の右側のメニューからアドオンを選んで
スクリーンショット 2020-05-26 19.32.58.png

Formfacadeで検索して出てきたら追加
スクリーンショット 2020-05-26 19.33.24.png

3. 埋め込み用のコードを取得

アドオンからFormfacadeを選んで「Embed in a webpage」を選択
スクリーンショット 2020-05-26 19.37.14.png

埋め込むWebサイトの種類を選ぶ(今回はWordPress)。
スクリーンショット 2020-05-26 19.41.37.png

コードが提供されるのでよしなにサイトに設置
スクリーンショット 2020-05-26 19.42.14.png

埋め込みできたらYesを押しましょ。

出来上がり

Googleフォームの残念な感じがなくなります。スクリーンショットはWordPressデフォルトテーマのCSSそのままなので、適宜カスタマイズは可能。
screencapture-wordpress-local-archives-1-2020-05-26-19_46_05.png

Ajaxで送信されるので、ページ遷移なしで完了する。
無料プランはFormfacadeのブランディングがあるが、有料プランでは削除される。
スクリーンショット 2020-05-26 19.47.16.png

送信されたデータはGoogleフォームやスプレッドシートで確認できます。
もちろんGoogleフォームでメール配信を設定していれば配信もされます。
この辺りはGoogleフォームの機能そのままです。

screencapture-docs-google-forms-d-1ribJHh2Fyjh12y3UTEt104N7HlNtbzo5h6D-RuZZRuU-edit-2020-05-26-19_48_05.png

スクリーンショット 2020-05-26 19.48.39.png

現場からは以上です。

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?