GoogleフォームにカスタムCSSスタイルを適用する


7

Googleフォームは、ユーザーが自分のWebサイトにiframeとして埋め込むことができるように表示されます。つまり、Webサイト自体のCSSでスタイルを設定することはできません。

「新しい」Googleフォームを使用して、カスタムスタイルのウェブサイトにGoogleフォームを挿入するにはどうすればよいですか。

生成されたソースHTMLフォームのコピーを含む古いスタイルのGoogleフォームに対する回答がある同様の質問が存在しますが、これは新しい(ポスト2015)フォームでは機能しません。

これを行う方法がない場合は、Google Apps Scriptを使用して、スタイルを設定してWebサイトに埋め込むことができるページをホストするなど、他の解決策を提案してください。


参照されたリンクの下部に、Stack Overflowからの参照された質問への回答には、3つの更新があると言われています。それらの更新を読みましたか?
ルベン・

これらの3つのリンクを確認しました。2番目と3番目が関連し、3番目のリンクのみが機能します。「redux」の記事の手順を厳密に実行しましたが、手順の多くは、フォームソースに存在しないHTMLタグを参照しています。ようやく完成してテストしたところ、フォームの送信とランディングページは機能しましたが、Googleシートには何も挿入されませんでした。
hazymat 2016

また、そのサイトには、記事または以下のコメントに疑わしい日付がありません。最後に、彼らが投稿する「更新された」デモは、新しいスタイルのフォームではなく、古い(Freebird以前の)フォームに基づいているようです。
hazymat 2016

また、コメントに日付が含まれていないことも奇妙でしたが、主なアイデアと広範な手順がまだ適用されていると思います。Googleフォームでは、JavaScriptファイルやライブラリのように機能するために外部リソースが必要です。
ルベン・

回答:


3

現時点では、Googleフォームにはフォームスタイルをカスタマイズする簡単な方法は含まれていません1。「新しいGoogleフォーム」でこれがどのように行われるかを理解することは可能ですが、「フォームの所有者」は、フォームのソースコードを分析して、ボタン、検証、複数ページのナビゲーション、確認ページなどですが、これはGoogleによって文書化されていないため、「解決策」はGoogleに通知することなくいつでも動作を停止する可能性があります。

別の方法は、Google Apps ScriptとHTMLサービスを使用して、埋め込むサイトのルックアンドフィールに一致するWebフォームをゼロから作成することです。

ノート:

1:これは以下にも適用されます:

  1. クライアント側のスクリプトを追加する
  2. 送信前にJavaScriptベースの応答検証を追加する
  3. 2つの応答値を組み合わせて次のセクションを選択するようなカスタムフォームナビゲーション。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.