Como modificar estilos usando css num Google Form

"poder ter dois ou mais campos na mesma linha para economizar espaço"- Google Docs Editors Community

Pediram para você deixar um formulário com o design da sua organização, e as opções de tema do Google Forms vão só até certo ponto. Você pode mudar a imagem do cabeçalho, as cores e as fontes, mas as perguntas ficam em uma coluna só, e a barra do título e o espaçamento ficam como o Google definiu. Incorporar o formulário no seu site não resolve, porque o CSS do site não alcança o que está dentro do iframe. Com o Formfacade, você pode passar o formulário para duas colunas, definir as cores e adicionar seu próprio CSS para o resto.

Abaixo estão três formas de mudar a aparência de um Google Form, e onde cada uma deixa a desejar.

A necessidade:

Durante a crise da COVID-19, o Centre of Small & Medium Enterprises promove programas de treinamento online regulares para que as PMEs preparem a si mesmas e a seus funcionários para as medidas de segurança na reabertura dos negócios. O centro queria criar um formulário de inscrição para os treinamentos limpo e simples, como este.
O formulário de exemplo de inscrição para treinamento que o centro queria, com fundo verde-azulado e duas colunas

1. Personalize o tema no Google Forms

O Google Forms deixa você escolher uma imagem de cabeçalho, uma cor de tema, uma cor de fundo e as fontes. Onde deixa a desejar: as perguntas ficam em uma coluna só, e você não consegue mudar a barra do título, o espaçamento ou o botão separadamente. Se você incorpora o formulário no seu site, o CSS do site não alcança o que está dentro do iframe.
Um Google Form chamado Training Registration com First Name, Last Name, Email Address, Occupation e Business Name

2. Crie seu próprio formulário HTML

Escreva um formulário HTML no seu site que envia cada resposta para o seu Google Form, usando o entry ID de cada pergunta.
Onde deixa a desejar: você precisa encontrar cada entry ID, atualizar o código sempre que o formulário mudar e tratar os erros por conta própria.

3. Use o Formfacade e seu próprio CSS

O Formfacade os ajuda a deixar o Google Form acima do jeito que eles imaginaram.
Vou mostrar a transformação do formulário com um guia detalhado, passo a passo. Venha comigo personalizar e adicionar CSS aos elementos do formulário para chegar ao estilo.

Passo 1: Preparar o formulário para a personalização

  • Clique em Crie seu formulário, dê um nome ao formulário, clique em Build form e depois em Proceed.
  • Clique na aba "Preview"
As abas Edit, Preview, Share e Responses, com Preview marcada
2. Clique na aba "LAYOUT" na barra lateral e selecione "Comfortable" para mudar o layout para 2 colunas. Clique em "Apply to this form".
As configurações de pré-visualização do formulário com a aba LAYOUT, Comfortable e o botão Apply to this form destacados
3. Na mesma barra lateral, clique na aba "THEME" para mudar as cores do formulário. O botão "Apply to all forms" aplica as cores a todos os seus formulários.
As configurações de pré-visualização do formulário com a aba THEME, Primary color e Background destacados
4. Veja seu formulário ganhar um novo visual com o Formfacade e compare com o formulário de exemplo.
Quase lá, né? Mas espere!
Ainda faltam alguns pequenos ajustes no título
- O título precisa ficar em vermelho carmesim - código hex #DC143C ou rgb(220,20,60)
- O título precisa ter uma faixa branca de fundo, de ponta a ponta.
- A descrição precisa continuar em preto. E centralizada.
- O espaçamento interno precisa de ajustes em todo o formulário.
Training Registration no Formfacade com duas colunas e fundo verde-azulado, antes de adicionar o CSS
5. Vamos usar o "Inspect element" e ver que CSS se encaixa.
6. Fiz estes ajustes no "Inspect element" e cheguei ao código CSS abaixo.
.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. Agora vou adicionar o código ao meu formulário. Clico em "EDIT", clico no título do formulário, depois no ícone ⚙️ e na aba "Advanced" para adicioná-lo em "Custom CSS". Clique em "Save".
Training Registration no editor do Formfacade com a aba EDIT e o ícone de engrenagem no cartão do título destacados
8. Assista ao vídeo abaixo para ver como o formulário se transforma conforme adiciono o código, parte por parte.
E aqui está o formulário final. Ficou incrível, não ficou?
O formulário Training Registration final, com título carmesim sobre uma faixa branca, duas colunas e um botão Submit verde
O que você acha desse tipo de personalização? Mostre seus designs para nós e escreva para support@formfacade.com.

Bônus!

Aqui está uma tabela comparando as personalizações possíveis no Google Forms e no Formfacade.
1. Encontre nesta tabela a personalização que você quer para seu formulário/campo.
2. Clique no artigo vinculado para ver um tutorial detalhado, passo a passo, para chegar ao design que você quer.
Deixe seu Google Form bonito no seu site. Bom design!
Formulário Google Forms Formfacade
Layout Uma coluna padrão Várias colunas
Cor de fundo/tema Sim Sim
Cor do botão Não Sim
Campos do formulário Não Sim
Mudar configurações de fonte
Cor da fonte ? Não
Estilo da fonte Sim Sim
Estilos CSS avançados Não Sim
Campos
Mudar o texto de exemplo Não Sim
Aparência (oculto/somente leitura) Não Sim
Mudar o nome da pergunta? Não Sim
Pré-preenchimento Sim Sim
Campos calculados Não Sim
Personalização avançada (formatar texto: negrito, itálico) Não Sim
Rastreamento de conversões Não Sim
Integração com Hotjar Não Sim
Upload de arquivos Drive, exige login Sim

Resumo

O tema do Google Forms muda as cores e as fontes, mas não o layout nem o espaçamento, e o CSS do seu site não alcança um formulário dentro de um iframe. Com o Formfacade, você muda o layout e as cores e adiciona seu próprio CSS para ajustar o resto. Crie seu formulário e siga os passos acima. Se tiver alguma dúvida, escreva para o suporte.

Última atualização: