Um script para um formulário de feedback em uma janela modal. Formulário de contato Ajax simples

Olá pessoal. Eles foram bombardeados com perguntas sobre como implementar o formulário que aparece em janela modal após clicar no botão, e após o envio, uma mensagem de sucesso ou falha seria exibida.

Acho que já tem muito isso na internet, mas como as pessoas perguntam, resolvi fazer. Além disso, essa funcionalidade deve estar presente em quase todas as páginas de destino para implementar um botão de retorno de chamada. Na verdade, agora aparecem cada vez mais resultados de testes AB, que dizem que os formulários abertos funcionam pior do que aqueles que estão ocultos em uma janela modal e abrem após clicar no botão.

Alguns argumentam que isso se deve ao fato de que as pessoas estão lentamente "desenvolvendo imunidade" e a forma aberta é uma venda agressiva. Supostamente, agora é o momento em que o usuário vê formulário aberto acredita que estão tentando "vender" algo para ele. Não concordo totalmente com essa teoria, mas um grão de verdade está presente. Isso pode ser verdade em alguns tipos de negócios. Por enquanto, vamos entrar na implementação do formulário.

Observação! Não vou descrever cada ação em detalhes, mas ofereço uma versão pronta na fonte. Se você tiver alguma dúvida, escreva nos comentários. Vamos descobrir :)

Hoje vamos começar não com jQuery, mas com o layout do botão e do formulário. Todos os scripts estão incluídos no final da página.

O botão clicando no qual a janela modal será aberta:

Envie sua aplicação

Você pode definir qualquer classe, mas no href escreva #modal - este será o id do contêiner com o sombreamento e o formulário de contato.

Agora darei o código do formulário e o bloco em que o formulário estará localizado:

Depois de adicionar estilos, fica assim:


Para criar uma janela modal, foi utilizada a biblioteca Remodal. Este é um conjunto de arquivos css e js, apenas para criar janelas modais animadas. Você pode baixá-lo pelo link ou já com minhas edições no final do artigo.

Incluir estilos entre as tags head:

E antes da tag de fechamento do corpo - adicione scripts:

Script.js é um script para processar um formulário. O mesmo Ajax que nos permite realizar todo o procedimento sem recarregar a página:

$ (document) .ready (function () ($ ("form"). submit (function () (// Obter o ID do formulário var formID = $ (this) .attr ("id"); // Adicionar hash a o ID do nome var formNm = $ ("#" + formID); $ .ajax ((digite: "POST", url: "mail.php", dados: formNm.serialize (), sucesso: função (dados) (/ / Texto de saída do resultado de envio $ (formNm) .html (dados);), erro: função (jqXHR, texto, erro) (// Saída do texto de erro de envio $ (formNm) .html (erro);)) ); retornar falso;));));

Eu não vou dar o original código css e js dos arquivos responsáveis ​​pela janela modal e pelo formulário, por serem bastante grandes. Se houver alguma coisa, olhe para a fonte. Mas o manipulador de php é amplamente padrão (se assim posso dizer):

Nome do remetente:$ name Telefone:$ phone "; $ send = mail ($ to, $ subject, $ message, $ headers); if ($ send ==" true ") (echo"

Obrigado por enviar a sua mensagem!
";) else (echo"
Erro. Mensagem não enviada!
";)) else (http_response_code (403); echo" Tente novamente ";)?>

Você é bem vindo, não se esqueça de mudar de endereço E-mail por conta deles.

Aqui está um formulário Ajax. Desculpe por não tentar explicar em detalhes como cada elemento foi feito. Queria apenas dar um resultado final, mas não adianta descrever todas as animações, aparências. Baixe a fonte e incorpore-a em seu site. E isso é tudo por hoje. Boa sorte a todos!

Pessoal, peço que testem o formulário em um real ou servidor virtual(hospedagem). Certifique-se de que seu servidor suporta php, você tem um plano pago e não um período de teste. Caso contrário, em 90% dos casos, o formulário não funcionará.

Não espere por uma carta em sua caixa de correio se você acabou de abrir o arquivo de índice em seu navegador e clicar no botão "Enviar". Php é uma linguagem do lado do servidor!

Se você é muito preguiçoso para descobrir e fazer o formulário sozinho, recomendo prestar atenção.

Versão atualizada artigo é

Olá queridos leitores a! Neste tutorial, mostrarei como podemos fazer com que um formulário de inscrição de e-mail em HTML5 valide a URL inserida com JQuery. Para verificação, usaremos expressões regulares e salvaremos o endereço inserido no banco de dados MySql. Assim, ao salvar, ele usará AJAX(ou seja, chame o script PHP sem recarregar a página). O resultado pode ser visualizado na página de demonstração, além de baixar as fontes. Vamos começar!

Marcação básica

Vamos começar criando um novo arquivo index.html. E vamos fazer uma estrutura de documento simples aderindo ao HTML5. Também incluiremos imediatamente os estilos CSS e a biblioteca, precisaremos deles ao verificar o e-mail inserido:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15


<html lang = "ru">
<cabeça>
<meta charset = "utf-8">
<título> Formulário de inscrição de email com validador jQuery</ título>

<link rel = "stylesheet" type = "text / css" href = "style.css">

<script type = "text / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</ head>

<corpo>

</ body>
</ html>

Agora você está pronto para criar seu formulário!

Formulário de inscrição por e-mail

O objetivo do nosso formulário é verificar o endereço de e-mail do visitante inserido e, de alguma forma, salvá-lo na lista de assinantes. Para isso nós fazemos forma regular com um botão, clicando no qual o endereço é processado e guardado na base de dados ou num ficheiro, conforme for mais conveniente para qualquer pessoa. Na lição, consideraremos salvar dados em um buz. Isso vai deixar mais claro, vamos nos concentrar em verificar a exatidão do endereço inserido. Esta é a aparência do formulário de inscrição:

1
2
3
4
5
6
7
8
9



"Digite seu e-mail" autocomplete = "off" autocorrect = "off" autocapitalize = "off">

Vamos envolver o formulário no bloco div #completeform, de modo que, depois de salvar o endereço, o formulário possa ser recolhido.

Também usamos alguns novos atributos no campo de entrada. O tipo de campo é definido como "e-mail" para que os navegadores móveis possam exibir o teclado apropriado. O Chrome e alguns navegadores WebKit usarão isso para verificar se o usuário inseriu um endereço. Os atributos autocorrect e autocapitalize são projetados especificamente para navegadores móveis.

Span com id erro inicialmente escondido, para o qual a propriedade display é responsável com o valor none, isso é escrito no arquivo com styles, sobre isso um pouco mais tarde. Mas assim que o usuário inserir um endereço de e-mail inválido no intervalo, uma mensagem de aviso será exibida.

Validador JQuery e solicitação AJAX

Vamos começar com uma função simples de verificação de e-mail. Usamos uma string regex para testar se a string de texto corresponde à sintaxe de e-mail padrão e, em seguida, retornamos um valor booleano verdadeiro, caso contrário, falso.

Vamos dar uma olhada na função completeInviteForm (). Para evitar confundir o formulário de entrada de endereço, reduziremos o efeito fadeOut por 400 milissegundos. E como um retorno de chamada, nos voltaremos para a função $ .ajax (), com sua ajuda chamaremos o arquivo save.php e salvaremos o endereço inserido no banco de dados. Vou citar o código-fonte do arquivo save.php abaixo, mas por enquanto vamos descobrir com a função $ .ajax ().

$ .ajax- carrega a página remota usando Solicitação HTTP... Como um argumento para a função $ .ajax (), um objeto é passado, consistindo de pares chave / valor que são usados ​​para inicializar e manipular a solicitação. No nosso caso, usaremos os seguintes objetos:

  • tipo: 'POST' - selecione o tipo de solicitação para o arquivo, por padrão PEGUE, a diferença entre POST e GET não é muito grande, apenas com uma solicitação GET os dados são transferidos no cabeçalho e com um POST no corpo da solicitação, portanto, usando POST, você pode transferir mais informações;
  • url: ’save.php’ - caminho para o arquivo executável;
  • data: 'email =' + $ ("# email"). val ()- dados que são enviados ao servidor. COM usando CSS seletor #email refere-se ao elemento com id = "email" e obter o conteúdo do atributo value, ou seja, o e-mail inserido pelo usuário. E atribuir este conteúdo a uma variável o email que usaremos no arquivo save.php;
  • success: function () ($ (‘# completeform’). before (‘ Tudo está pronto! Você foi adicionado à lista de discussão.‘);} - a função de sucesso é chamada em caso de sucesso pedido ajax... A função executa a seguinte ação. Na frente do div #completeform, inserimos um conteúdo notificando o usuário de que seu e-mail foi adicionado à lista de discussão.

1
2
3
4
5
6
7
8
9
10
11
12

function completeInviteForm () (
setTimeout (function () ($ ("# completeform") .fadeOut (400, function () (
$ .ajax ((
tipo: "POST",
url: "save.php",
dados: "email =" + $ ("# email") .val (),
sucesso: função () (
$ ("#completo") .before ( "Tudo está pronto! Você foi adicionado à lista de discussão." ) ; }
} ) ;
} ) ;
} , 1100 ) ;
}

E usando o método setTimeout, o formulário é oculto e a solicitação ajax é executada de forma assíncrona com um atraso de 1100 milissegundos.

Processamento de formulário

Para a conveniência de se referir aos elementos da página, vamos criar algumas variáveis ​​com os seletores #error e #btnwrap.

var erdiv = $ ("# erro");
var btnwrap = $ ("# btnwrap");

Usando um manipulador de eventos viver rastreie o clique no botão "Inscrever-se", seu id = "sendbtn". Método E.preventDefault (); cancela o comportamento padrão do navegador para uma ação (clicar em um botão), ou seja, cancelamos a atualização da página e a mudança de URL. Atribuímos o e-mail inserido à variável emailval e podemos começar a processar essa variável.

Primeiro E se if (! isEmail (emailval)) verifica se a função isEmail retornou falso, isso significa que o endereço de e-mail inserido pelo usuário não corresponde à expressão regular, ou seja, não está correto, notificaremos o usuário sobre isso no bloquear o erro e exibir a mensagem (você digitou o endereço de e-mail incorretamente).

Agora o segundo E se executado apenas se o usuário inserir um endereço de e-mail válido. Então, podemos iniciar o processo de salvar o endereço.

Para tornar o processo claro, insira o texto apropriado no bloco de erro e coloque uma imagem GIF no bloco onde o botão "Inscrever-se" estava localizado. E chamamos a função completeInviteForm (), que discutimos acima.

1
2
3
4
5
6
7
8
9
10
11
12

if (! isEmail (emailval)) (
erdiv.html ( "Você digitou o endereço de e-mail incorreto") ;
erdiv.css ("exibir", "bloquear");
}
if (isEmail (emailval)) (
erdiv.css ("color", "# 719dc8");
erdiv.html ("processando ...");
(completeInviteForm (), 900);
}
} ) ;
} ) ;

Base de dados

Como escolhi o método de salvar o endereço digitado no banco de dados, falarei brevemente sobre como criar o banco de dados e a própria tabela, bem como o código do arquivo save.php prometido, que funciona com o banco de dados MySql.

Para isso precisamos servidor local, Estou usando o Denwer. Certamente muitas pessoas o usam, então não irei entrar em detalhes. Nós passamos phpMyAdmin, e criar um banco de dados o email:

Para salvar os endereços dos assinantes, precisamos de uma tabela com dois campos, vamos chamá-la Morada:

Os campos serão os seguintes:

  • identificação- identificador endereço de e-mail(também conhecida como chave primária);
  • Morada- diretamente o próprio endereço de e-mail.

Arquivo Save.php

Agora é hora de falar sobre último elemento da assinatura criada, sobre o arquivo save.php. Ele contém o script PHP para salvar o endereço de e-mail no banco de dados.

1
2
3
4
5
6

if (isset ($ _POST ["email"])) ($ email = $ _POST ["email"];)
$ db = mysql_connect ("localhost", "root", "");
mysql_select_db ("email", $ db);
mysql_query ( "INSERT INTO address (address) VALUES (" $ email ")", $ db);
?>

Primeiro, verificamos se a variável email existe no array POST global; em caso afirmativo, atribuímos seu valor à variável local $ email. Em seguida, estabelecemos uma conexão com o servidor mysql_connect (), o usuário é root, não há senha. Escolhendo um banco de dados o email e execute uma consulta ao banco de dados, insira um novo registro na tabela de endereços, onde o valor da variável $ email será inserido nos campos de endereço. Isso é tudo!

Isso conclui a lição. Quero lembrar que essa assinatura funciona apenas no servidor (já que estamos usando a base e).

Olá. Neste tutorial estaremos criando uma forma completa. comentários, e aparecerá na janela modal ao clicar no botão da página. Fiz essa lição sozinho, do zero, usando apenas o framework jQuery e um pequeno JavaScript "th. A lição é muito interessante, por favor, não passe adiante! Abaixo você pode ver uma demonstração do formulário resultante, bem como fazer o download do arquivos necessários para o trabalho:

Passo 1. descrição geral e como funciona o formulário de feedback:

Em primeiro lugar, direi de quais arquivos precisamos e, de fato, por que eles são necessários:

  • imagens- a pasta onde todas as imagens do nosso formulário são armazenadas;
  • index.html- o arquivo principal, "índice", no qual estará localizado o botão para chamar o formulário de feedback;
  • contact.html- o arquivo no qual o próprio formulário está localizado. É este arquivo que será conectado à janela modal;
  • send.php- manipulador de arquivos, responsável pelo envio da carta;
  • jquery.js- o framework jQuery principal;
  • style.css- arquivo com folhas de estilo em cascata para nosso formulário.

Então, vamos mais longe e em ordem ... O trabalho do formulário será o seguinte: O usuário entra na página onde se encontra o botão de chamada da janela modal, clica nele, em seguida aparece o formulário, nele o visitante insere todos os dados e texto da mensagem e a envia, em seguida, ela é transferida para a página com uma mensagem sobre o envio bem ou malsucedido da carta. Isso é tudo, agora vamos começar a escrever nosso formulário ...

Passo 2. Botão para chamar o formulário.

Para que apareça nossa janela modal com o formulário, você precisa forçá-la de alguma forma a fazê-lo. Para fazer isso, precisamos apenas colocar um botão comum na página. O código para esse botão é mostrado abaixo, junto com os estilos aplicados a ele:

Etapa 3. O próprio formulário + configurações para ele

Agora vamos descobrir onde nosso formulário de feedback estará localizado. E estará no arquivo contact.html, que já está localizado no código-fonte da lição. Este formulário é bem pequeno, então colocarei seu código abaixo:

Enviando uma mensagem para a administração:



*Nome:
* E-mail:
Tópico:
*Mensagem:

Como você pode ver, percorrendo o código, mesmo a olho nu, você pode ver que para uma melhor visualização do formulário, usei um layout de tabela. Isso foi muito útil para mim equalizar todos os campos do formulário.

Passo 4. Manipulador responsável por enviar e-mails

Aqui, vou apresentá-lo rapidamente ao gerenciador de correio mestre. Não vou apresentar seu código aqui, pois está no código-fonte. Baixe e veja seu conteúdo. Se você conhece php em um nível intermediário, como eu, então você mesmo pode analisar facilmente todo o código desse manipulador. Se tudo estiver pronto, siga em frente ...

Etapa 5. Ativando o framework jQuery principal

Agora, como em qualquer tutorial jQuery, temos que "aparafusar" o framework jQuery principal. Para fazer isso, vamos voltar um pouco, para onde nosso botão está localizado, e entre as tags e insira o seguinte código:

Etapa 6. Estilizando o formulário

Como você pode ver, os estilos do nosso formulário são renderizados separadamente, no arquivo style.css pois esses estilos ocupam muito espaço. Precisamos apenas vincular o código abaixo ao nosso arquivo de índice:

Etapa 7. ajustes de jQuery

Agora, para o trabalho completo da janela modal do formulário, devemos inserir o seguinte código jQuery:

Conclusão.

Portanto, nosso formulário de feedback interessante está pronto. O caminho foi longo e difícil, então se alguém não entendeu algo, ouvirei suas perguntas nos comentários desta lição. E isso é tudo para mim, até nos encontrarmos novamente, amigos!

Atenciosamente, guia jQuery - M.K.

Estamos todos acostumados a ver os contatos em páginas separadas, especialmente criadas para o feedback do usuário. Via de regra, nessas páginas, além dos formulários de contato, postam muitas outras informações para interação e comunicação. O mecanismo é depurado, comprovado ao longo dos anos e funciona perfeitamente. Mas em alguns casos, torna-se necessário exibir um separado Formulário de Contato como uma janela pop-up sem redirecionar os usuários para outras páginas.
Ao mesmo tempo, pensamos em trabalhar com jQuery. Hoje, quero apresentar a você uma solução interessante para criar um formulário de contato pop-up separado e originalmente projetado para o site.

Na minha opinião, um exemplo maravilhoso de meio de interação com os usuários.

Vimos um exemplo. Agora, vamos decompor esta forma em seus componentes, desde a criação estrutura geral em Html, antes de modelar a aparência do layout usando CSS.

Código HTML do formulário

Nada sobrenatural, a estrutura mais simples de um formulário de contato regular, colocado em um elemento de bloco div com um identificador e classe específicos, para moldar ainda mais a aparência do formulário em css e interagindo com o pequeno javascript que precisaremos para ativar e fechar o formulário pop-up.

Fechar

Envie-nos uma mensagem

Fechar

Envie-nos uma mensagem

Além disso, precisamos criar uma camada de sombreamento para o fundo geral, ao ativar a forma pop-up. Você pode realizar essa tarefa de maneiras diferentes, mas não seremos muito espertos e adicionaremos mais um div atribuindo a ele um identificador: id = "fade" e uma classe: class = "black-overlay". Você pode colocá-lo ao lado do formulário para não pesquisar por muito tempo, se necessário.

Comentários

Você provavelmente notou que o botão Fechar está inscrito no bloco do formulário de contato, imediatamente antes do título, e isso é lógico, mas onde mais deveria estar, o botão deve aparecer e desaparecer junto com o formulário. Aparência e a posição do botão Fechar, iremos posteriormente formar em CSS

Isso é tudo, agora vamos dar uma olhada no código HTML completo da página que contém o formulário de feedback pop-up:

Formulário de contato pop-up Comentários
Fechar

Envie-nos uma mensagem

Formulário de contato pop-up Comentários

Fechar

Envie-nos uma mensagem

Antes de chegarmos à parte divertida, estilizando nosso formulário de contato com CSS, vou voltar um pouco. Os mais atentos, provavelmente notaram que os botões para abrir e fechar o formulário são implementados como links com um "jammer" href = "javascript: void (0)". Bom ou ruim, não encontrei uma resposta exata para mim, uso esse método por hábito. Embora para elementos nos quais o evento onclick é processado pelo script, parece-me que é mais lógico e correto usar