Hoe pas je stijlen aan met css in een Google-formulier

"twee of meer velden op dezelfde regel kunnen zetten om ruimte te besparen"- Google Docs Editors Community

Je moet een formulier laten passen bij de huisstijl van je organisatie, en de thema-opties in Google Forms gaan maar tot een bepaald punt. Je kunt de koptekstafbeelding, de kleuren en de lettertypen wijzigen, maar de vragen blijven in één kolom, en de titelbalk en de witruimte blijven zoals Google ze heeft ingesteld. Het formulier insluiten op je website helpt niet, want de CSS van je site komt niet in het iframe. Met Formfacade zet je het formulier op twee kolommen, stel je de kleuren in en voeg je voor de rest je eigen CSS toe.

Hieronder drie manieren om het uiterlijk van een Google Form te wijzigen, en waar elke manier tekortschiet.

De behoefte:

Tijdens de COVID-19-crisis organiseert het Centre of Small & Medium Enterprises regelmatig online trainingen, zodat mkb-bedrijven zichzelf en hun medewerkers kunnen voorbereiden op de veiligheidsmaatregelen bij de heropening. Het centrum wilde een net en eenvoudig aanmeldformulier voor de trainingen, zoals dit.
Het voorbeeldaanmeldformulier voor trainingen dat het centrum wilde, met een petrolblauwe achtergrond en twee kolommen

1. Het thema aanpassen in Google Forms

In Google Forms kun je een koptekstafbeelding, een themakleur, een achtergrondkleur en lettertypen kiezen. Waar het tekortschiet: de vragen blijven in één kolom, en de titelbalk, de witruimte of alleen de knop kun je niet wijzigen. Sluit je het formulier in op je website, dan komt de CSS van je site niet in het iframe.
Een Google Form met de naam Training Registration met First Name, Last Name, Email Address, Occupation en Business Name

2. Zelf een HTML-formulier bouwen

Schrijf op je website een HTML-formulier dat elk antwoord naar je Google Form stuurt, met de entry-ID van elke vraag.
Waar het tekortschiet: je moet elke entry-ID opzoeken, de code bijwerken telkens als het formulier verandert en fouten zelf afhandelen.

3. Formfacade en je eigen CSS gebruiken

Formfacade helpt hen om het Google Form hierboven eruit te laten zien zoals ze het voor ogen hadden.
Ik loop de metamorfose van het formulier stap voor stap met je door. Pas samen met mij de formulierelementen aan en voeg CSS toe zodat ze bij de stijl passen.

Stap 1: Het formulier voorbereiden op aanpassing

  • Klik op Maak je formulier, geef je formulier een naam, klik op Build form en klik op Proceed.
  • Klik op het tabblad "Preview"
De tabbladen Edit, Preview, Share en Responses, met Preview gemarkeerd
2. Klik in de zijbalk op het tabblad "LAYOUT" en kies "Comfortable" om de lay-out op 2 kolommen te zetten. Klik op "Apply to this form".
De instellingen van de formuliervoorbeeldweergave met het tabblad LAYOUT, Comfortable en de knop Apply to this form gemarkeerd
3. Klik in dezelfde zijbalk op het tabblad "THEME" om de kleuren van het formulier te wijzigen. De knop "Apply to all forms" past de kleuren toe op al je formulieren.
De instellingen van de formuliervoorbeeldweergave met het tabblad THEME, Primary color en Background gemarkeerd
4. Bekijk hoe je formulier met Formfacade een make-over krijgt en vergelijk het met het voorbeeldformulier.
Bijna klaar, toch? Maar wacht!
Aan de titel moeten nog een paar kleine dingen worden aangepast
- De titel moet karmijnrood zijn - hexcode #DC143C of rgb(220,20,60)
- De titel heeft een witte balk als achtergrond nodig die van rand tot rand loopt.
- De beschrijving moet zwart blijven. En gecentreerd worden.
- De opvulling moet overal worden aangepast.
Training Registration in Formfacade met twee kolommen en een petrolblauwe achtergrond, voordat de CSS wordt toegevoegd
5. Laten we "Inspect element" openen en kijken welke CSS past.
6. Ik heb deze aanpassingen in "Inspect element" gedaan en kwam uit op de CSS-code hieronder.
.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. Nu voeg ik de code toe aan mijn formulier. Ik klik op "EDIT", klik op de formuliertitel, dan op het pictogram ⚙️ en op het tabblad "Advanced" om hem bij "Custom CSS" toe te voegen. Klik op "Save".
Training Registration in de Formfacade-editor met het tabblad EDIT en het tandwielpictogram op de titelkaart gemarkeerd
8. Bekijk de video hieronder om te zien hoe het formulier verandert terwijl ik de code stukje voor stukje toevoeg.
En hier is het uiteindelijke formulier. Ziet er geweldig uit, toch?
Het uiteindelijke formulier Training Registration met een karmijnrode titel op een witte balk, twee kolommen en een groene knop Submit
Wat vind je van zo'n aanpassing? Laat ons je ontwerpen zien en schrijf ons via support@formfacade.com.

Bonus!

Hier is een vergelijkingstabel van de aanpassingen die mogelijk zijn met Google Forms en met Formfacade.
1. Zoek in deze tabel de aanpassing die je voor je formulier of veld wilt.
2. Klik op het gelinkte artikel voor een uitgebreide stapsgewijze handleiding om het ontwerp te krijgen dat je wilt.
Laat je Google Form er geweldig uitzien op je website. Veel plezier met ontwerpen!
Formulier Google Forms Formfacade
Indeling Standaard één kolom Meerdere kolommen
Achtergrond-/themakleur Ja Ja
Knopkleur Nee Ja
Formuliervelden Nee Ja
Lettertype-instellingen wijzigen
Letterkleur ? Nee
Letterstijl Ja Ja
Geavanceerde CSS-stijlen Nee Ja
Velden
Placeholdertekst wijzigen Nee Ja
Weergave (Verborgen/Alleen-lezen) Nee Ja
De naam van de vraag wijzigen? Nee Ja
Vooraf invullen Ja Ja
Berekende velden Nee Ja
Geavanceerde aanpassing (tekst opmaken - vet, cursief) Nee Ja
Conversietracking Nee Ja
Hotjar-integratie Nee Ja
Bestandsupload Drive, inloggen vereist Ja

Samenvatting

Het thema van Google Forms wijzigt de kleuren en lettertypen, maar niet de lay-out of de witruimte, en de CSS van je website bereikt geen formulier in een iframe. Met Formfacade wijzig je de lay-out en de kleuren en pas je de rest aan met je eigen CSS. Maak je formulier en volg de stappen hierboven. Heb je vragen, schrijf dan naar support.

Laatst bijgewerkt: