Wenden Sie benutzerdefinierte CSS-Stile auf Google Forms an

Google-Formulare werden dem Nutzer zur Einbettung in seine Website als Iframe angezeigt. Dies bedeutet, dass sie nicht vom eigenen CSS der Website gestaltet werden können.

Wie kann ein Google Form mit "neuen" Google Forms in eine Website mit einem benutzerdefinierten Stil eingefügt werden?

Es gibt eine ähnliche Frage , für die es eine Antwort auf Google Forms im alten Stil gibt, bei der das generierte HTML-Quellformular kopiert wird. Dies funktioniert jedoch nicht für neue Formulare (nach 2015).

Wenn dies nicht möglich ist, schlagen Sie eine Alternative vor, z. B. die Verwendung von Google Apps Script zum Hosten einer Seite, die gestylt und dann in eine Website eingebettet werden kann - oder eine andere Lösung.

google-apps-script google-forms

— hazymat
quelle

Am Ende des verwiesenen Links steht die Antwort auf die verwiesene Frage von Stack Overflow , dass es drei Updates gibt. Hast du diese Updates gelesen?

— Rubén

Ich habe diese drei Links überprüft. Zweiter und dritter sind relevant, nur der dritte Link funktioniert. Ich habe die Schritte im Artikel "Redux" genau befolgt, aber viele der Schritte beziehen sich auf HTML-Tags, die in der Forms-Quelle nicht vorhanden sind. Als ich fertig war und getestet hatte, funktionierte das Senden und die Zielseite des Formulars, aber es wurde nichts in das Google Sheet eingefügt.

— Hazymat

Außerdem weist diese Website einen verdächtigen Mangel an Daten für den Artikel oder die folgenden Kommentare auf. Schließlich scheint die "aktualisierte" Demo, die sie veröffentlichen, auf alten (Pre-Freebird) Formularen zu basieren, nicht auf den neuen Stilformularen.

— Hazymat

Ich fand es auch seltsam, dass die Kommentare keine Daten haben, aber die wichtigsten Ideen und allgemeinen Schritte gelten immer noch. Ich denke: Google Forms benötigt externe Ressourcen, um wie Javascript-Dateien und -Bibliotheken zu funktionieren.

— Rubén

Derzeit bietet Google Forms keine einfache Möglichkeit, den Formularstil ¹ anzupassen . Während es möglich ist, herauszufinden, wie dies mit "den neuen Google Forms" geschehen könnte, sollte der "Formularbesitzer" den Formularquellcode analysieren, um herauszufinden, welche Ressourcen erforderlich sind, damit die Formularfunktionen funktionieren, wie z. B. die Schaltflächen, die Validierung, Mehrseitige Navigation, Bestätigungsseite usw. Da dies jedoch nicht von Google dokumentiert ist, kann "die Lösung" jederzeit ohne vorherige Ankündigung von Google nicht mehr funktionieren.

Eine Alternative besteht darin, Google Apps Script und den HTML-Dienst zu verwenden, um ein Webformular von Grund auf neu zu erstellen, das dem Erscheinungsbild der Website entspricht, auf der es eingebettet wird.

Anmerkungen:

¹ : Dies gilt auch für:

Fügen Sie ein clientseitiges Skript hinzu
Fügen Sie vor der Übermittlung eine JavaScript-basierte Antwortvalidierung hinzu
Benutzerdefinierte Formularnavigation, z. B. Kombinieren von zwei Antwortwerten, um den nächsten Abschnitt auszuwählen.

— Rubén
quelle