Personalizar sondagem do Google Forms

...e como a partilhares no teu blogue.

Como prometido, e continuando o artigo Criar uma sondagem no Google Forms..., hoje vou mostrar como podem partilhar a sondagem que criarem mas com uma aparência personalizada.
O método é muito similar ao que usei para criar a minha página de Contacto, embora com algumas diferenças...

Como mencionei antes, o Google Forms oferece uma análise de dados muito básica em que podes ver quem respondeu aos teus formulários, verificar alguns gráficos simples e pouco mais.
No entanto, em formulários mais exigentes onde seja necessário maior controlo e rigor nos resultados, podemos requerer que quem vota utilize a sua conta Google para puder votar... algo que considero desnecessário para uma simples sondagem partilhada num blogue.

Voltando ao ssunto do artigo, com um pouco de criatividade e conhecimento, podemos dar a um formulário, ou sondagem, criada no Google Forms, uma aparência personalizada e mais de acordo com os nosso gosto.

No exemplo que vou demonstrar, além do Google Forms , utilizei os estilos (adaptados) duma sondagem que encontrei no Codepen: Social Feed ~ Poll with Animation by Simon Goellner.
Claro que que seguindo os passos que vou mostrar, cada um pode criar os seu próprio estilo e aparência para apresentar a sua sondagem.

1. Associar o formulário ao Sheets

   

   Neste exemplo, vamos assumir que já tens uma sondagem pronta e como tal vamos utilizar a mesma sondagem que criei para o artigo Criar uma sondagem no Google Forms...
   Assim, o primeiro passo será ir aos Formulários do Google, seleccionar a sondagem que criamos, e na aba Respostas, clicar em Associar ao Sheets
   O Google Sheets é uma espécie de Excel online oferecido pelo Google e para este caso, vamos utilizar o Sheets como base de dados para armazenar os resultados da nossa sondagem, e onde vamos buscar um gráfico com os mesmos para apresentar a quem vota.

   Como podes ver na imagem acima, o Google Forms já nos apresenta um gráfico com os resultados que qualquer pessoa pode ver ao votar num formulário partilhado no blogue ou site tal como podes verificar no artigo que escrevi antes sobre o tema e do qual apresento a ligação no primeiro parágrafo onde partilhei esta mesma sondagem da maneira normal.
   Mas esse gráfico é algo a que não temos acesso de uma maneira simples para apresentar os resultados colocando a sondagem no blogue de maneira a lhe dar-mos uma aparência personalizada.

   Ao clicar em Associar ao Sheets, abre-se uma janela onde vamos escolher o destino das respostas ao nosso formulário.
   Por norma, basta deixar a opção Criar uma nova folha de cálculo seleccionada e caso seja necessário, escrever o nome da nova folha de cálculo.

   

   Não esquecer de clicar em Criar para confirmar os dados e efectivamente criar a nova folha de cálculo.

2. Adicionar um gráfico à folha de cálculo no Sheets

   Para este próximo passo, vamos deixar por momentos o Google Forms e mudar para folha de cálculo que foi criada no Sheets.
   Não precisas de alterar praticamente nada ao que já está na folha, mas vamos precisar de adicionar um gráfico (para ser apresentado com os resultados da votação), e personalizar algumas coisas na apresentação do mesmo...

   Primeiro, clica na setinha ao lado de onde diz Carimbo de data/hora Editar tipo de coluna Número Percentagem
   Repara como está na imagem abaixo:

   

   Atenção: As definições que mostro neste artigo são as que EU defini para mim, para dar a aparência que EU quis à sondagem de acordo com as MINHAS necessidades, que neste caso como é simplesmente para efeitos de demonstração, são bem básicas.
   Cada um pode seguir as dicas aqui apresentadas, explorar as várias opções, e com um pouco de imaginação, criar a sua versão personalizada... Espero eu...

   O passo seguinte é inserir um gráfico na folha de cálculo, que é o que irá ser apresentado a que, vota com os resultados da votação.
   Clica em Inserir Gráfico, arrasta o espaço do dito cujo para onde fique melhor e na barra lateral direita que aparece, vamos definir algumas coisitas.
   As minhas definições são as seguintes:

   
   Vamos começar pela aba Configurações

   1. Tipo de gráfico
      Aqui tens várias opções, eu escolhi o Gráfico circular 3D mas aconselho a testarem cada opção e escolherem a que mais se adequa às necessidades de cada um.
      Dependendo do tipo de gráfico escolhido nesta secção, assim vai influenciar quais as opções seguintes... neste caso, vou seguir as referentes ao gráfico que eu escolhi.

   2. Intervalo de dados
      Aqui não deverá ser necessário alterar nada.

   3. Etiqueta
      Nesta opção, vamos definir a pergunta da sondagem como etiqueta, e muito importante, seleccionar a opção Agregar para que os resultados sejam apresentados no gráfico somente com as opções de respostas e respectivas percentagens.
      Marcar também Usar linha 1 como cabeçalho abaixo.

   4. Valor
      Aqui não deverá ser necessário alterar nada, em princípio deve ser o Carimbo de data/hora com soma...

   E agora vamos à aba Personalizar

   5. Estilo de gráfico
      Em Cor de fundo, escolher Nenhuma, as restantes opções deixar como estão.
      Mas seleccionar Maximizar e 3D.

   6. Gráfico circular
      Nesta secção escolhemos o tamanho do buraco no meio do gráfico (No caso do Gráfico circular) e cor dos limites, cor do texto da etiqueta (os valores que aparecerm nos resultados), tipo de letra e se é em Negrito, Itálico ou ambas.
      Definimos também o tamanho do texto e como se apresentam a etiqueta, no meu caso escolhi Percentagem:

      

   7. Setor do gráfico circular
      Aqui é onde personalizamos a Cor e distância do centro de cada resposta no gráfico.

   8. Títulos do gráfico e do eixo
      Nesta secção definimos como se apresentam os títulos.
      No meu caso, deixei tudo inalterado.

   9. Legenda
      Aqui definimos a cor, tamanho e tipo de letra da legenda.
      Também definimos a sua posição no gráfico, e até se aparece legenda ou não.

   Quando tudo estar pronto, é altura de definir como vamos partilhar a folha de cálculo.
   No canto superior direito, clica em Partilhar e em Acesso Geral, escolhe Qualquer pessoa com o link

   

   E por enquanto terminamos com o Sheets.
   Ainda precisamos voltar aqui para vir buscar o gráfico, mas fica para mais tarde...
   Agora vamos colocar a sondagem no blogue.

3. Criando o formulário/sondagem

   Assumindo que já tens o formulário/sondagem pronta, vai ao Google Forms, selecciona o formulário que vais usar (Neste caso vou utilizar o mesmo que fiz em Criar uma sondagem no Google Forms...), e no canto superior direito clica no olho para pré-visualizares o formulário e obteres a ligação para o mesmo.
   No meu caso, e para o formulário teste que fiz, a ligação é a seguinte:

   https://docs.google.com/forms/d/e/1FAIpQLScfQltdJT9RLVszG_z1WrAuBAhPgIKzsKB16lYlynYtDbSUMg/viewform

   Mas para o formulário que vamos criar, precisamos obter a ligação das respostas do formulário, assim vamos alterar "viewform" para "formResponse".
   Desta forma, a ligação das respostas para este exemplo é:

   https://docs.google.com/forms/d/e/1FAIpQLScfQltdJT9RLVszG_z1WrAuBAhPgIKzsKB16lYlynYtDbSUMg/formResponse

   Esquecendo um pouco a aparência (isso virá mais tarde), por agora vamos criar o HTML básico para a sondagem.
   Começamos por criar um formulário com a ligação das respostas que encontrámos acima e com o método "POST":

   ver código

   imprimir?

   1	<form method="POST" action="https://docs.google.com/forms/d/e/1FAIpQLScfQltdJT9RLVszG_z1WrAuBAhPgIKzsKB16lYlynYtDbSUMg/formResponse">

   2	<!-- Adicionaremos cada campo em breve -->

   3

   </form>

   Agora vamos adicionar os três campos das respostas, que consiste de uma label e um input para cada resposta:

   ver código

   imprimir?

   1	<label for="nome">Nome</label>

   2	<input type="text" id="nome" >

   Se fossemos criar um formulário normal, acrescentariamos também um botão para submeter as respostas e até talvez, um outro botão para limpar o formulário:

   ver código

   imprimir?

   1	<button type="submit">Enviar</button>

   2	<button type="reset" value="Reset">Limpar</button>

   Mas para este exemplo vamos esquecer esses botões porque em vez disso, vou colocar de maneira que ao clicar na resposta escolhida, a resposta seja logo enviada para o formulário.
   A seguir vem o mais difícil, encontrar os valores a colocar em cada input referente a cada resposta no formulário.

   Primeiro vamos ao formulário publicado, que pode ser acedido pela ligação acima que termina em "viewform" e ao clicar com o botão direito do rato, podemos Ver fonte da página ou Inspecionar:

   

   Isto é no Firefox, noutros navegadores estas opções podem aparecer de maneira diferente.
   Mas o que importa é podermos visualizar o FB_PUBLIC_LOAD_DATA_ que deve aparecer assim ou parecido:

   

   O primeiro número é referente à questão e o segundo é referente às respostas.
   Na maioria dos formulários, principalmente se o objectivo é criar um formulário de contacto, estes números aparecem de maneira diferente onde cada questão tem uma resposta e dessa forma, cada um tem o seu respectivo número.
   Não é o caso neste formulário que só tem uma questão e três opções de resposta.

   Agora, este metodo de descobrir o valor referente a cada questão/resposta pode ser um pouco assustador para algumas pessoas.
   Felizmente, existe um local que faz esse trabalho para nós: Google Forms HTML Exporter

   Basta introduzir a ligação do formulário de que queres obter os dados, e o site apresenta-te uma versão simplificada do teu formulário, incluindo o HTML e um pouco de javascript.
   Com esses dados será relativamente simples criar um formulário, ou neste caso uma sondagem, uma aparência personalizada.

   

   Mas ainda falta mais uma coisa, ir buscar o gráfico ao Sheets com os resultados da votação.
   Para isso voltamos à folha de cálculo, clicamos no gráfico, e nos três pontos no lado superior direito e depois em Publicar.

   Obtemos dessa maneira a seguinte ligação:

   https://docs.google.com/spreadsheets/d/e/2PACX-1vSwWkykWUrIKl0BO67Und69Tbbr1F0_89VZsGxEBTrwNRgO3aPuIRBWlPsgVonGYgM7Q4oZre6w_vjm/pubchart?oid=310639714&format=interactive

   Essa ligação vai ser necessária para colocar o gráfico no nosso formulário personalizado que vai aparecer quando alguém clicar/votar numa das respostas.
   NOTA: Existe um pequeno atraso entre o votar e a entrada do voto no gráfico, mas é algo mínimo.

