Como adicionar formulários de contato a um site Hugo Static

1. Introdução: Olá, meu nome é Sean. Sou professor e desenvolvedor web e bem-vindo ao meu curso sobre como adicionar formulários de contato a sites estáticos Hugo. Formulários de contato são fatores dinâmicos que, por padrão, não funcionam em sites estáticos. Neste curso, vou orientá-lo pelo processo de criação de formulário de contato com Bootstrap, CSS, classes de utilitários e HTML. Também mostrarei algumas maneiras de personalizar o formulário. Em seguida, analisamos o envio do formulário diretamente para o ponto final. E vamos usar um provedor terceirizado para isso. Em seguida, analisaremos a criação de um envio de formulário ajax com JavaScript para que o paciente não recarregue. E, em seguida, analisaremos o recebimento e processamento das respostas da APR e exibi-las com JavaScript. Mas não se preocupe, se você achar esses dois complexos, você é mais do que bem-vindo para parar na segunda etapa. Vejo você no curso. 2. Como começar com o projeto: Para começar com o projeto, necessário baixar os arquivos na seção de recursos do arquivo zip, que é chamado Start Here, dot zip. Como alternativa, você pode baixar os arquivos do GitHub e isso está no próximo slide. Depois de extrair os arquivos e, para abrir a pasta inteira com o Visual Studio Code. E vou te mostrar isso em um momento. Antes de fazer isso, você deve ter o seguinte software instalando as versões mais recentes. É o código do Visual Studio, node.js, que inclui o NPM. E se estiver no Windows e também incluir chocolaty. E você precisa de Hugo, estendido. E estendido é, na verdade, o padrão para Mac e Linux. Mas se você estiver usando o Windows, você deve ter certeza obter a versão estendida do Hugo. E, opcionalmente, você precisará da CLI e do GitHub Desktop. Eu recomendo aqueles para salvar seu progresso de trabalho no GitHub, é um ótimo lugar para fazer backup do seu trabalho e também você pode compartilhar seu progresso. Fizemos outros alunos, se você precisar de ajuda ou feedback. False para cada lição foi armazenado em um repositório público do GitHub. Você pode obter a primeira lição de Skillshare na seção de recursos dois. Mas para todas as lições, se você precisar verificar seu progresso, se você tiver algum problema e solucionar problemas, poderá pegar essas quedas do repositório do GitHub. Criei um link na seção de recursos para que você possa acessá-lo e cada lição tem sua própria ramificação. É uma maneira de acessar os arquivos é baixar um arquivo zip dessa ramificação. Embora se você usar a opção de clonagem, certifique-se de excluir a pasta dot Git para que você possa começar de novo com seu próprio bom histórico e mostrarei como isso funciona agora com o download do arquivo zip. Então, depois de clicar nesse link, você pode escolher a ramificação para o número da lição. E então, a partir daí, se você for para o código, você pode baixar o arquivo zip. Essa é a maneira mais fácil de se fazer. Se você usar a opção de clonagem ou usar o GitHub desktop, certifique-se de excluir essa pasta dot get. Se você quiser enviar esse trabalho para obter o hub você mesmo. Eu recomendo usar o arquivo zip. É muito mais fácil. Depois de baixar os arquivos. Para a primeira lição, você configurou. Acabamos de fazer um código de acordo com minhas instruções no meu curso de introdução aqui, você terá a opção de abrir com codificação e o menu contextual. E depois de abrir com código, você vê que temos um monte de pastas e, na parte inferior, temos scripts NPM, e eu os configurei para você para que você possa começar imediatamente. Você precisa ter o Hugo instalado e vocês devem estar no seu caminho para que isso funcione. Temos algumas opções que você pode querer usar o dev e que executam o servidor de desenvolvimento. Eles já visualizaram que você provavelmente não precisará para este curso, mas isso criará rascunhos e também páginas futuras. A página foi marcada como rascunho ou a data é no futuro. visualização inoperante realmente executará essas páginas. Bill em si é para construir Hugo para a pasta pública. Então você vai fazer o upload para o FTP. Eu tenho uma recomendação que você confira meu curso no Netlify. Você pode obter uma hospedagem gratuita no phi e tudo o que você precisa fazer é executar um git commit. E há algum para fazer qualquer upload ou construção de FTP. Há disco de vermelhidão, e o disco permite que você realmente veja os arquivos na pasta pública enquanto o servidor Hugo está em execução. E também tenho uma prévia e produção. Produção. Um é ótimo para verificar a versão de produção real do site antes de enviar seu código. Também incluí a verificação do npm para você, e isso é para atualizar as dependências do NPM. E a versão Hugo lhe dirá qual versão do hugo você instalou. Então, para começar com a versão Dodd Frank Hugo, apenas para verificar qual versão do hugo você instalou. E voltaremos à minha mente, tenho um que quero instalado. Tudo o que você precisa fazer é que você precisa executar o npm install. A primeira vez que você abre esta pasta. O motivo é que a pasta de módulos de nó não estará lá. Não adianta fazer upload em módulos de nó para obter porque ele torna o repositório muito grande. É muito mais fácil ignorá-lo do Kip e depois instalar manualmente. Depois de baixar os arquivos do GitHub, certifique-se de executar o npm install. Ele tirará todas as dependências do package.json. Porque o que eu fiz foi , na verdade, configurar o JavaScript e o SES totalmente. Eu tenho um curso sobre SESS com Hugo e Bootstrap, e também tenho um curso sobre construção de JavaScript, mas eu realmente configurei isso para você. Se você entrar na pasta de pacotes, verá a ESPN chamada de reticências, e isso está configurado e pronto para uso. Você precisará ter os módulos de nó instalados para o lado SCSS disso. Caso contrário, estou ansioso para vê-lo no curso e ver seu progresso. 3. Criar um formulário de contato: A primeira coisa que faremos para começar a criar o formulário é que vamos executar o servidor de desenvolvimento agora, se você tiver uma nova versão do Visual Studio Code , por padrão, o plugin de scripts do NPM está instalado e ativado. E você pode executar qualquer um dos scripts do NPM que eu já incluí para você com o botão Reproduzir ao lado do servidor de desenvolvimento. E ele vai muito rápido nisso em comparação com outros geradores de locais estáticos. E depois de iniciar o conjunto de desenvolvimento, mas podemos visualizá-lo no navegador usando um clique de controle. Temos um simples sites Hugo com a página inicial. E eu incluí uma única página sobre a qual liguei. Vou criar outra página única, que será a página Contato. Então, fecharemos esse terminal por enquanto. O servidor continuará sendo executado. Se entrarmos no conteúdo e copiaremos e colaremos a página sobre. E vamos renomeá-lo para entrar em contato. E isso é para o URL. Mas temos que entrar e renomear o título da página para entrar em contato conosco ou o que você gostaria que fosse. Vamos nos livrar de um subtítulo. Em termos de menu viverá no Maine, mas mudará o peso para 30. Portanto, o Fale Conosco pagará à direita de aproximadamente. E vamos nos livrar do texto por enquanto. Vamos salvar isso. Agora. Não queremos que ele exiba a página Fale conosco usando o mesmo HTML, que é usado para as páginas únicas porque queremos realmente exibir um formulário também. Uma maneira de fazer isso é que faremos é implorar que o ponto de contato MD seja o tipo. E vamos defini-lo para entrar em contato em minúsculas. Então o que você precisa fazer é na pasta Layouts, criar uma nova pasta chamada contato. E copiaremos e colaremos o HTML de ponto único na pasta Contact. No navegador. Você verá que temos o botão Fale Conosco Menu, mas atualmente não há textos na página e ainda não personalizamos o HTML, então vamos voltar e fazer isso. Os únicos dois que deixei um link para você na seção de recursos nas reformas de cinco páginas do bootstrap estavam olhando para a seção de layout. Se rolarmos para baixo até o primeiro exemplo, copiaremos isso. Em seguida, no contexto único que o HTML em conteúdo, nós o colaremos. Precisamos criar um formulário. Você apenas digita o formulário e emite escreverá o Fourier. Ainda não colocaremos uma ação. E vamos colocar duas entradas lá dentro. Você pode usar o Alt Control F2, formatar o HTML. E vamos verificar isso agora no navegador. Isso está funcionando exatamente como planejamos. Vamos passar agora e configurar nosso formulário. Vou fazer é me livrar do rótulo. E o tipo de entrada de texto é o que precisamos. Em termos de ID. Id. Vamos chamá-lo de nome de entrada, e o titular do local mudará para o nome. E então temos que adicionar aria dash, rótulo. E isso é para um leitor de tela e tecnologias assistivas porque não há mais rótulo para a entrada real. Há apenas um espaço reservado, e também o alteraremos para nome. E então temos que adicionar um campo de nome real à entrada. E vamos chamá-lo de nome. E isso ajudará quando enviarmos o formulário. O conteúdo dessa entrada terá o nome anexado a ela, que será o nome. O que faremos é destacar a lâmina de elétrons. Ele copiará o que temos. Vamos colá-lo abaixo. Este , vamos ligar para o e-mail. Nome. O tipo será e-mail e isso ajuda na validação. O ID, vamos chamá-lo de e-mail de entrada. E dois espaços reservados. Se você usar o clique alternativo e alterá-los ao mesmo tempo, o e-mail do espaço reservado. Você pode usar o Alt Control F para arrumar seu HTML. Em seguida, copiará e colará a primeira entrada. Cole-o abaixo. E vamos mudá-lo para assunto. O objeto inputs alterará nossos dois espaços reservados para sujeitar o nome do espaço reservado. E a última será uma entrada de várias linhas. Então, copiaremos e colaremos o assunto, a entrada e o controle F para limpá-lo. Livre-se da entrada e também se livre do tipo. E substituiremos esses dois área de texto. Antes de você esquecer. No final da tag, você precisa colocar uma área de texto de barra de etiquetas de fechamento. Caso contrário, não funcionará e você terá que se certificar de que não há espaço entre as tags de abertura e fechamento. Se você fosse colocar a área de texto em uma nova linha, você acabará com um monte de espaço entre lá. E você terá alguns problemas com textos em branco no lugar na sua área de texto. Agora, teremos que alterar o nome para mensagem, o ID para mensagem de entrada. E mudaremos nosso titular do lugar e rótulo aria-para mensagem. Há mais uma coisa que podemos acrescentar, e essa é Rose. E vamos mudar isso para quatro por enquanto. E veremos se o bloqueamos. Então, salve isso e vamos dar uma olhada no navegador. Isso está ótimo. Vamos dar uma chance agora a restringir a largura, então não é muito grande. Se quisermos ir inspecionar, você verá que é bastante utilizável nessa largura. À medida que fica cada vez mais amplo, não é para parecer um pouco fora do lugar. Então, vamos voltar e configuraremos algumas linhas e colunas. Então isso fará isso é que vamos envolver o formulário em algumas linhas aninhadas e aninhadas e algumas colunas. Então, usaremos div row e, em seguida, habilitaremos dy flicks tracejados. Portanto, exiba flex e , em seguida, justifique o conteúdo. E então faremos div dot col, md seis. Vamos dar uma chance a isso. Então vamos chamá-lo de nosso formulário, cortar e colar e salvá-lo e dar uma olhada. Algumas coisas que eu noto. Se começarmos a reduzi-lo para o tamanho MD, observe os formulários um pouco pequenos. Mas quando você chega ao grande, tamanho de seis é muito bom. E também podemos trazer a direção para isso também. Então, os títulos se alinharam exatamente como quando vamos abaixo do MD. O que faremos é fazer LG dash seis e, à esquerda, chamaremos o MD dash nove. E então vamos pegar o título, o conteúdo, colocá-los acima do formulário e nos livraremos da linha e coluna existentes. Mas a maneira como você estrutura seu formulário depende totalmente de você. Essa é apenas uma maneira de pensar sobre isso. Normalmente, eu colocaria algumas informações de contato à esquerda do formulário se for um MD ou mais amplo. Então, vou salvar isso e dar uma olhada no navegador. Se formos para o tamanho grande, você verá que temos seis da metade da tela, o que é ótimo. E então, se o trouxermos para o MD, são nove em 12. E então, se formos abaixo do MD, temos toda a largura. Se você olhar para o Excel, é isso lá. Acho que isso é ótimo por enquanto. A última coisa que faremos é criar o botão enviar. Então, escrevendo no formulário, colocando um botão e vamos digitar iguais, enviar e classe. Btn, e então btn dash priming, Esse é o botão básico na viagem. E o texto do envio. E então vamos dar uma olhada nisso no navegador. Esse é um ótimo começo para se preparar para a próxima lição, vamos personalizar o formulário um pouco mais. 4. Personalize o formulário de contato: Portanto, credite um formulário de contato básico. Vamos em frente agora e veja algumas personalizações. Bem, isso eu acho muito bom, é, e deixei o link para esta página na seção de resultados está sob bootstrap cinco formulários. Temos rótulos flutuantes e aqui estão alguns exemplos. Temos um espaço reservado, mas quando você clica dentro do campo, o espaço reservado diminui e ainda fica visível e torna uma experiência muito mais fácil para o usuário. Dessa forma, eles não esquecem qual é o campo que estão digitando. Tenho um exemplo aqui. Você tem que colocar a classe de forma flutuante na div que envolve a entrada. Em seguida, temos que colocar nosso rótulo após a entrada. Então, vamos seguir em frente e tentar configurar isso, copiaremos o formulário classe flutuante. Execute o HTML de ponto único na pasta Contact. Temos nossa primeira div e clicaremos, e depois clicaremos em todas as outras divs do formulário, e vamos colá-la e colocar um espaço para a forma flutuante. Em seguida, clicaremos no final da entrada. Usamos um rótulo. No campo quatro. Temos que copiar e colar no nível Id. E, em seguida, copiaremos e colaremos fora do nosso espaço reservado e deixaremos o suporte do local lá caso seja necessário como um fallback caso esse CSS não seja suportado pelo navegador. E algo que você pode fazer, é difícil dizer se vai ser menos trabalho para você ou não. Mas se você colocar um id no rótulo e copiaremos e colaremos o ID da entrada. Vou colocar a palavra rotulada final. Você pode usar aria rotulada por e pode copiar e colar nesse ID. Em seguida, a tecnologia do leitor de tela saberá com certeza que esse rótulo é o rótulo para a entrada. Não há dúvida sobre isso. Vamos passar e configurar o resto. Então vamos colocar para pegar o rótulo, colá-lo por baixo e, em seguida, teremos que personalizá-lo. Portanto, será entrada, e-mail, entrada, e-mail, rótulo. Livre-se do rótulo da ária. O suporte do lugar é o mesmo. Então temos nosso assunto. E para o último, vou voltar ao site Bootstrap porque não podemos mais usar linhas. Então, para teorias tecnológicas sobre uma falha, haverá a mesma altura que uma entrada que não queremos. Queremos que os usuários possam ver à medida que eu digito uma mensagem de várias linhas no formulário de contato. Então diz que Ele não usa o atributo road. Você precisa definir explicitamente um atributo height, linha ou por meio de CSS personalizado. Só ficamos na fila por enquanto. É melhor prática usar CSS personalizado, especialmente se sua política de segurança impedir estilos embutidos. Mas, por enquanto, vamos usar apenas um estilo. Copiaremos esse estilo lá para a altura. Vamos colá-lo e, em seguida, obteremos nosso rótulo. Rotulado por rótulo. As linhas. Ele não funciona com o CSS. Vamos salvá-lo e vamos dar uma olhada. Agora temos nossos campos, eles são, mas além disso, você tem que considerar o visual que realmente quer. Mas, ao clicar neles, você notará que o espaço reservado rotulado diminui. Então você tem espaço para digitar seu nome. Como exemplo. Vamos apenas corrigir o rótulo para o assunto, que na verdade deve ser mensagem. Vamos dar uma olhada rápida. Agora, eu gostaria que esse campo fosse maior. A melhor maneira de fazer isso, se você clicar com o botão direito do mouse e inspecionar. Podemos ver que temos a área de texto lá. Você pode realmente clicar duas vezes e você pode fazê-lo ao vivo no navegador. Por exemplo, vamos tentar 150 PXE e acho que isso é um bom coração para eles. Voltaremos para Hugo e tornaremos isso permanente. Vamos mudar nossa altura para 150 PXE. Agora, se, por exemplo, você quiser fazer seu CSS, provavelmente o que você pode fazer é cortar isso e salvá-lo. E então entraremos no CSS personalizado. Vamos colá-lo. E a altura 150 PXE precisa ter um ponto e vírgula depois dele. E copiaremos e colaremos no ID do campo. Portanto, o id é mensagem de entrada. Então copie isso. Nós hash mensagem de entrada e funciona o que está quente lá? Vamos salvar isso e dar uma olhada no navegador. Agora, se você inspecionar, verá que não há estilo embutido. Olhamos para a direita. Você notará que temos a mensagem de entrada de hash direcionada à ideia de mensagem de entrada. E a altura está sendo definida para 150. E esse é o nosso CSS lá. Porque ele tem está sendo executado como o servidor de desenvolvimento. E eu configurei o CSS para mapas de origem. Você pode realmente visualizar o arquivo original lá. E, por fim, vamos personalizar é o botão olhará para outra maneira de fazer isso com essa armadilha. Então, além de mudar primário para secundário, também podemos usar contorno e, em seguida, escolher a cor, por exemplo, primária. Vamos salvar isso e dar uma olhada. E essa é a opção de contorno. Isso é o mais longe que iremos com a personalização por enquanto. Vejo você na próxima lição. 5. Conecte-se ao ponto de extremidade da API: Nesta lição, estamos procurando conectar o formulário a um endpoint de API. Atualmente, nossa ação está em branco. Eu queria um lugar para enviar esse formulário para que ele possa ser processado. E assim, um e-mail pode ser enviado para você, a pessoa que administra o site para que você possa receber as mensagens de seus clientes. Usando bisão para lidar com os formulários. Deixei um link para ele na seção de recursos. Depois de clicar no link e se inscrever, há um formulário que já foi gerado para você por padrão chamado Meu Primeiro de tudo, depois de entrar nisso, você verá um link à direita até o ponto final. Copie isso. E então entraremos na ação do formulário e colaremos lá. E precisamos de um método para o formulário e em maiúsculas para colocá-lo na postagem. Vamos salvar isso. Então aqui está o nosso formulário. Vamos colocar alguns dados de teste. E vamos clicar em enviar e isso será enviado para o endpoint. E então ele redireciona para uma página da bacia dizendo: obrigado pela mensagem. Então vá para a bacia. Você pode ver que a mensagem em si chegou e podemos vê-la por aqui. Por enquanto. Só vou excluí-lo. Por padrão, o e-mail será enviado para você com o endereço fornecido. Você também pode alterar o nome do quem os e-mails de quem é enviado para você. E você também pode alterar o assunto. Engraçado, vou deixá-lo por padrão. Vejo você na próxima lição. 6. Detecção de spam: A primeira coisa que precisamos fazer quando se trata de spam, vamos entrar no formulário e vamos configurar a recaptura do Google. Quando você entra em configurações e depois spam. E você tem que realmente ativar a recaptura e depois ler os documentos. Então Control clique em Ler os dutos. E para a captura de cervejaria, você deve usar a seguinte chave do site de recaptura. Você não pode usar sua própria chave de G é isso, o que realmente facilita de certa forma porque significa que é fácil de configurar. Vou passar pelas instruções nos provedores de bacias. Provavelmente é a maneira mais fácil funcionando com o Google. Recapture é a primeira coisa é que copiaremos e colaremos o script. Colocará isso abaixo do formulário. Então, logo abaixo do formulário onde você pode colocá-lo na seção, se quiser. Vou dizer que é HTML válido. Na verdade, vamos pular a etapa dois porque usaremos recaptura invisível. Vá direto para o passo três. Tenho que me certificar de que você ativou a recaptura necessária, que ativamos e salvaremos essas alterações. E prefiro usar recaptura invisível. Faça isso acontecer. Precisa inserir alguns scripts e, em seguida, um botão. Copie que adicionaria o script. E copiaremos os botões. Isso não é realmente um botão de envio, é um botão que chama recapture. E, em seguida, a recapture chamará esse script que enviará manualmente seu formulário. Então, vamos colocar isso no script. Então comente o botão original, ocultando-o e usando Controle ou Comando K, C, onde você pode colocar principalmente o comentário HTML, se desejar. E então vamos colar em nosso novo botão, que chama a recaptura do Google. Agora, para que a função de envio funcione, atualmente, ela está procurando um formulário com o ID do formulário de recaptura invisível. E não tínhamos isso. Então, o que faremos é voltar isso e mudaremos para contato JS Daesh por motivo que coloquei um traço JS. O começo é que me permite saber que quando eu disser o formulário e ele tiver o id do formulário de contato, sei que, se eu alterar o ID desse formulário, terei um problema de JavaScript. Então sempre costumava prefixar todas as minhas ideias que se relacionam puramente ao JavaScript. Em seguida, destacaremos o ID e copiaremos. E vamos rolar até o formulário. E vamos colocar um ID igual. E então podemos colar isso. Vamos salvar isso e vamos dar uma olhada no navegador. Então, algumas coisas aqui podemos consertar. A primeira coisa é o budge de recaptura do Google por padrão para realmente ver que está à direita. Você pode configurá-lo para a direita para a esquerda. Vamos apenas excluir a propriedade, então ela é padrão para a direita. E também vamos estilizar nosso botão de envio. Então, vamos fazer isso. Assim, você pode ver o emblema de dados em linha. Vamos nos livrar disso completamente. Então o que faremos é descer para a classe e adicionaremos btn e btn outline primário ou qualquer classe Bootstrap que você deseja adicionar ao estilo do seu botão. Então vamos salvar isso e eu vou procurar no navegador, apenas parecendo muito melhor agora com o crachá oculto à direita e nosso botão de envio, vamos colocar alguns dados, Vamos verificar funciona. Geralmente, vamos consultar para clicar na foto. Se você estiver fazendo um teste de um host local , nosso envio já passou. Acha que eles podem fazer é um honeypot. Um honeypot é, é um campo de entrada para seus quatro, que está oculto para usuários humanos, mas geralmente não está oculto para spam bots. Alguns bots de spam podem perceber que está oculto, mas o que acontece é fácil para o bot de spam colocar alguns dados nesse campo e pressionar enviar, então usar bacia não vai encaminhar essa fórmula para encaminhar essa fórmula para o seu e-⸺- endereço de e-mail porque é bastante óbvio que é um bot porque os humanos não podem fisicamente colocar nada nesse campo. Você controla clicar em Ler os documentos. Você notará que temos que colocar um nome de sublinhado. Peguei. E vamos rolar para baixo até a opção de honeypot. O tipo ficará oculto e o nome será obtido. Então, vamos clicar com o botão direito do mouse e copiá-lo de volta para o formulário e colá-lo. Salve isso. E você tem uma proteção de honeypot ativada automaticamente. Assim que o bot colocar algo nesse campo, então ele não vai passar, não é garantido para funcionar, mas não faz mal incluí-lo como opção. 7. Validação de formulários: Veja a validação do formulário no momento, não há nada que impeça o usuário de enviar o formulário. Quando eles não preenchem determinados campos, eu posso clicar em Enviar e ir a partir daí. E ele será enviado e você acabará com um formulário em branco. Então, vamos fazer é dar uma olhada em como vamos lidar com isso no navegador. Não podemos lidar com isso de um ponto de vista externo porque isso é tratado pelo endpoint qual não temos controle. O que podemos controlar o que acontece no navegador. Então, vamos voltar ao código do Visual Studio. Então, estamos no HTML singular na pasta de conteúdo. O que faremos é percorrer cada campo e garantir que você esteja olhando para a tag de entrada real. Cada campo que você deseja que seja necessário, o que você faz é controlar o clique dentro desse campo, também fará a área de ticks. Colocamos a propriedade necessária. Então vamos salvá-lo. O que estamos fazendo aqui é que estamos usando cada mecanismo de navegação incluído para exigir entradas. Portanto, é dependente do navegador. Se o usuário tiver um navegador antigo, ele não o impedirá. O problema que temos é que realmente temos um botão Enviar neste formulário. Temos um botão que ele chama no script de recaptura. Na verdade, não estamos enviando o formulário diretamente usando a funcionalidade interna do navegador. Então o que faremos é comentar nosso botão modificado com o controle Casey. E então vamos descomentar o botão original com o Controle K. Você salvará isso e vamos dar uma olhada no navegador. Agora, se apertarmos o botão enviar, ele aparecerá um aviso porque digamos, por exemplo, colocamos um nome, depois pedimos o próximo, e assim por diante e assim por diante. Vamos dar uma olhada agora em mudar nosso código para que estejamos realmente usando a recaptura do Google. Então, para que a recaptura do Google funcione junto com a validação, porque a recaptura do Google é JavaScript e substitui a função de envio padrão no navegador. Vamos ter que usar a validação do JavaScript. Agora, deixei o link para a página de documentos do Bootstrap para validação. Role para baixo. Há estilos personalizados que realmente vamos usar. E isso usa o Bootstrap para estilizar o formulário quando há um sucesso ou um problema. Se você rolar para baixo até o próximo, você verá o padrão do navegador, que apenas olhará, vamos fazer um melhor do que isso. Estilos personalizados. O que temos que fazer, em primeiro lugar, é que precisamos da validação da classe de necessidades no formulário. E então precisamos da propriedade novalidate. A propriedade diz ao navegador para não usar sua validação interna. E a validação de necessidades que usaremos será para o estado, seja validado ou não. E o fato de que ele precisa ser validado com o Bootstrap. Então, copiaremos a classe e novalidate propriedade. E então, para o formulário, colocar em uma classe é igual a validação. E não temos validação. Em seguida, precisamos adicionar algum JavaScript. Já estamos nas propriedades necessárias para cada um dos campos. Você rola para baixo, temos algum JavaScript básico para começar, então copiaremos isso. E então vamos colá-lo abaixo do código de recaptura do Google. Agora, o que isso faz é a primeira coisa que ele faz é que estamos selecionando cada formulário na página que tem uma classe de validação de necessidades para cada um desses formulários. E é isso que o ponto da matriz parEach é quatro, estamos executando a função e ela escuta o botão enviar. Então, atualmente, temos um botão de envio padrão. Então, o que faremos é apenas colocar um comentário em seus escutas para enviar evento no formulário. Então, se o formulário não tiver passado na validação, vamos parar o padrão, enviar mais pesado. E se tiver passado, ele será enviado conforme o normal. E, em seguida, vamos adicionar uma classe para exibir o status de validação dos campos que acontecem independentemente. Vamos salvar isso e vamos dar uma olhada no navegador. Então ele é um formulário de contato. Vamos colocar um nome e, em seguida, clicaremos em enviar. E então o que ele está fazendo é impedir que a soma aconteça. Está dizendo que precisamos preencher esses três. Faremos é colocá-lo em um e-mail desonesto sem fora e no.com colocar em um assunto e uma mensagem. Você verá que ainda não está feliz porque não temos um endereço de e-mail formatado corretamente. Então, enviaremos um e-mail em domain.com e notaremos mesmo com a verificação de aprovação de manutenção. Em seguida, podemos clicar em Enviar. Mas vamos configurá-lo agora para que estejamos integrando a recaptura na própria forma. A primeira coisa que faremos é fazer algumas pequenas modificações neste código de bootstrap. O JavaScript Bootstrap possivelmente está visando vários formulários e só queremos segmentar um para mim porque sou o único formulário que trabalhará com a recaptura. Então, aqui temos formas var iguais e são todos os formulários com validação de necessidades, o que faremos em vez disso é que faremos forma igual. E então usamos esse código aqui, Document.getElementByID e formulário de contato JS. E vamos apenas colocar alguns adolescentes solteiros para serem consistentes com o estilo. Coloque um ponto e vírgula. Então temos um protótipo re ponto Slashdot chamada. E isso é para formulários para oito seguros para cada um dos formulários. Mas desta vez vamos chamar a função. Para o formulário único. Faremos é que já usamos o formulário variável. Para cada iteração. Criamos nossa nova variável chamada forms. Tudo o que queremos fazer é remover o loop, vai se livrar dessa linha também. Em seguida, Alt Shift F para reformatar, e salvaremos isso. E vamos dar uma olhada no navegador. Então, nos testes básicos, apertamos o botão enviar e você verá que ainda estamos segmentando o formulário e ainda estamos seguindo as mesmas etapas, mas é apenas para um formulário. Vamos passar agora e recapturar coisas. O momento é que o formulário não passou na validação. Estamos impedindo que a função de envio padrão funcione lá. Apenas o formulário passou pela validação. Ele apenas envia normalmente. Queremos sempre impedir a função de envio padrão funcione. Então, faremos é copiar essas linhas. Nós os colaremos e copiaremos nosso comentário também. E cole isso. Originalmente. Esse cheque aconteceu. Primeiro de tudo, tem a validação de passagem do formulário. Mas agora queremos interromper o envio em todos os casos, queremos exibir o status de validação. Então, queremos fazer um cheque tem a validação do formulário polar. E se tiver, queremos passar pelo processo de recaptura do Google e, finalmente, o envio de formulários. Então o que faremos é cortar isso. Vamos colá-lo abaixo. Se o formulário tiver passado na validação, vamos nos livrar do ponto de exclamação. Vai se livrar disso. Vou colocar um comentário na recaptura de carvão para cheque e envio. Vamos salvar isso e faremos uma verificação rápida no navegador para garantir que tudo esteja funcionando como esperamos. Obviamente, não vai chamar de recapturá-lo e não enviará nosso formulário. Atualmente, está nos dizendo que há problemas. Vamos colocar alguns dados e pressionamos Enviar. E, obviamente, isso não está funcionando, mas está validando como desejamos. Como você pode ver, ele não passou pelo processo de cúpula. E isso é porque ainda não configuramos, até agora, tudo está bom. Vamos passar agora e configurar a recaptura, mas adoramos vincular a recaptura do Google dutos invisíveis na seção de resultados. Este é um exemplo na parte inferior. Para invocar a recaptura após a validação do lado do cliente, usaremos parte disso. Primeiro, vamos usar é a div. Estamos colocando dentro do formulário. Passamos em nossa forma. E depois de nossa última entrada, vamos colar isso. Temos que obter a chave do site. Copie isso. Cole-o onde diz a chave SART. Não precisamos nos preocupar com os scripts onload porque já estamos fazendo isso com o Bootstrap. E o que o script online aqui está fazendo é dizer que quando você clica no botão enviar, você precisa validar o que já estamos lidando com isso. Mas o importante é que recebemos a chamada para execução de pontos capturados em grego se a validação for bem-sucedida. Então, vamos copiar isso. E vamos rolar para baixo em nosso código Bootstrap. E nós temos aqui chamado recapture e para verificação e submissão. Então temos que dizer à recaptura o que fazer. Após a verificação ter ocorrido. Aqui em nossa recapture div, temos dados sobre callback é onsubmit. Se você voltar para baixo, temos onsubmeta. E o que isso faz é que ele obtém o formulário e o envia. Então voltamos ao nosso código e colocaremos um pequeno comentário lá. Recapture chamadas em Enviar após a verificação. Vamos pular essa linha que diz stop default, AVX. É um pouco enganoso. Nós choramos. Ele colocará um comentário. Ouro por recaptura. Envia o formulário, mas não via padrão do navegador. Então salve isso e vamos verificar no navegador. Estou colocando um nome, e-mail, domínio.com. Você realmente tem que colocar the.com em forma. Spree não tem um erro. Então consegui assuntos. Vamos puxá-lo no envio e depois mensagem. Porque estamos fazendo o host local e enviamos alguns prontos. Vai nos desafiar, o que é ótimo. Isso significa que está funcionando corretamente. A última coisa que faremos é obter todos esses JavaScript e colocá-lo em um arquivo JavaScript. Isso facilita muito a depuração. Então, destaque tudo lá dentro. E então entraremos em ativos no JS e faremos um arquivo chamado contact dot js. Colaremos isso e salvaremos. Podemos nos livrar. Mas precisamos garantir que o script esteja carregado para essa página específica. Do jeito que faremos isso, porque não estamos trabalhando em uma pasta estática. Estamos usando o ES build, que eu configurei por padrão para você. Você pode entrar em parciais e depois na pasta Script. E é aí que estamos carregando o arquivo JS principal. Agora temos que fazer é se EQ ponto superior do T maiúsculo e o topo for contato. Vamos colocar nossa ingestão e imediatamente. Podemos então copiar e colar esse código e ele entrará em contato com ab.js e , em seguida, limparemos o arquivo JavaScript. A primeira coisa é que a função onsubmit que não funcionará, pois a recaptura não poderá acessar a função desse arquivo para criar uma variável e vinculá-la à janela. Então, à direita, janela, ponto no envio é igual. Vou fazer disso uma função de seta. E estamos referenciando o mesmo item que estamos fazendo referência aqui em baixo, adicionamos o ouvinte do evento. Então, o que podemos fazer é pegar essa variável. Vou colocá-lo no topo da tela. E então podemos simplesmente executar o envio de pontos formados. Eu usaria rigoroso no topo da página? E então vamos nos livrar da função auto-inicializadora porque isso também não funcionará. E faremos o controle. Alt Shift F para reformatar. E se você quiser, você pode criar uma função de erro aqui para dizer que se você estiver executando um inverno, por exemplo, Eastland, provavelmente lançará um erro porque você não está usando token. Então você pode tirar isso. E para evitar a confusão mudará na função enviar para enviar porque onsubmit pode representar um problema. E retornaremos ao nosso HTML de ponto único, que o altera para enviar o formulário. Essa é a função que será chamada. E isso salvará isso. E então vamos dar uma olhada no navegador. Então, coloque alguns desvios sujeitos a JS externo. É por isso que pode corretamente, se você tiver alguma dúvida sobre como estamos executando o código ASP para compilar esse arquivo JavaScript. Tenho um curso inteiro sobre Hugo chamado JavaScript building com vocês. E vocês durante o processo de configurar compilação do AS com Hugo e alternaram navegadores Craig e todas as configurações para ambientes de desenvolvimento e produção. Se você verificar isso, você estará passando por todo o processo passo a passo. Agora eu digo que você pode se configurar com o AS build para que você possa personalizá-lo de acordo com suas necessidades. Vejo você na próxima lição. 8. Envio de formulários AJAX (sem recarga de página): Então, estamos tentando fazer aqui com ajax está tentando enviar o formulário, mas sem atualizar a página e enviar dessa forma, é uma experiência muito mais simplificada para o usuário. E sabemos que eles definitivamente ficarão em nossa página e não vamos perdê-los. E podemos fornecer feedback muito mais rápido para eles. As opções com o fornecimento de feedback. Eu muito bom se você estiver executando seu próprio endpoint, mas se estamos trabalhando com outra pessoa, então há um pouco simples, mas tudo bem. Então, vamos começar. Então, a primeira coisa que vamos fazer é desabilitar os formulários de mim porque não vou enviar com o navegador. Obrigado, vamos fazer é entrar e obter todos os dados do formulário. Então, colocamos um comentário em obter dados do formulário. Portanto, os dados do formulário const são iguais a novos dados de formulário com F maiúscula, D. E nós vamos tirá-lo de um formulário. E mudaremos nossa variável de formulário para uma constante. O que faremos é criar uma nova instância do ECS. Const XHR, que é a nova solicitação HTTP XML. Então faremos é, começaremos a trabalhar com o XHR. A primeira coisa que faremos é abrir na configuração XHR, XHR aberta. E temos que usar os métodos para que possamos retirá-lo do HTML. Então, formamos o método ponto, esse é o método que já definimos no formulário. E o ARO será em forma. Ação. Você escolheu HTML, verá sua ação no formulário e o método do formulário enviará dados. Então nós XHR pontos e , em seguida, enviaremos os dados do formulário. Agora isso é síncrono, então ele realmente vai enviar imediatamente. Ele enviará um, está pronto, mas colocamos esse comando lá. Então, ele está pronto para ir. Ele definirá o tempo limite de oito segundos. Ponto Xhr é igual a não. Você pode mudar isso. E eles vão atingir o tempo limite. Então, o ponto XHR no tempo ainda. Criaremos uma função de seta. Em seguida, faremos um erro no console. Sempre conte o tempo limite. Então, podemos depurar, se necessário. É aqui que fica interessante. Tradicionalmente, você faria o ponto XHR onload. Em seguida, você verifica o HTTP Two 100. Caso contrário, você está olhando para um erro HTTP e você também tem um ponto XHR na era. Isso é para o seu arrogante XHR. O que podemos fazer é que vamos na carga acabada e inclui setas. Portanto, é o ponto XHR na extremidade da carga. Então, é como o descarregamento e a era ligada. Faremos uma função anônima. Então, de um modo geral, você queria filtrar se temos nosso sucesso ou falha em HTTP. Falha geralmente significa que você tem o URL l errado ou o serviço inativo e qualquer outra coisa. A maneira como fazemos isso é se status do ponto XHR e, por exemplo, se n for igual a 200. Você então tem sucesso na ATP. E então o exemplo 44 não foi encontrado. Era Http. Agora você pode obter alguns status diferentes, de 200 a 299 mais 304. Então, faremos igual ou maior que 200. E o status do ponto XHR é menor que 300. E tudo com tubo duplo que se desloca e a válvula K no status de ponto XHR é igual a 304. Vamos dar uma olhada nos documentos porque, para esse endpoint específico, podemos realmente mantê-lo um pouco mais simples. Então, aqui está a maneira como ele funciona. Eles têm códigos e, por exemplo, status http de 200, que é código de acesso ac. Eles também nos deram algum texto de resposta e é codificado em JSON. E isso terá sucesso, é verdade. que nos diz que todos os campos estão corretos, APIs felizes e os e-mails sendo enviados. Então, podemos colocar esse feedback no formulário até que o usuário que seu envio tenha sido bem-sucedido. Muito obrigado. Nós lhe enviaremos um e-mail. Se tivermos uma era responsiva, como todas vêm com mensagens personalizadas, o que é ótimo porque mostra um pouco mais de informações sobre o erro. Mas eles também têm o código de erro HTTP anexado a eles. Então você realmente tem uma transferência HTTP bem-sucedida, mas eles estão anexando seu código de erro HTTP por esse motivo, não vamos filtrar com base em HTTP. Porque observe que temos dois códigos, os mesmos, mas diferentes erros. Só somos filtrados com base nos códigos de erro. Vamos em frente e vamos fazer isso. Faremos é destacar toda a extremidade onload. Vamos copiá-lo, colá-lo abaixo, comentar, a filtragem de status HTTP. E então começaremos de novo. A primeira coisa que faremos é passar o texto de resposta. Então, faremos resposta const igual a Jason e capitals dot parse. E vamos passar a resposta de pontos XHR. Se o ponto de resposta for bem-sucedido. E isso está implicando verdade. Faremos o log de pontos do console apenas por enquanto. Esses excedentes. E depois faremos o resto. Se a resposta estiver escura, era , vendida, registro, volta, marque. E então, quando o cifrão e as chaves responder.data. Então, você pode realmente receber a mensagem de erro. Colocamos dois pontos e depois fazemos outra coisa. Se um erro não for fornecido. Arquivo Console.log. Nova era, que provavelmente não conseguirá encontrar. A menos que algo terrível pessoal esteja errado. Vamos salvar isso e vamos dar uma olhada no navegador. Clique com o botão direito do mouse e inspecione para se certificar de que você está pagando doca para o lado esquerdo ou direito. Então você pode ver o formulário completamente. Vamos colocar alguns detalhes no console prontos. Deve haver um sucesso que esteja funcionando corretamente. A tecnologia T detectou sucesso verdadeiro. Portanto, é um erro e tanto. Agora vou voltar e adicionaremos um dígito extra ao URL do endpoint salvá-lo e entrar no navegador. Vamos experimentar isso. E agora temos essa mensagem voltando. E nós colocamos esse texto em nós mesmos, era Jason. Agora está pronto para configurar algumas mensagens para o usuário. Antes de continuar tirará que 0, o da ação do formulário será o extra, apenas para garantir que ele esteja funcionando corretamente agora, faremos é desabilitar o formulário. Portanto, ele só pode ser ativado se o JavaScript estiver presente. Dois que lhe darão um ID para começar. Vamos chamá-lo JS dash, enviar e todos desativados, o formulário com a propriedade de disabled. Dessa forma, ele está desativado por padrão. Em seguida, adicionará alguns sem script. Sou Todd, o formulário. Deve o JavaScript enviar este formulário, colocará aquele Danny no botão. Portanto, é meio óbvio porque o botão será desativado. Mensagem lá dentro. Tudo bem, então teremos que ir e ativar. Diz que temos que direcionar o botão. Então const submit, botão é igual a ponto do documento, obtenha elemento por ID. E fique em estoque, envie. E, em seguida, envie pontos de botão, desabilitado é igual a false. Vamos comentar nas cargas do JavaScript. Vamos dar uma olhada. Portanto, temos uma propriedade desativada no formulário. Vou para áreas no console, então o botão enviar está realmente funcionando. Vamos dar uma chance de desativar o JavaScript. Então, entraremos comandos de execução como em Java e, em seguida, desabilitaremos o JavaScript. E o controle verá que um botão está desativado e você deve ter o JavaScript ativado para enviar este formulário. Então, apenas renomeado JavaScript. Estou pronto para começar a trabalhar em nossas mensagens. Então crie nosso spinner de carregamento. Especialmente faremos variável de crédito, ponto de documento, gravação, elemento, div, criaremos um ID para ele. Então doc id é igual a b agora, e adicionaremos algumas classes. Então, classe de ponto giratório, lista, ponto, adicionar , fazer, girar, traço, borda e d, nenhum para ocultá-lo. E então vamos adicioná-lo ao formulário. Então o formulário ponto Pinchot e vamos adicionar, Tem sido um começo. Vamos nos livrar da tela, nenhuma, só para vê-la lá. Há uma espinha sentada lá e vamos desabilitar isso por padrão. Em seguida, criaremos nossa mensagem. Não consigo documentar momento escuro antes da div. Deixe ponto do corpo do ponto mais este ponto adicionar. Deixe por enquanto. Um novo para testes. Então, faremos um alerta. Vamos acessar a criança. E vamos dar uma rápida olhada em nosso formulário e ir para o botão NB para ver isso. Está parecendo bom. Portanto, estamos removendo a classe de sucesso porque ela depende do estado da mensagem. E vamos esconder esses dois elementos por enquanto. Então, D None. Tudo bem, estamos prontos para começar. Então o que vamos fazer é criar nossos contras de função para perder h igual a função Great e seta. E suas propriedades que podemos trazer serão status e texto de status. E começaremos com a mensagem de execução de sucesso. Esses textos verdadeiros serão que sua mensagem foi enviada de volta para você em breve. Escreva nossa função. Então, primeiro temos que fazer é verificar o estado. Portanto, se o status for igual a true, classifique esse ponto e vamos acessar o ponto da lista de classes. Adicione perigo. Adicionaremos o HTML. E vamos dar uma olhada. O que é inflação. Ela disse, e eu voltarei para você em breve. Nem para o spinneret foi tão rápido? Vamos dar uma olhada agora se ele falhar. Então, em nossa cópia falsa, essa string literal com ticks traseiros, era. E então, para a era genérica, essa linha. Desta vez, faremos isso mais tarde. Vamos até o nosso tempo limite. Dê uma olhada. Tão velho truque, adicionamos um dígito e recebemos o erro chegando. Agora temos que fazer é redefinir o formulário após isso ter ocorrido, seja um sucesso ou um arquivo, quero redefinir o formulário para que possamos começar de novo e a recaptura pode começar de novo. Estamos ligados. Reset Form criará a função. A primeira coisa que faremos, Redefinir o conteúdo do formulário. Redefinição de ponto do formulário, validação de conjunto, status, sss, lista de classes de ponto, validado. Livre-se de todo o CSS que acabamos de adicionar aqui. E, em seguida, reinicie para recaptura. Assim como Hey, usamos Jewry capturado, execute por favor G recapture pontos. Dissemos, salve isso e dê uma olhada no navegador. Coloquei alguns detalhes e enviei. E nós redefinimos o formulário. Recapitular, basta lançar um erro, o que ele faz ocasionalmente, mas ainda está funcionando. Está tudo bem. Agora, removeremos todos os console.logs. Agora que terminamos de testá-lo, temos que fazer é mostrar a rotação de todas as formas de iluminação e depois ocultar o spinner quando o formulário terminar de carregar. Então, quando o botão de envio do formulário estiver muito impressionado e a recaptura do Google tiver dado o ok, e sabemos que o formulário de envio é chamado, removerá o reitor unclass do spinner. Então, o que podemos fazer é copiar a linha para adicionar. A classe tirará o giro real de uma borda e mudará, adicionará para remover. E vamos pegar o título novamente. Vamos até a seção de mensagens e removeremos o spinner escondendo-o lá. Vamos testar isso. Então, coloque alguns detalhes. Tenha a girar e girar esse período à medida que a mensagem de status voltou. Então isso está funcionando muito bem. Certifique-se de testar o formulário completamente para todos os casos de uso e todos os cenários de erro. Antes de você. Em um site de produção, você tem dúvidas ou comentários, deixe-os na seção de discussão abaixo. Feliz em ajudá-lo. Sua melhor opção é enviar seu código para o GitHub e depois me deixar um link para o código. E lamento dizer algumas capturas de tela de formulários de crédito que você fez na seção do projeto.