09/01/2014

Como colocar na lateral do blog um formulário do Google Docs | Blogger

Muitas pessoas procuram a melhor maneira de apresentar aos seus leitores formulários seguros. Desde fazer o formulário através de HTML e PHP para os mais engenhosos com a programação a ferramentas online para todos, existem algumas opções para o conseguir. Hoje, venho-vos mostrar como colocar um formulário do Google, sempre presente na barra lateral do vosso blog, como o da imagem abaixo.



A) Vamos começar por criar o formulário no Google Drive.

1. Visite o site do Google Drive AQUI, conheçam um pouco as suas funcionalidades e sigam os passos para começar o seu uso. Se já utilizou o Drive, basta fazer login.

2. Já no nosso perfil, escolham CRIAR e Formulário.


3. Irá abrir uma página onde pode escolher o título do documento e no tema escolham Predefinição (os fundos dos outros não vão aparecer). Dão o OK.


4. Vemos agora a página onde podemos criar realmente o nosso formulário. Existem muitas funcionalidades por explorar, aqui só vou mostrar as que necessitei para fazer o formulário mostrado.



a) Podem modificar o nome do formulário, este não é o título que vai aparecer no blog;
b) Podem colocar uma pequena descrição que vai aparecer em cima dos campos e abaixo do título;
c) Nome da pergunta corresponde ao que querem que o leitor escreva como Nome, Telefone, etc.;
d) Texto de ajuda podem dar instruções de como preencher como por exemplo "Preencha com o assunto Parceria"; (Este só aconselho mesmo se for necessário nos formulários laterais, fica confuso com muitas descrições)
e) Tipo de pergunta é onde definem como querem a resposta. O normal é texto. Se for uma data de nascimento escolhem data, se for um texto maior um parágrafo e podem ainda escolher escolha múltipla ou caixas de verificação;
f) Se quiserem que uma resposta seja obrigatória, apenas têm que fazer o visto em Pergunta Obrigatória.

Basta carregar em Concluído e têm o primeiro campo feito.

5. Para acrescentar novo campo, dão clique em Adicionar item. Ao carregar na setinha, podem já escolher o tipo de pergunta que querem. A partir daqui, repetem sempre estes passos até terem todos os campos construídos.


6. Em baixo encontram uma caixa com a descrição Página de Confirmação.

Onde podem ver "A sua resposta foi registada." é a mensagem que vai aparecer por defeito depois de concluído o formulário. Podem modificar para uma personalizada por vocês. De seguida, podem dar ao leitor novas chances de enviar outra resposta, de deixar os leitores ver as respostas uns dos outros e modificar as respostas que deram anteriormente. Todas estas opções dependem do propósito a que estão a construir o formulário.


7. O vosso formulário estará então concluído e automaticamente guardado. Para ter o formulário aberto a respostas deve estar com "A aceitar respostas", se quiserem o mesmo fechado deve estar "Não aceitar respostas" e podem mudar a qualquer hora.



 8. Por fim, para conseguirem ver as respostas, inicialmente devem escolher no menu Respostas > Ver respostas através do Excel. Automaticamente, vai ser criado um ficheiro em excel com o nome - Algo - (Respostas) que se vai encontrar na vossa listagem de documentos criados, ficando assim para manutenção 2 ficheiros: 1 de formulário e 1 excel com as respostas. No formulário, a partir desse momento, só vai aparecer a opção "Ver respostas" que os levará para o excel.

Exemplo de como é o excel online. Todas as respostas vão aparecer aqui automaticamente depois do leitor preencher.

B) Como receber no e-mail a notificação de que alguém preencheu o nosso inquérito?

É possível fazer o controlo das respostas que recebemos com o Google Drive, incluindo receber-mos sempre que alguém preenche, volta a preencher, modifique dados (se estas duas últimas estiverem selecionadas na caixa de Página de Confirmação) ou um resumo diário. 

Para isso, precisam abrir o excel criado automaticamente pelo Drive com o nome - Algo - (Respostas), escolher no menu Ferramentas > Regras de Notificação.


