Olá, pessoal

Atendendo a pedidos, escreverei um tutorial explicando como criar um formulário de contato simples em PHP, utilizando o Dreamweaver e a validação dos comandos Spry.

Pré-Requisitos

  • Facilidade quanto ao manuseio de formulários no Dreamweaver
  • Conhecimento básico de lógica de programação
  • Uso do Dreamweaver CS3 ou CS4 para os comandos Spry de validação
  • Criar uma conta gratuita no servidor 000webhost.com

Objetivo

  • Criar um formulário de contato em PHP, utlizando o Dreamweaver e seus comandos Spry de validação.

Conteúdo

1º Passo – Inserção do Campo FORM

Vamos iniciar, criando um formulário básico, mas já utilizando os scripts de validação do Spry. Recomendo àqueles que não estão familiarizados com esta ferramenta do Dreamweaver, a verem os tutoriais:

Comecemos pela inserção da seção responsável pela inclusão de todos os itens do formulário “Form“. Acessemos o painel Insert > Forms > Form:

01 - Menu Insert Forms

Fig.01 - Menu Insert > Forms

Lembrando que, a partir de agora, todos os itens deverão ser inseridos dentro da linha tracejada que foi criada automaticamente pelo Dreamweaver. Ao clicar sobre esta linha tracejada, o painel Properties é aberto, e nele, já podemos realizar algumas configurações:

Painel Properties - Form

Fig.02 - Painel Properties - Form

2º Passo – Inserção do Campo “Nome”

Seção de formulário criada, agora vamos aos campos. Para isso, utilizaremos o Painel Insert > Spry > Spry Validation Text Field:

Painel Insert - Spry Text Field

Fig.03 - Painel Insert - Spry Text Field

Lembrando que, estou utilizando a versão CS4 do Dreamweaver. Na versão CS3, o posicionamento da barra Insert é na parte superior do programa.

Fig.04 - Text Field NOME

Fig.04 - Text Field NOME

Com esta ação, teremos o seguinte resultado:

Fig.05 - Painel properties Spry

Fig.05 - Painel properties Spry

Vamos formatar este campo com as seguintes propriedades:

  1. Spry TextField: Spry_NOME
  2. Validate on: Marcar a opção “Blur“
  3. Required : Marcar esta opção para deixar o campo obrigatório
  4. Previews states: Selecionar a opção “Required” e trocar o texto “A value is required” por “Preenchimento obrigatório.”.

Vejamos o resultado abaixo:

Fig.06 - Validação do campo NOME

Fig.06 - Validação do campo NOME

Vamos salvar este formulário com o nome: contato.php

3º Passo – Inserção do Campo “E-mail”

Seguindo a mesma lógica do 2º passo, devemos fazer a sequência:

  1. Painel Insert > Spry > Spry Validation Text Field
  2. ID: email | Label: E-mail:
  3. Spry TextField: Spry_EMAIL
  4. Type: Email Address – Validação para endereço de e-mail
  5. Validate on: Marcar a opção “Blur“
  6. Required : Marcar esta opção para deixar o campo obrigatório
  7. Previews states: Selecionar a opção “Required” e trocar o texto “A value is required” por “Preenchimento obrigatório.”.
  8. Previews states: Selecionar a opção “Invalid Format” e trocar o texto “A value is required” por “E-mail inválido: tente novamente.”.

Fig.07 - Validação Spry - EMAIL

Fig.07 - Validação Spry - EMAIL

4º Passo – Inserção do Campo “Assunto”

Seguindo a mesma lógica do 2º passo, devemos fazer a sequência:

  1. Painel Insert > Spry > Spry Validation Text Field
  2. ID: assunto | Label: Assunto:
  3. Spry TextField: Spry_ASSUNTO
  4. Validate on: Marcar a opção “Blur“
  5. Required : Marcar esta opção para deixar o campo obrigatório
  6. Previews states: Selecionar a opção “Required” e trocar o texto “A value is required” por “Preenchimento obrigatório.”.

Fig.08 - Validação Spry ASSUNTO

Fig.08 - Validação Spry - ASSUNTO

5º Passo – Inserção do Campo “Mensagem”

Seguindo a mesma lógica do 2º passo, devemos fazer a sequência:

  1. Painel Insert > Spry > Spry Validation Textarea
  2. ID: manesagem | Label: Mensagem:
  3. Spry TextField: Spry_MENSAGEM
  4. Validate on: Marcar a opção “Blur“
  5. Required : Marcar esta opção para deixar o campo obrigatório
  6. Previews states: Selecionar a opção “Required” e trocar o texto “A value is required” por “Preenchimento obrigatório.”.

