Googleフォームを自由にデザインする方法とその活用法

こんにちは、ガタガタです。

別記事でGoogleフォームの埋め込み方法を紹介しました。5分くらいで完了する、おそらく2019年時点でもっとも手軽なメールフォーム設置方法です。
【5分で完了】Googleフォーム埋め込みで手軽にメールフォームを設置する

実はこのGoogleフォーム、自分で自由にデザインしたフォームと紐づけて運用することも可能です。HTML/CSSさえ問題なく書ければ簡単に実践できる上、好きなようにデザインしたものをGoogleフォームとして使えるようになるためかなりやれることの幅が広がります。

この記事では、Googleフォームを自由にデザインする方法とその活用法を紹介します。

設置例

実際のフォームはこちら。コードもこちらのページの下部で公開しています。CSSで自由に見た目を制御できます。
※送信ボタンを押しても、実際には送信されません。

設置方法

１．Googleフォームでメールフォームを作る
２．formタグおよびinputタグを使って、自分で好きな見た目のフォームを作る（※入力項目がGoogleフォームと同じになるように）
３．Googleフォームからaction、nameなどの値を取得して、自作したフォームにコピペする
４．以上

詳しい設置方法はこちらの記事がわかりやすいです。
【デザイン】Google Formをカスタマイズしてみる【Google Form】

ただ、完璧ではありません

あくまで、自分でデザインしたフォームをGoogleフォームに被せている格好ですので、以下のようなことをするにはJavascriptを用いた高度な設定が必要になりそうです。

上記の方法でフォームを作ると、正常に送信完了したときは問題ないのですが、じつは送信に失敗したときにアラートが出ず、成功したときと同じように「ありがとうございます」の文言が出るだけになってしまうのです。

なので、重要なメールを送るためにフォームを使う場合は、トラブル防止のためにもこの方法でフォームを埋め込むのは避け、通常の「埋め込みボタン」で取得したコードを貼って埋め込むか、フォームへのリンクを貼るなどしたほうがよさそうです。

では逆に、どんな場面でこのGoogleフォームの設置方法を生かすことができそうでしょうか。

簡単なアンケートを設置するにはもってこい

例えばこんなかんじ。

↑実際に動作します。試してみてください。

このような、万が一送信失敗しても特に困らなさそうな簡単なアンケートを、手軽にどこでも設置できて、かつ回答をGoogleフォーム上で管理できるのは非常に便利です。

ラジオボタンの埋め込み方法

ラジオボタンのnameの値は、質問の後ろのほうのinputタグの中にあります。コードをコピペでテキストエディタに貼り付けて、name=で検索すればすぐ取得できるはずです。

<input type="radio" name="Googleフォームのinputタグに与えられているname" value="Googleフォームの選択肢と同じ文章">

これでラジオボタンを埋め込んで機能させることができます。

回答を見る画面はこんな感じです。

まとめ

Googleフォームを自由にデザインしてサイト内で使う際は、例えば仕事の依頼受付など重要なメールを送る用途にするのは避け、簡易なアンケートなどに活用したほうがよさそうです。

この記事を参考に、ぜひ活用方法を見つけてください。

もし、どうしても思うように設置できないときは……

有償にて設置代行を受け付けますので、お気軽にご相談ください。Wordpressを導入していないサイトでもOKです。