Vai aparecer um quadro onde pode escolher então como quer ser notificado, onde pode escolher todas ou as que mais lhe convêm.


É importante ressaltar que vai ser enviado para o email que aqui aparecerá. Isso não impede de receber noutro e-mail. Com uma pequena pesquisa no google, descobre como redirecionar e-mails do Gmail para o Hotmail ou vice-versa para a conta ou contas que quiser. Se for numa parceria por exemplo e as duas partes quererem receber notificações, o melhor é registar-se com um novo e-mail aqui no drive e redirecionar os e-mails para o endereço de cada.


O formato do e-mail será este, nunca expondo os dados dos leitores diretamente, ao contrário de outras ferramentas. Sou a favor desta escolha da Google, pois as contas de e-mail são o mais fácil de invadir e estariam expostos imensos dados sensíveis. 

C) Por fim, preparar o blog para receber o código do formulário

1. Ter um modelo com lateral. No Blogger Modelo > Personalizar > Esquema > Esquema do corpo;



2. Se já têm um blog definido em esquema com lateral, vá a Esquema no Menu principal > Adicionar uma miniaplicação;



 3. Procurar por HTML/JavaScript > Adicionar clicando no "+";


4. Vai surgir esta página onde pode modificar o título e será este que aparecerá no blog. Em Conteúdo é onde vai colocar o código HTML do formulário feito anteriormente.


Respire fundo! Estamos quase quase! Embora venha a pior parte agora, vai ver que é muito simples!

5. Volte ao ficheiro de formulário no google drive e escolha "Ver formulário online".


Vai abrir um novo separador onde vê o seu formulário. Dê um clique no lado direito do rato a meio da página. No meu caso, visto ser um Macbook e estar a utilizar o Chrome, aparece-me "Inspecionar elemento", mas pode aparecer "Ver código-fonte", "Exibir" -> "Código-fonte", depende do SO, do Browser, etc. Vai abrir uma página cheia de código. 




6. Procure a div que dá inicio ao formulário. No meu caso é <div class="ss-form">. Precisa copiar esse código todo, até fechar o formulário com </form></div>. No caso do Macbook, basta selecionar a div marcada na imagem, clicar com dois dedos, selecionar a opção Copy as HTML e vai copiar tudo o que é necessário.

Nota: Se não encontrarem o final, procurem por:

<div class="ss-secondary-text">Nunca envie palavras-passe através dos Formulários Google.</div></td>

</tr></tbody></table></div></ol></form></div>

7. Volte à janela aberta da miniaplicação e cole em Conteúdo. Pode guardar já assim, no entanto, por baixo de todas as caixas vai aparecer "Esta é uma pergunta obrigatória", o que torna o formulário confuso e aparece mesmo às que não são. As perguntas obrigatórias são identificadas com um asterisco, que na minha opinião chega para o leitor perceber o propósito. Para retirar isso, basta procurar todos os "<div class="required-message">Esta é uma pergunta obrigatória</div>" e apagar.

8. Também aparece no final do formulário a mensagem "Nunca envie palavras-passe através dos Formulários Google.". Embora seja importante a mensagem, pode querer uma outra e para isso basta apagar esta parte e modificar ou, pode não querer nada abaixo do botão enviar e para isso basta apagar isto "<div class="ss-secondary-text">Nunca envie palavras-passe através dos Formulários Google.</div>". Guarde.

Pode colocar a miniaplicação onde quiser, apenas em Esquema tem que o arrastar para onde quiser e Guardar Disposição.

O seu formulário deve estar então finalmente prontinho!

Atenção: O formulário pode ser destinado a quem o constrói, a quem tem o link ou se o quer no seu blog para todos os leitores deve estar público. Para ver com quem está partilhado o seu formulário, vá no menu a Ficheiro > Adicionar colaboradores > Quem tem acesso. Carregue em alterar e escolha a opção que deseja.


Sem comentários:

Enviar um comentário