Fig.09 - Validação Spry - MENSAGEM

Fig.09 - Validação Spry - MENSAGEM

6º Passo – Inserção do Botão “Enviar”

Seguindo a mesma lógica do 2º passo, devemos fazer a sequência:

  1. Painel Insert > Form > Button
  2. ID: enviar
  3. Value: Enviar
  4. Action: Submit Form
Fig.10 - Botão do formulário

Fig.10 - Botão do formulário

6º Passo – Criando a página “enviar_formulario.php”

Vamos criar agora a página responsável pelo envio dos dados do formulário acima. Então, com um arquivo novo, já o salvemos com o nome “enviar_formulario.php“.

Em seguida, vamos melhorar a nossa visualização do código PHP, alterando a área de trabalho do Dreamweaver, clicando na aba Split.

Fig.11 - Visualização Split

Fig.11 - Visualização Split

Este tipo de visualização favorece ao desenvolvedor trabalhar o código acima e o design embaixo.

Continuando… Vamos apagar todo o código html acima para iniciarmos a produção do código PHP.

Lembrando que a intenção não é detalhar as funções do PHP, mas criar um código que faça o papel de enviar os dados do formulário pelo Dreamweaver. O que está entre os símbolos /* comentário */ são os comentários de cada seção que a gente for colocar no código.

< ?PHP
/* E-mail que receberá os dados do formulário*/
$email_destino="seu-email-aqui@provedor.com";
/*****************************************************************
Algumas informações que constarão no cabeçalho do e-mail
******************************************************************/
$cabecalho = "From: \"Contato do Site\" \n"; /* Exibe de onde partiu este formulário. */
$cabecalho .= "Reply-To: ".$_POST['nome']."&amp;lt;".$_POST['email']."&amp;gt;\n";
$cabecalho .= "X-Mailer: PHP v".phpversion()."\n"; /* Versão do X-Mailer responsável pelo envio */
$cabecalho .= "Content-type: text/html; charset=iso-8859-1"."\r\n"; /* Responsável pela tranformação do texto em formato HTML */
$cabecalho .= "MIME-Version: 1.0"."\r\n";
/*****************************************************************
Conteúdo do e-mail extraído do formulário
******************************************************************/
$conteudo = "Mensagem enviada por:".$_POST['nome']. "\n";
$conteudo .= "Email:".$_POST['email']. "\n";
$conteudo .= "Assunto:".$_POST['assunto']. "\n";
$conteudo .= "Mensagem:".$_POST['mensagem']."\n";
$conteudo .= "IP:".$_SERVER['REMOTE_ADDR']. "\n";
/*****************************************************************
Mensagens de erro e confirmação de envio
******************************************************************/
if (mail($email_destino,$_POST['assunto'],$conteudo,$cabecalho)) {
echo "Sua mensagem foi enviada com sucesso!";
}
else {
echo "Ops! Aconteceu um erro de envio. Por favor, tente novamente ou entre em contato com o administrador do site.";
}
?>

Enviando os dois arquivos, mas a pasta Spry para um mesmo diretório do seu site, já estão funcionando perfeitamente :)

Mas vamos da uma incrementada no código ;)

7º Passo – Configurando mensagem HTML

Vamos melhorar a exibição das mensagens de confirmação e erro, formatando-as em HTML.

/*****************************************************************
Mensagens de erro e confirmação de envio
******************************************************************/
if (mail($email_destino,$_POST['assunto'],$conteudo,$cabecalho)) {
   echo "<h3>Sua mensagem foi enviada com<font color='#CC0000'>sucesso!</font></h3>
   <p>
   <h2>Responderemos em breve!</h2>
   </p>";
}
else {
   echo "<h2><font color='#CC0000'>Ops! Aconteceu um erro de envio. Por favor, tente novamente ou entre em contato com o administrador do site.</font></h2>";
}
?>

8º Passo – Testando no servidor

Só para tirarmos a prova dos nove, vamos testar o formulário, utilizando um servidor gratuito. O server escolhido foi o 000webhost.com:

Faça seu cadastro gratuito e envie os arquivos (não esqueça da pasta Spry) e veremos o seguinte resultado:

É isso aí, pessoal.
No próximo tutorial, falarei como enviar arquivos automaticamente pro FTP com o Dreamweaver.

Até lá

CarlosHPS Webdesigner 8)

Blog Widget by LinkWithin