Wie ändere ich Stile mit CSS in einem Google-Formular

"zwei oder mehr Felder in derselben Zeile haben zu können, um Platz zu sparen"- Google Docs Editors Community

Sie sollen ein Formular an das Design Ihrer Organisation anpassen, und die Designoptionen in Google Forms reichen nur so weit. Sie können Kopfzeilenbild, Farben und Schriften ändern, aber die Fragen bleiben in einer Spalte, und Titelleiste und Abstände bleiben, wie Google sie festgelegt hat. Das Formular auf Ihrer Website einzubetten, hilft nicht, denn das CSS Ihrer Website reicht nicht in den iframe hinein. Mit Formfacade stellen Sie das Formular auf zwei Spalten um, legen seine Farben fest und fügen für den Rest Ihr eigenes CSS hinzu.

Hier sind drei Wege, das Aussehen eines Google Form zu ändern, und wo jeder an seine Grenzen stößt.

Der Bedarf:

In der COVID-19-Krise veranstaltet das Centre of Small & Medium Enterprises regelmäßig Online-Schulungen, damit sich KMU und ihre Mitarbeiter auf die Sicherheitsmaßnahmen bei der Wiedereröffnung vorbereiten. Das Zentrum wollte ein sauberes, einfaches Anmeldeformular für die Schulungen wie dieses.
Das Beispiel-Anmeldeformular für Schulungen, das sich das Zentrum wünschte, mit petrolfarbenem Hintergrund und zwei Spalten

1. Das Design in Google Forms anpassen

In Google Forms können Sie ein Kopfzeilenbild, eine Designfarbe, eine Hintergrundfarbe und Schriften wählen. Wo es an seine Grenzen stößt: Die Fragen bleiben in einer Spalte, und Titelleiste, Abstände oder den Button allein können Sie nicht ändern. Wenn Sie das Formular auf Ihrer Website einbetten, reicht das CSS Ihrer Website nicht in den iframe hinein.
Ein Google Form namens Training Registration mit First Name, Last Name, Email Address, Occupation und Business Name

2. Ein eigenes HTML-Formular bauen

Schreiben Sie auf Ihrer Website ein HTML-Formular, das jede Antwort über die Entry-ID der jeweiligen Frage an Ihr Google Form schickt.
Wo es an seine Grenzen stößt: Sie müssen jede Entry-ID heraussuchen, den Code bei jeder Änderung am Formular aktualisieren und Fehler selbst behandeln.

3. Formfacade und Ihr eigenes CSS nutzen

Formfacade hilft ihnen, das Google Form oben so zu gestalten, wie sie es sich vorgestellt haben.
Ich zeige Ihnen die Umgestaltung des Formulars Schritt für Schritt. Passen Sie mit mir die Formularelemente an und fügen Sie CSS hinzu, damit sie zum Stil passen.

Schritt 1: Das Formular für die Anpassung vorbereiten

  • Klicken Sie auf Erstellen Sie Ihr Formular, geben Sie Ihrem Formular einen Namen, klicken Sie auf Build form und dann auf Proceed.
  • Klicken Sie auf den Tab "Preview"
Die Tabs Edit, Preview, Share und Responses, mit markiertem Preview
2. Klicken Sie in der Seitenleiste auf den Tab "LAYOUT" und wählen Sie "Comfortable", um das Layout auf 2 Spalten umzustellen. Klicken Sie auf "Apply to this form".
Die Einstellungen der Formularvorschau mit markiertem Tab LAYOUT, Comfortable und dem Button Apply to this form
3. Klicken Sie in derselben Seitenleiste auf den Tab "THEME", um die Farben des Formulars zu ändern. Der Button "Apply to all forms" überträgt die Farben auf alle Ihre Formulare.
Die Einstellungen der Formularvorschau mit markiertem Tab THEME, Primary color und Background
4. Sehen Sie sich an, wie Ihr Formular mit Formfacade aufgefrischt wird, und vergleichen Sie es mit dem Beispielformular.
Fast geschafft, oder? Aber Moment!
Am Titel müssen noch ein paar Kleinigkeiten angepasst werden
- Der Titel muss in Karminrot sein - Hex-Code #DC143C oder rgb(220,20,60)
- Der Titel braucht einen weißen Balken als Hintergrund, der von Rand zu Rand reicht.
- Die Beschreibung muss schwarz bleiben. Und zentriert sein.
- Der Innenabstand muss überall angepasst werden.
Training Registration in Formfacade mit zwei Spalten und petrolfarbenem Hintergrund, bevor das CSS hinzugefügt wird
5. Öffnen wir "Inspect element" und sehen nach, welches CSS passt.
6. Ich habe diese Anpassungen in "Inspect element" vorgenommen und bin bei folgendem CSS-Code gelandet.
.ff-title {
color:#DC143C !important;
padding: 20px !important;
background-color: white;
position: relative;
transform: translateX(-4%);
width: 109%;
}
.ff-description {
padding-top: 20px !important;
align: center !important;
}
.ff-form {
padding: 0px 30px !important;
}
.ff-compose {
padding: 0px !important;
background: none !important
}
.ff-section {
padding-top: 0px !important;
}
7. Jetzt füge ich den Code zu meinem Formular hinzu. Ich klicke auf "EDIT", dann auf den Formulartitel, dann auf das Symbol ⚙️ und auf den Tab "Advanced", um ihn unter "Custom CSS" einzufügen. Klicken Sie auf "Save".
Training Registration im Formfacade-Editor mit markiertem Tab EDIT und markiertem Zahnradsymbol auf der Titelkarte
8. Im Video unten sehen Sie, wie sich das Formular verändert, während ich den Code Stück für Stück hinzufüge.
Und hier ist das fertige Formular. Sieht großartig aus, oder?
Das fertige Formular Training Registration mit karminrotem Titel auf weißem Balken, zwei Spalten und grünem Button Submit
Wie gefällt Ihnen so eine Anpassung? Zeigen Sie uns Ihre Designs und schreiben Sie uns an support@formfacade.com.

Bonus!

Hier ist eine Vergleichstabelle, welche Anpassungen mit Google Forms und mit Formfacade möglich sind.
1. Suchen Sie in dieser Tabelle die Anpassung, die Sie für Ihr Formular oder Feld möchten.
2. Klicken Sie auf den verlinkten Artikel, um eine ausführliche Schritt-für-Schritt-Anleitung für das gewünschte Design zu bekommen.
Lassen Sie Ihr Google Form auf Ihrer Website großartig aussehen. Viel Spaß beim Gestalten!
Formular Google Forms Formfacade
Layout Standard, eine Spalte Mehrspaltig
Hintergrund-/Designfarbe Ja Ja
Button-Farbe Nein Ja
Formularfelder Nein Ja
Schrifteinstellungen ändern
Schriftfarbe ? Nein
Schriftstil Ja Ja
Erweiterte CSS-Stile Nein Ja
Felder
Platzhaltertext ändern Nein Ja
Darstellung (Ausgeblendet/Schreibgeschützt) Nein Ja
Namen der Frage ändern? Nein Ja
Vorausfüllen Ja Ja
Berechnete Felder Nein Ja
Erweiterte Anpassung (Text formatieren - fett, kursiv) Nein Ja
Conversion-Tracking Nein Ja
Hotjar-Integration Nein Ja
Datei-Upload Drive, Anmeldung erforderlich Ja

Zusammenfassung

Das Design von Google Forms ändert Farben und Schriften, aber nicht Layout oder Abstände, und das CSS Ihrer Website erreicht kein Formular in einem iframe. Mit Formfacade ändern Sie Layout und Farben und passen den Rest mit Ihrem eigenen CSS an. Erstellen Sie Ihr Formular und führen Sie die Schritte oben aus. Wenn Sie Fragen haben, schreiben Sie dem Support.

Zuletzt aktualisiert: