No video
Como salvar dados de um formulário HTML em uma planilha do Google | HTML, CSS e JavaScript Tutorial
Рет қаралды 32,139
Күн бұрынSheet Monkey: sheetmonkey.io/
Fala, pessoas! Nesse vídeo você vai aprender como salvar os dados de um formulário HTML em uma planilha do Google.
No vídeo eu mostro duas formas. Uma mais simples, apenas mexendo no HTML e outra forma mais avançada onde usamos JavaScript. E de bônus ainda mostro como fazer uma animação simples usando CSS.
Veja também:
Criando uma aplicação React do zero:
• React JS: Criando um a...
Ativando Font Ligatures no vsCode:
• Font Ligatures no Visu...
Etapas do vídeo:
00:00:00 - Explicação Inicial (Importante!)
00:00:41 - Sheet Monkey
00:02:16 - Forma simplificada
00:04:01 - Forma avançada
00:11:38 - Criando animação CSS
00:16:41 - Criando função para adicionar Loading
00:18:34 - Adicionando Loading ao enviar formulário
00:19:33 - Criando função para remover Loading
00:20:34 - Removendo Loading ao concluir o envio dos dados
00:23:40 - Final
@elizeucorrea7730 Жыл бұрын
Se você criasse um quadro onde você faz um site do zero bem simples, mas que dê de fazer uma conta com login e tudo mais... Seria muito legal. Acompanharia com muita atenção.
@user-od1on2lf8m Жыл бұрын
Cara, é um absurdo este tipo de conteúdo! Muito obrigado por contribuir tanto para comunidade!
@SNLR2011 2 жыл бұрын
Boa tarde! Querido esse vídeo é maravilhoso, tudo em seu devido lugar, parabéns! Baseado neste vídeo não teria como dar continuidade e nos orientar/ensinar a extrair os dados da mesma planilha que criamos. Para exibi-los de uma forma mais elegante... Muito obrigado!
@otaldanielpereira 2 жыл бұрын
Cara!! Incrível seu conteúdo, eu estava buscando algo pra implementar num projeto pessoal ligado a formulários, e seu vídeo caiu como uma luva! Ganhou um inscrito fiel! Gratidão 🙏🏻
@ManualdoDev 2 жыл бұрын
Eu que agradeço o apoio, Daniel! Valeu demais!
@luizvitor1045 Ай бұрын
recentemente fiz uma aplicação com api do openAI e com banco de dados no excel usando api do vídeo. Excelente dica! valeu
@rafasennin7 Жыл бұрын
Muito obrigado pela ajuda !! Gastei muito tempo tentando captar os dados de um formulário, e não cheguei a lugar nenhum. Já tinha até desistido pensado que só seria possível com banco de dados, php, e finalmente uma solução prática, otimizada e resolutiva. Nota 1000...👍👍
@tiotonynho 5 ай бұрын
Gostei muito da sua didática. Excelente explicação, cada passo a passo detalhado. Parabéns!
@tallesmayk5165 2 жыл бұрын
Cara, procurei por muito tempo uma solução como essa, até que você chegou na minha vida kkkkkkkkkkkk, muito obrigado! Mais 1 inscrito
@ManualdoDev 2 жыл бұрын
Valeu demais, Talles! Tamo junto!
@ronaldoborges2263 2 жыл бұрын
Porra canal da hora fio, direto objetivo atualizado. Parabéns 👏👏👏👏👏🎆🎆🎆
@ManualdoDev 2 жыл бұрын
Valeu, Dinho! Tamo junto!
@ericnevesr 2 жыл бұрын
Cara, que canal incrível, excelente didática!
@ManualdoDev 2 жыл бұрын
Valeu demais, Eric! Tamo junto! :D
@jhonbreno15 Жыл бұрын
Obrigado! Ajudou a implementar o formulário do meu primeiro projeto. #ProfissãoProgramador
@Ariel02able 4 ай бұрын
A primeira forma ja salvou completamente meu projeto , to fazer convite do meu casamento kkkk , e vai ser minha primeira obra de portifolio , não é muito detalhado , mas me salvou demais kkkk , muito obrigado mais um inscrito!!
@marlonberaldo5609 2 жыл бұрын
Foda demais!! Traz mais videos com banco de dados assim,, explica bem demais!!
@ManualdoDev 2 жыл бұрын
Valeu, Marlon! Vai ter mais sim! Brigadão pelo apoio!
@Goliank4987KatiUchaDiedy 5 ай бұрын
Excelente... uma continuação dom temas variados será de grande proveito!
@emanoelsena2963 9 ай бұрын
Muito obrigado por partilhar um pouco do seu tempo e conhecimento conosco!
@otaldanielpereira 2 жыл бұрын
Valeu!
@walney2008 2 жыл бұрын
quero aprender mais sobre css e javascript, nem sabia que dava para ser feito tanto como aquele pokedex, show
@felipealmeidario 2 ай бұрын
Muito bom o conteúdo. Obrigado por me ensinar a enviar pra planilha. Mas com relação ao formulário, depois que aprendi o React, nunca mais fiz Forms assim. React Hook Form salva mto isso aí 😅
@novoeu2900 Жыл бұрын
O cara e brabo além de dar aula de js ainda ensina css
@rosenildodariz2098 2 жыл бұрын
Cara, se pudesse ser uma planilha de excel no lugar do google sheet seria genial! Parabens igualmente pela didatica!
@nyc0l4ssp83 Жыл бұрын
Eu não sei se da pra enviar pro excel pq eu já pesquisei em todos os lugares possíveis e não achei
@rosenildodariz2098 Жыл бұрын
@@nyc0l4ssp83 fiz a mesma coisa, por isso acabei parando aqui..rsrs
@heyluhq 9 ай бұрын
Vocês encontraram alguma maneira? Estou batendo a cabeça para fazer isso e nao estou conseguindo@@rosenildodariz2098
@yanferreira1684 Жыл бұрын
Conteudo incrível!! To entrando no rumo de programação e seus videos estão me ajudando muito, valeu mesmo!
@fefelipato 3 ай бұрын
Conteúdo foda bro, me ajudou demais
@GuilhermeHallmann 2 жыл бұрын
Boa Rolwane, tua didática é muito boa! Lança uns vídeos de css aí, tu que é fera nisso.
@ManualdoDev 2 жыл бұрын
Muito obrigado, Guilherme! Vem conteúdo de css aí sim em!
@psduck100 2 жыл бұрын
Parabéns pela didática. Traz mais vídeos de CSS ajuda muito valeu...👊
@EdsonSoterodosSantos-mv4tq Жыл бұрын
Boa noite! sempre vejo muitos videos no you tube sobre html, css e javaScript... mas esse era uma pergunta nao respondida que havia em mim a muito tempo...colocar os dados de um html em uma planilha muito agrradecido estou pela tua existencia.. que sejas recompensado! continuo dizendo ainda ..direto e objetivo.. mostrou a forma simples para quem esta iniciando igualmente a mim e a forma mais avançada para outros... sem esconder nada é de videos assim que precisamos... se tu tiveres curso desse tipo pode dizer que eu faço. apenas faco uma outra pergunta é possivel isso no excel tambem . e teriaa forma reversa exemplo levar da planilha para o html e exiber na pagina tipo lista sem aquela complexidade das apis para quem esta começando.
@luizsandoly 2 жыл бұрын
muuuuuuuuuito bom maninho, to adorando o canal!!! tem quebrado um galho e tanto, valeuuuu!!!
@ManualdoDev 2 жыл бұрын
Valeu demais, Luiz. Tamo junto! :D
@walney2008 2 жыл бұрын
que maravilha de video, estou aprendendo javascript , ^^, desejo aprender mais sobre como criar e consumir API, com tokens , tipows essas do ifood e tambem usar o postman, para mim e um mundo novo, somente entende de desktop, delphi, ^^
@edyelguecarneiro2489 Жыл бұрын
Que didática sensacional!!!
@ph.paulohenriique 2 жыл бұрын
Incrível essa sua didática
@andresouzaoffice 4 ай бұрын
Importante solução este tutorial, obrigado.
@elizeucorrea7730 Жыл бұрын
esse lance de animação é muito legal.
@adryanmaikel9585 11 ай бұрын
Exatamente o que eu queria! Demais muito obrigado
@gabrielbuenozemuner Жыл бұрын
Que conteúdo e didática sensacionais cara, parabéns! Gostaria que você fosse meu professor particular kkkkk, criar projetos com html + css + javascript tentando pensar do zero têm suas várias complicações batendo cabeça, mas vou chegar lá! Você poderia compartilhar os arquivos css e javascript dessa aula? Fiquei interessado nos efeitos que você fez no input... E se estiver disposto a dar aulas particular (principalmente ajudando na criação de vários projetos e correções) pode avisar que eu tô dentro hahahaha Obrigado!
@TutosGamesGK Жыл бұрын
exatamente o que eu procurava, obrigado
@FunctionDev Жыл бұрын
nossa estava precisando disso, estou montando meu portifolio, e queria recuperar os dados do form de contato, e não queria usar o google forms, esse pacote vai funionar perfeitamente.
@adevaldosantos8481 4 ай бұрын
conteúdo incrível!!! Muito obrigado!! mais um inscrito
@caiorocha027 2 жыл бұрын
excelente meu irmão, parabéns
@lehunteerz Ай бұрын
meu amigo , muito bom seu canal, euto a procura de como criar um formulario html, css ,js php onde o usuario enviar os dados , e chegasse ao email pessoal ! ate agora nao consegui, sou iniciante nesse ramo !
@italo.felipe 2 жыл бұрын
Muito bom, só esqueceu que as vezes o cliente é meio louco e clica varias vezes no botão, você teria que desabilitar ele também, para não enviar muitas request!
@ManualdoDev 2 жыл бұрын
Boa, Italo! É sempre bom garantir o bom funcionamento em todas as situações. Inclusive no caso do cliente ficar clicando sem parar pra fazer requisição hahahah Bem lembrado!
@marcusnunes5970 11 ай бұрын
Você poderia criar um Crud vão ficar muito bom, me ajudar muito, obrigado pelas excelentes aulas.
@pedronascimento369 Жыл бұрын
Muito bom! Parabéns. Poderia fazer uma pegando os dados da planilha?
@TyagoASouza Жыл бұрын
Gostei bastante da explicação
@MrCaramos 2 жыл бұрын
Parabéns pelo conteúdo, muito bom!
@ManualdoDev 2 жыл бұрын
Valeu, César! 😁
@vvun2902 2 жыл бұрын
@@ManualdoDev ຂອງທ່ານດຣເພັດສີນວນພະນັກງານລັດຖະກອນພາຍໃນກະຊວງແລະບັນດາ
@eng.wandeson 2 жыл бұрын
Aulas muito legais!
@devsilvamarcus 7 ай бұрын
Baita vídeo amigo!!! Me salvou!!!!
@anderolii Жыл бұрын
Coisa linda! Mt obrigado
@valdecirlucianodasilva7660 Жыл бұрын
valew pelo video mano
@guilhermerosa3932 2 жыл бұрын
Parabéns, Muito top!
@ManualdoDev 2 жыл бұрын
Valeu, Guilherme! 😁
@devicz Жыл бұрын
muito bom o video parabéns
@josecarlossilva7136 2 жыл бұрын
Excelente Dica.
@user-qi4pi9gr1w 10 ай бұрын
tem como fazer direto para a planilha do google sheets, sem o site monkey que é pago e só libera para um form e inicialmente pede todo acesso a nossa conta google inclusive exclusão de dados da conta
@AndersonCSilva-mv8br Жыл бұрын
Bom dia, estou começando agr na área da programação, gostei muito desse conteúdo da planilha e tudo, teria mas exemplos como esse langind page, ou um formulário de cadastro , mas utilizado html, css e javascript, e utilizando alguma biblioteca ou framework, para iniciantes flw pela atenção e pelo conteúdo também..
@angelolunardelli6805 Жыл бұрын
como eu faço pra dar um refresh automático na página quando o usuário da um submit em alguma dado de entrada? Por exemplo, pra fazer uma pesquisa na saída de um estabelecimento com um checkbox de sim ou não, temporizar uma msg de agradecimento e retornar a página de pesquisa.
@emanuelr.freitas2246 Жыл бұрын
Como consigo fazer as informações ficarem uma abaixo da outra com o preenchimento do input ao lado? Entende a pergunta?
@ismael8695 Жыл бұрын
Olá, como posso guardar dados, por exemplo o nº de click que uma pessoa faz em um button?
@ederson2905 Жыл бұрын
Muito legal, vou seguir. Queria sugerir : Sempre que encontramos algum tutorial ele sempre usa formulários que colocam os dados em planilha que possuem esses dados de forma contínua mas nenhum que envie dados em colunas diferentes das planilhas. Exemplo: Formulário com nome e senha mas na Planilha temos a seguinte ordem das colunas: nome, aniversário, cfp e senha. Veja que os dados do formulário entrariam nas colunas 1 e 4, respectivamente e as colunas aniversario e cpf (que estariam no meio), ficariam vazias. Seria interessante um tutorial sobre isso, sem sheemonkey, sheetdb ou similares. Seria interessante tb um tutorial apenas com JavaScript, SEM sheemonkey, sheetdb ou similares. Teria tb como disponibilizar os códigos feitos nos vídeos?
@leandrorodrigues8549 Жыл бұрын
Muito legal isso. Tem como fazer isso mas com uma planilha do Excel online? O Microsoft Forms faz isso, mas falta customização do formulário.
@eduardocardoso1149 2 жыл бұрын
faz uma segunda parte ensinando a acessar e manipular esses dados, tipo autenticando o login
@paulovinicius870 10 ай бұрын
E como fazer para obter os dados da planilha e apresentar para o usuário? Basta dar um get e retornar um json?
@joevaldo1 Жыл бұрын
Faltou você exibir os conteúdos do .js ocultos e outras pastas além finalizar a tela de login com a limpeza dos caracteres da tela. Escrevi mas tem scripts pendentes para a reprodução conforme exibido no vídeo.
@chapahallss Жыл бұрын
Aprendendo a programar em 2023 e que sorte cair no seu vídeo. Parabéns brother! Conteúdo e didática excelente. Talvez não consiga responder, mas vou deixar uma dúvida mesmo assim. Ao utilizar essa API, a url da planilha fica visível no código fonte? Se houver dados sensíveis no formulário, como é o caso do endereço de e-mail, devido a lgpd, isso não seria um problema? Outra dúvida, o próprio Google não teria um API para esse fim? Acredito que essa solução seja paga, correto? Mais uma vez, obrigado por compartilhar seu conhecimento. Um abraço!
@ManualdoDev Жыл бұрын
E aí, Alessander! Tudo beleza, cara? No caso, quando precisamos usar alguma informação que não pode ficar visível no código, como uma URL ou uma chave secreta, a gente usa uma coisa chamada variável de ambiente. De uma forma beeem simplificada, imagina que essa variável de ambiente vai ficar salva na sua máquina (ou no ambiente que a aplicação tá rodando). É como se a gente criasse essa variável fora do código, e usasse essa variável na nossa aplicação. Assim não teria nenhum dado sensível visível no nosso código. E sim, o Google tem uma api que a gente pode trabalhar com planilhas. Só que ela é um pouco mais complexa de usar, maas também é muito mais poderosa. Dá pra fazer praticamente tudo. É uma api bem legal… Vou planejar um vídeo pra mostrar pra vocês. Valeu demais pelo apoio! Tamo junto!
@marlonberaldo5609 2 жыл бұрын
Se o email ja estiver cadastrado, como faz pra nao repeti-lo ou exibir uma msg de que o usuario ja esta cadastrado?
@kazbonfim5061 2 жыл бұрын
Procure sobre como criar comparadores de valores não específicos via JS, isso deve resolver. A ação ao clicar em enviar, por exemplo, deve comparar os valores que estão descritos nos campos e comparar rapidamente com entradas para ver se não existem semelhantes.
@raeldosbeats 8 ай бұрын
Muito bom! É possível fazer CRUD?
@samuel.oliveiraBRA Жыл бұрын
Parabéns pelo conteúdo! Perfeito. Teria como fazer isso para uma planilha local do Excel?
@BiancaAraujoMachado 5 ай бұрын
É possível criar uma planilha (que seja escrita pelo site) em html? Além disso, tudo que for escrito pelo site nessa planilha deverá ficar salva no site para visualização
@vivians1495 24 күн бұрын
Legal! mas eu queria usar uma folha do excel como se fosse um banco mesmo, não só enviando os dados mas fazendo put e delete.
@emanuelr.freitas2246 Жыл бұрын
Eu queria fazer um forms que ao invés de ir para uma planilha ele vá para um modelo de ficha no word, sabe me informar como fazer?
@neurocientista 2 ай бұрын
como envio um checbox unico via json....tipo autorizo envio ?
@luancanuto4254 Жыл бұрын
muito bom!!!
@walney2008 2 жыл бұрын
como é feito aqueles forms que possamos ir arrastando os componentes e colocando na tela como é feito no bubble por exemplo ? gostaria de ter um editor assim , para gerar os codigos em html, existe algo do tipo ?
@kiritto6743 11 ай бұрын
Como que faz pra obter/alterar/excluir dados?
@rafinha-dev 6 ай бұрын
Conhece o MailChimp? O que acha dessa soluçao em relaçao a ele?
@geracaoepoca52 2 жыл бұрын
Boa noite!! Como faço para colocar html personalizado interligado com google sheets:
@JoaoPedro-eu6xb 3 ай бұрын
Cara o meu esta dando um erro que é: "There was an error trying to connect to google. You need grant sheet monkey permission to acess your google Drive." Ja dei a permissao pra ele acessar o meu drive mas nao vai.
@fernandotavares3605 2 ай бұрын
Vc tem formação em quais áreas da computação?
@naasomgabriel9484 8 ай бұрын
Gostaria de saber se consigo resgatar os dados da planilha e imprimir na página
@gaugary 2 жыл бұрын
Boa noite, vecê não gostira de fezer um crud com este conteúdo? Abraços, parabéns!
@pabloplargado Жыл бұрын
boa tarde a todos !! meu cadastro envia mas o Monkey no recebe alguem sabe dizer porque , link correto , form correto e mesmo assim a planilha nao recebe os dados , alguem pode me ajuadar , obrigado
@progrmes6837 2 жыл бұрын
Cara como Faria para puchar o input caso fosse uma Id , lá no Js
@djleoalves. Жыл бұрын
Muito bom o video, ajudou muito, mas no caso de um formulário mais complexo, eu adicionei mais de 100 inputs e não foi, tem algum limite de dados da sheet monkey?
@RTMontGamer 6 ай бұрын
cara eu to tentando salvar em uma planilha MySQL dessa forma eu consigo? Vou tentar aqui.
@NERDboy 2 жыл бұрын
se aprofunde, sim em css e animações................ kkkk pf esse conteúdos quase a gente não encontra, muito.. ainda mais com uma didática boa assim
@user-cr8fw5nu8j 4 ай бұрын
consigo fazer com 6 campos no formulário ?
@WaGames Жыл бұрын
gostei bastante, vai ter a leitura destes dados tambem ?
@mcaronzinhos.p125 2 жыл бұрын
Bastante Conteúdo
@alp1s351 Жыл бұрын
Boa tarde, eu tenho 150 mil lojas, com nome, cep e telefone em uma planilha, comoveu faço pra passar isso pro html ???, Poderia me ajudar pfvr
@paoladossantosmoreira8791 5 ай бұрын
Fala, conseguiu?
@giovannirosadosanjos8151 7 ай бұрын
Alguem sabe como por aquele simbolo ==> tudo junto?
@nilsonrodrigues6879 2 жыл бұрын
Da pra fazer isso com nodejs, no lugar de javascript?
@TheLissim 2 жыл бұрын
muito bom
@ManualdoDev 2 жыл бұрын
Valeu, Wallison!
@N0TZ3R0 2 жыл бұрын
Muito bom mano, obrigado por passar esse conhecimento adiante ;) sub += 1
@joevaldo1 Жыл бұрын
Se possível favor passar estes arquivos para eu me aprofundar no java.
@mar-tchelo 2 жыл бұрын
Top de mais! Uma Duvida, consigo recuperar os dados salvos e editar também?
@ManualdoDev 2 жыл бұрын
Fala, Marcelo! Beleza? Cara, pelo sheetmonkey acredito que não, mas se não me engano o Google possui uma api onde é possivel ler e escrever em planilhas. Vou pesquisar melhor e de repente faço um vídeo sobre isso. Valeu!
@Infoprodutos034 10 ай бұрын
Então quer dizer que só consigo guardar informações de um formulario usando uma url de 3° ?? sera que da pra usar outra forma gratuita.
@ManualdoDev 10 ай бұрын
A própria Google possui uma api para isso. Com ela você consegue criar planilhas no seu drive, excluir, incluir dados na planilha, ler os dados, atualizar e tudo mais. Mas é bem mais complexo de se usar.
@carloscarvalho8924 Жыл бұрын
Amigo teria como salva em pdf ou txt?
@marcusviniciusbernardes9413 22 күн бұрын
Como salvar isso em um banco de dados?
@puroroxo6582 Жыл бұрын
tem como salvar em uma planilha excel?
@Trickmagic1992 2 жыл бұрын
Top, mas faltou a parte de limpar o conteúdo após envio.
@ManualdoDev 2 жыл бұрын
É verdade Franklin! Acredita que eu fiz, mas cortei? kk Achei que não tinha ficado legal do jeito que falei kkkk
@Trickmagic1992 2 жыл бұрын
@@ManualdoDev blzz :)
@walney2008 2 жыл бұрын
Outra coisa no celular tem jogos tipo de piano, que podemos tocar, sanfona, bateria, como isso é feito ? como criar apps de musicas para celular , web, ?, outra coisa, se puder não fechar as tags da explicação, pois eu pauso o video e copio, ^^
@humberto4802 2 жыл бұрын
Pode ensinar com excel ?
@victorhenrique5205 2 жыл бұрын
ensina a fazer um CRUD em javascript, preciso para fazer um software pro meu tcc kkkkkkkk
@ManualdoDev 2 жыл бұрын
É uma boa ideia, Victor! Já já esse tcc sai kkkk
@victorhenrique5205 2 жыл бұрын
@@ManualdoDev kkkkkkkkkkkkkkkk
Rodrigo Mello
Рет қаралды 2,4 М.
GreatStack
Рет қаралды 100 М.