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. :D
No exemplo que vou demonstrar, além do Google Forms :proud: , 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. ;)
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. :)
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:
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.
Intervalo de dados
Aqui não deverá ser necessário alterar nada.
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.
Valor
Aqui não deverá ser necessário alterar nada, em princípio deve ser o Carimbo de data/hora com soma...
Estilo de gráfico
Em Cor de fundo, escolher Nenhuma, as restantes opções deixar como estão.
Mas seleccionar Maximizar e 3D.
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:
Setor do gráfico circular
Aqui é onde personalizamos a Cor e distância do centro de cada resposta no gráfico.
Títulos do gráfico e do eixo
Nesta secção definimos como se apresentam os títulos.
No meu caso, deixei tudo inalterado.
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. :D
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:
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 é:
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":
<form method="POST" action="https://docs.google.com/forms/d/e/1FAIpQLScfQltdJT9RLVszG_z1WrAuBAhPgIKzsKB16lYlynYtDbSUMg/formResponse"> <!-- Adicionaremos cada campo em breve --> </form>
Agora vamos adicionar os três campos das respostas, que consiste de uma label e um input para cada resposta:
<label for="nome">Nome</label> <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:
<button type="submit">Enviar</button> <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:
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.
E assim chegamos quase ao fim, basta só deixar aqui o código completo de como personalizar esta sondagem teste:
<style>
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@100..900&display=swap");
:root {
--canvas: 220;
--bg: hsl(var(--canvas), 15%, 22%);
--fg: hsl(var(--canvas), 39%, 95%);
--link: hsl(var(--canvas), 90%, 80%);
--linkh: hsl(150, 95%, 70%);
--wgt: 200;
/* vars */
--post-bg: rgb(14, 14, 17);
--t: .4s;
--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);
--ease-bar: linear(
0, 0.005, 0.02, 0.045, 0.081 5%, 0.16 7.6%, 0.463 16.6%, 0.558, 0.639, 0.709,
0.769, 0.82 33.3%, 0.863 37.1%, 0.902 41.6%, 0.932 46.5%, 0.956 51.9%,
0.973 58.2%, 0.985 65.3%, 0.992 73.8%, 0.997 84.7%, 0.999
);
--trans: all var(--t) var(--ease);
}
#poll_test {
font-family: heebo, sans-serif;
color: var(--fg);
background: var(--bg);
font-weight: var(--wgt);
padding: 5px;
display: grid;
place-items: center;
height: 100%;
}
#poll_test h3 {
font: normal bold 25px 'Julius Sans One';
margin: 0.5em auto .45em;
display: block;
width: 100%;
text-align: center;
border-bottom: 1px solid hsl(0deg 0% 100% / 10%);
line-height: 50px;
}
#poll_test .post {
padding: .05rem 1rem 2rem;
padding-left: 3rem;
border-bottom: 1px solid hsl(0deg 0% 100% / 10%);
}
#poll_test .poll-details {
font-size: 0.75rem;
font-weight: 400;
color: hsl(240deg 15.6% 78.63% / 65%);
}
#poll_test .poll-choices {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
#poll_test .poll-choice label {
padding-inline: 1rem;
display: flex;
justify-content: space-between;
border-radius: 0.5rem;
border: 1px solid rgb(76, 76, 92);
position: relative;
isolation: isolate;
transition: var(--trans);
cursor: pointer;
}
#poll_test .poll-choice label:hover {
box-shadow: 0 0 10px rgb(76, 76, 92, 0.5);
cursor: pointer;
}
#poll_test .poll-choice .poll-label {
gap: 0.5rem;
overflow: hidden;
width: 100%;
min-height: 44px;
display: flex;
align-items: center;
font-weight: 400;
margin: 0;
z-index: 1;
}
#poll_test .poll-choice .answer {
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: block;
filter: none;
transition: var(--trans);
}
#poll_test .poll-choice .poll-label .radio {
display: flex;
transition: var(--trans);
overflow: hidden;
flex: 0;
}
@layer app {
#app {
width: 380px;
width: 80%;
height: 460px;
background: var(--post-bg);
border-radius: 8px;
}
#app ul, #app li {
margin: unset;
padding: unset;
list-style: none;
}
#app input {
width: 16px;
height: 16px;
appearance: none;
background-color: rgb(76 76 92 / 10%);
border: 1px solid rgb(76 76 92);
box-shadow: inset 0 0 0 1px transparent;
border-radius: 100%;
padding: 0;
margin: 0;
}
#app p.text {
margin: 0;
}
}
#poll_test button {
margin: 2rem 3rem;
padding: .5rem 1rem;
background: rgba(235,235,255,0.15);
color: inherit;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 0.5em;
font-weight: 500;
-webkit-appearance: none;
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
&:hover {
background: rgba(235,235,255,0.2);
}
}
#result {
display: none;
padding: 10px;
}
#result .result_wrapper {
position: relative;
width: 100%;
height: 450px;
}
#result_iframe {
display: block;
margin: 0 auto;
position: absolute;
top: -5%;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
padding: 20px;
}
iframe.hidden {
display:none;
}
@media screen and (max-width: 745px) {
#poll_test {
place-items: unset;
}
#poll_test .post {
padding-left: 1rem;
}
#poll_test .poll-choice .answer {
white-space: normal;
}
#result_iframe {
transform: scale(0.95);
top: 0;
padding: 0;
}
@layer app {
#app {
max-width: 100%;
width: 100%;
height: 550px;
}
}
}
</style>
<div id="poll_test">
<main id="app">
<h3>Que achas deste tipo de sondagem?</h3>
<iframe name="iframe" width="0" height="0" tabindex="-1" class="hidden"></iframe>
<form id="Gform" action="https://docs.google.com/forms/d/e/1FAIpQLScfQltdJT9RLVszG_z1WrAuBAhPgIKzsKB16lYlynYtDbSUMg/formResponse" method="POST" onsubmit="SwitchForm()" target="iframe">
<div class="post">
<p class="text">
<legend for="1097205506">Por favor, clica na tua opção preferida. :) </legend>
</p>
<section class="poll">
<div class="poll-details">
Sondagem • Termina em <span class="strike">22 de Maio, 2025</span>
</div>
<ul class="poll-choices">
<li class="poll-choice choice-1">
<label for="choice-1">
<div class="poll-label">
<div class="radio"><input class="poll_option" type=submit id="choice-1" name="entry.1966452611" value="Gosto, é bem boa." /></div>
<div class="answer" data-answer="Gosto, é bem boa.">Gosto, é bem boa.</div>
</div>
</label>
</li>
<li class="poll-choice choice-2">
<label for="choice-2">
<div class="poll-label">
<div class="radio"><input class="poll_option" type=submit id="choice-2" name="entry.1966452611" value="Meh! Não gosto muito de sondagens." /></div>
<div class="answer" data-answer="Meh! Não gosto muito de sondagens.">Meh! Não gosto muito de sondagens.</div>
</div>
</label>
</li>
<li class="poll-choice choice-3">
<label for="choice-3">
<div class="poll-label">
<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>
<div class="answer" data-answer="Não gosto, prefiro usar algo mais profissional.">Não gosto, prefiro usar algo mais profissional.</div>
</div>
</label>
</li>
</ul>
</section>
</div>
<button type="reset" value="Reset">Limpar</button>
</form>
<div id="result">Obrigado pelo teu voto.<br>
Em breve, o vencedor será revelado. :)
<div class="result_wrapper">
<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>
</div>
</div>
</main>
</div>
<script>
function SwitchForm() {
$('#Gform').fadeOut('slow', function() {
$('#result').fadeIn('slow');
});
}
</script>
Para terminar e agora que a tua sondagem personalizada está pronta, aqui fica o resultado do código acima:
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. :-F
Comentários
Malta, comentem, tanto críticas como elogios serão bem-vindos. E eu respondo, não prometo quando mas respondo.
Mas antes de comentarem, leiam as minhas Regras dos Comentários.
Se quiserem deixar o link para o vosso sitio, utilizar alguns estilos ou até inserir videos ou imagens nos comentários DEVEM mesmo ler as indicações nas Regras dos Comentários.
Caso prefiras comentar numa nova janela, ou se o formulário abaixo estiver nos dias ruins, podes clicar aqui.
Enviar um comentário