0
0

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 1 year has passed since last update.

Google formをhtmlに埋め込む

Last updated at Posted at 2023-02-06

0. はじめに

フォーム作りに手を抜きたい人向けです。

1. フォームの作成

元となるフォームをつくります。
https://docs.google.com/forms/u/0/

お問合せフォームを想定しているのでこんなかんじで。パレットボタンを押すとスタイルが変更できます。
ここまでできたら右上の「送信」ボタンを押下
image.png

次のダイアログが表示されるので「<>」アイコンをクリックします。
image.png
必要に応じて幅と高さを変更し、コピーボタンをクリックすると生成されたhtmlタグがコピーされます。

2. フォームの埋め込み

先ほどコピーしたhtmlタグを埋め込み先に貼り付けます。

こんな感じでそのままのフォームが張り付きます。 溢れ出る既製品感ですが手抜きなのでオッケーです。あとはCSSで幅やマージンを整えてあげれば完璧です。

3. フォームの編集権限変更

最後にサイトを見た人ならだれでもフォームを送信できるように設定を変更します。

まず右上のポチが3つ並んだアイコンをクリックしてメニューを表示します。
image.png

次に「共同編集者を追加」を押下
スクリーンショット 2021-11-30 22.53.44.png

左下の変更ボタンをクリックします。

image.png

「制限付き」とかかれたプルダウンを押下し、権限を「リンクを知っている全員」に変更します。
これで、フォームの権限の変更は完了です。

4. さいごに

これなら2分もあればフォームが作成できると思います。自家製のロジックを組むより遥かに手軽で信頼性も抜群です。さすがに見た目がちょっと、、という方向けにこちらの記事もつくりました。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?