4. O código completo

   E assim chegamos quase ao fim, basta só deixar aqui o código completo de como personalizar esta sondagem teste:

   ver código

   imprimir?

   001

   <style>

   002	@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap");

   003

   :root {

   004	--canvas: 220;

   005	--bg: hsl(var(--canvas), 15%, 22%);

   006	--fg: hsl(var(--canvas), 39%, 95%);

   007	--link: hsl(var(--canvas), 90%, 80%);

   008	--linkh: hsl(150, 95%, 70%);

   009	--wgt: 200;

   010	/* vars */

   011	--post-bg: rgb(14, 14, 17);

   012

   --t: .4s;

   013	--ease: linear(0,.005,.02 2.2%,.045,.081 4.9%,.16 7.3%,.465 16.2%,.561,.642,.713 25.8%,.773,.825 32.7%,.868 36.5%,.905 40.9%,.935 45.7%,.958 51.1%,.975 57.4%,.986 64.4%,.993 73.1%,.997 84.1%,.999);

   014	--ease-bar: linear(

   015	0, 0.005, 0.02, 0.045, 0.081 5%, 0.16 7.6%, 0.463 16.6%, 0.558, 0.639, 0.709,

   016	0.769, 0.82 33.3%, 0.863 37.1%, 0.902 41.6%, 0.932 46.5%, 0.956 51.9%,

   017	0.973 58.2%, 0.985 65.3%, 0.992 73.8%, 0.997 84.7%, 0.999

   018

   );

   019	--trans: all var(--t) var(--ease);

   020

   }

   021	#poll_test {

   022	font-family: heebo, sans-serif;

   023	color: var(--fg);

   024	background: var(--bg);

   025	font-weight: var(--wgt);

   026	padding: 5px;

   027	display: grid;

   028	place-items: center;

   029	height: 100%;

   030

   }

   031	#poll_test h3 {

   032	font: normal bold 25px 'Julius Sans One';

   033	margin: 0.5em auto .45em;

   034	display: block;

   035	width: 100%;

   036	text-align: center;

   037	border-bottom: 1px solid hsl(0deg 0% 100% / 10%);

   038	line-height: 50px;

   039

   }

   040	#poll_test .post {

   041	padding:  .05rem 1rem 2rem;

   042	padding-left: 3rem;

   043	border-bottom: 1px solid hsl(0deg 0% 100% / 10%);

   044

   }

   045	#poll_test .poll-details {

   046	font-size: 0.75rem;

   047	font-weight: 400;

   048	color: hsl(240deg 15.6% 78.63% / 65%);

   049

   }

   050	#poll_test .poll-choices {

   051	display: flex;

   052	flex-direction: column;

   053	gap: 0.5rem;

   054

   }

   055	#poll_test .poll-choice label {

   056	padding-inline: 1rem;

   057	display: flex;

   058	justify-content: space-between;

   059	border-radius: 0.5rem;

   060	border: 1px solid rgb(76, 76, 92);

   061	position: relative;

   062	isolation: isolate;

   063	transition: var(--trans);

   064	cursor: pointer;

   065

   }

   066	#poll_test .poll-choice label:hover {

   067	box-shadow: 0 0 10px rgb(76, 76, 92, 0.5);

   068	cursor: pointer;

   069

   }

   070	#poll_test .poll-choice .poll-label {

   071	gap: 0.5rem;

   072	overflow: hidden;

   073	width: 100%;

   074	min-height: 44px;

   075	display: flex;

   076	align-items: center;

   077	font-weight: 400;

   078	margin: 0;

   079	z-index: 1;

   080

   }

   081	#poll_test .poll-choice .answer {

   082	width: 100%;

   083	overflow: hidden;

   084	white-space: nowrap;

   085	text-overflow: ellipsis;

   086	display: block;

   087	filter: none;

   088	transition: var(--trans);

   089

   }

   090	#poll_test .poll-choice .poll-label .radio {

   091	display: flex;

   092	transition: var(--trans);

   093	overflow: hidden;

   094

   flex: 0;

   095

   }

   096	@layer app {

   097

   #app {

   098	width: 380px;

   099	width: 80%;

   100	height: 460px;

   101	background: var(--post-bg);

   102	border-radius: 8px;

   103

   }

   104	#app ul, #app li {

   105	margin: unset;

   106	padding: unset;

   107	list-style: none;

   108

   }

   109	#app input {

   110	width: 16px;

   111	height: 16px;

   112	appearance: none;

   113	background-color: rgb(76 76 92 / 10%);

   114	border: 1px solid rgb(76 76 92);

   115	box-shadow: inset 0 0 0 1px transparent;

   116	border-radius: 100%;

   117	padding: 0;

   118	margin: 0;

   119

   }

   120	#app p.text {

   121	margin: 0;

   122

   }

   123

   }

   124	#poll_test button {

   125	margin: 2rem 3rem;

   126	padding: .5rem 1rem;

   127	background: rgba(235,235,255,0.15);

   128	color: inherit;

   129	border: 1px solid rgba(255, 255, 255, 0.25);

   130	border-radius: 0.5em;

   131	font-weight: 500;

   132	-webkit-appearance: none;

   133	box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;

   134

   &:hover {

   135	background: rgba(235,235,255,0.2);

   136

   }

   137

   }

   138

   #result {

   139	display: none;

   140	padding: 10px;

   141

   }

   142	#result .result_wrapper {

   143	position: relative;

   144	width: 100%;

   145	height: 450px;

   146

   }

   147	#result_iframe {

   148	display: block;

   149	margin: 0 auto;

   150	position: absolute;

   151

   top: -5%;

   152

   left: 0;

   153	bottom: 0;

   154

   right: 0;

   155	width: 100%;

   156	height: 100%;

   157	border: none;

   158	padding: 20px;

   159

   }

   160	iframe.hidden {

   161	display:none;

   162

   }

   163	@media screen and (max-width: 745px) {

   164	#poll_test {

   165	place-items: unset;

   166

   }

   167	#poll_test .post {

   168	padding-left: 1rem;

   169

   }

   170	#poll_test .poll-choice .answer {

   171	white-space: normal;

   172

   }

   173	#result_iframe {

   174	transform: scale(0.95);

   175

   top: 0;

   176	padding: 0;

   177

   }

   178	@layer app {

   179

   #app {

   180	max-width: 100%;

   181	width: 100%;

   182	height: 550px;

   183

   }

   184

   }

   185

   }

   186

   </style>

   ver código

   imprimir?

   01	<div id="poll_test">

   02	<main id="app">

   03	<h3>Que achas deste tipo de sondagem?</h3>

   04

   05	<iframe name="iframe" width="0" height="0" tabindex="-1" class="hidden"></iframe>

   06	<form id="Gform" action="https://docs.google.com/forms/d/e/1FAIpQLScfQltdJT9RLVszG_z1WrAuBAhPgIKzsKB16lYlynYtDbSUMg/formResponse" method="POST" onsubmit="SwitchForm()" target="iframe">

   07	<div class="post">

   08	<p class="text">

   09

   <legend for="1097205506">Por favor, clica na tua opção preferida. <img alt=":)" title=":)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhebt2b3D89H0xNltJ-qeKORglAebrgJv-Vh5mO89kdbbxPQf-EqA2gbNPFpi5ewtW3gVoWIE_8gEwSHPtBJ9Pf3AJol8Ds35rEBDz7eECrobH-2pG34QYDr-uB32GifMtCVCD2bWC8M8/s18/1.gif" class="emoticon"> </legend>

   10

   </p>

   11	<section class="poll">

   12	<div class="poll-details">

   13	Sondagem • Termina em <span class="strike">22 de Maio, 2025</span>

   14

   </div>

   15	<ul class="poll-choices">

   16	<li class="poll-choice choice-1">

   17	<label for="choice-1">

   18	<div class="poll-label">

   19	<div class="radio"><input class="poll_option" type=submit id="choice-1" name="entry.1966452611" value="Gosto, é bem boa." /></div>

   20	<div class="answer" data-answer="Gosto, é bem boa.">Gosto, é bem boa.</div>

   21

   </div>

   22

   </label>

   23

   </li>

   24	<li class="poll-choice choice-2">

   25	<label for="choice-2">

   26	<div class="poll-label">

   27	<div class="radio"><input class="poll_option" type=submit id="choice-2" name="entry.1966452611" value="Meh! Não gosto muito de sondagens." /></div>

   28	<div class="answer" data-answer="Meh! Não gosto muito de sondagens.">Meh! Não gosto muito de sondagens.</div>

   29

   </div>

   30

   </label>

   31

   </li>

   32	<li class="poll-choice choice-3">

   33	<label for="choice-3">

   34	<div class="poll-label">

   35	<div class="radio"><input class="poll_option" type=submit id="choice-3" name="entry.1966452611" value="Não gosto, prefiro usar algo mais profissional." /></div>

   36	<div class="answer" data-answer="Não gosto, prefiro usar algo mais profissional.">Não gosto, prefiro usar algo mais profissional.</div>

   37

   </div>

   38

   </label>

   39

   </li>

   40

   </ul>

   41	</section>

   42

   </div>

   43	<button type="reset" value="Reset">Limpar</button>

   44

   45

   </form>

   46	<div id="result">Obrigado pelo teu voto.

   47

   48	Em breve, o vencedor será revelado. <img alt=":)" title=":)" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhebt2b3D89H0xNltJ-qeKORglAebrgJv-Vh5mO89kdbbxPQf-EqA2gbNPFpi5ewtW3gVoWIE_8gEwSHPtBJ9Pf3AJol8Ds35rEBDz7eECrobH-2pG34QYDr-uB32GifMtCVCD2bWC8M8/s18/1.gif" class="emoticon">

   49	<div class="result_wrapper">

   50	<iframe id="result_iframe" seamless="" frameborder="0" scrolling="no" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vSwWkykWUrIKl0BO67Und69Tbbr1F0_89VZsGxEBTrwNRgO3aPuIRBWlPsgVonGYgM7Q4oZre6w_vjm/pubchart?oid=310639714&format=interactive" data-ruffle-polyfilled=""></iframe>

   51

   </div>

   52

   </div>

   53

   </main>

   54

   </div>

   ver código

   imprimir?

   1

   <script>

   2	function SwitchForm() {

   3	$('#Gform').fadeOut('slow', function() {

   4	$('#result').fadeIn('slow');

   5

   });

   6

   }

   7

   </script>

   Mostrar Mais

5. Partilha a tua Sondagem

   Para terminar e agora que a tua sondagem personalizada está pronta, aqui fica o resultado do código acima:

   Que achas deste tipo de sondagem?

   Por favor, clica na tua opção preferida.

   Sondagem • Termina em 25 de Abril, 2025

   • Gosto, é bem boa.
   • Meh! Não gosto muito de sondagens.
   • Não gosto, prefiro usar algo mais profissional.

   Obrigado pelo teu voto.
   Em breve, o vencedor será revelado.

   Uma última explicação. no código acima existem duas iframes, uma relativa ao gráfico e outra "escondida" e aparentemente vazia.
   Esta iframe "escondida" tem a função de manter a janela onde se encontra o formulário aberta, ao mesmo tempo que envia o voto para o formulário.

   E sim, poderia ter utilizado javascript para obter o mesmo resultado, mas quis manter o uso de javascript no mínimo.
   Somente utilizei um pouco para fazer aparecer o gráfico dos resultados quando alguém vota.

Como devem ter reparado, mantive a coisa o mais simples possivel.
Mas caso tenha alguma questão, podes deixar a tua(s) dúvida(s) nos comentários.

E por hoje é tudo.

Até Breve.

Queres ler outro artigo ao calhas?