Crie um arquivo: contato.html
<!DOCTYPE html!>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link href="estilo.css" rel="stylesheet" type="text/css" media="all">
<title>Formulário</title>
</head>
<body>
<div id="container">
<div id="corpo">
<section>
<article class="artigo">
<form method="POST" action="processacont.php">
<input type="hidden" name="operacao" value="incluir">
<table border="0">
<tr>
<td width="960" height="20"></br>
<font color="#154ecd" size="5"> Fale Conosco</font>
</td>
</tr>
</table></br>
<hr style='width: 100%; height:5px; text-align:center; border:0px; color:#154ecd; background:#154ecd;' /></br>
<table border="0">
<tr>
<td width="330" height="20">
<font color="#154ecd" size="4"> Nome: </font>
<font color="red" size="4">*</font>
</td>
<td width="320" height="20">
<font color="#154ecd" size="4">E-mail: </font>
<font color="red" size="4">*</font>
</td>
<td width="310" height="20">
<font color="#154ecd" size="4">Telefone: </font>
<font color="red" size="4">*</font>
</td>
</tr>
<tr>
<td width="330" height="20"> <input type="text" name="nome" size="35" class="txtarea">
</td>
<td width="320" height="20">
<input type="text" name="email" size="35" class="txtarea">
</td>
<td width="310" height="20">
<input type="number" name="telefone" size="35" class="txtarea">
</td>
</tr>
</table>
<table border="0"></br>
<tr>
<td width="330" height="20">
<font color="#154ecd" size="4"> Informe seus interesses: </font>
<font color="red" size="4">*</font>
</td>
</tr>
</table></br></br>
<table border="0">
<tr>
<td height="20"> <input type="checkbox" name="interesse[]" value="aniversario">
</td>
<td height="20"> <input type="checkbox" name="interesse[]" value="casamento">
</td>
</tr>
<tr>
<td height="20"> <font color="#154ecd" size="4">Festa de Aniversário</font>
</td>
<td height="20"> <font color="#154ecd" size="4">Festa de Casamento</font>
</td>
</tr>
</table>
<table border="0"></br>
<tr>
<td width="960" height="20">
<font color="#154ecd" size="4"> Descreva sua solicitação: </font>
</td>
</tr>
</table>
<table border="0">
<tr>
<td width="6" height="20">
<td>
<td width="330" height="20">
<label><textarea name="solicitacao" id="textarea" cols="114" rows="5"></textarea>
</label>
</td>
</tr>
</table></br></br>
<table border="0">
<tr>
<td width="420" height="50"> ( * ) Campos obrigatórios </td>
</tr>
<tr>
<td>
<input type="reset" value="Cancelar" />
<input type="submit" name="enviar" value="Enviar">
</td>
</tr>
</table>
</form>
</article>
</section>
</div>
<!--Copyright © Membo. Todos os direitos reservados.-->
</div>
</body>
</html>
Agora crie um arquivo para o estilo: estilo.css
/*html5 semantics tags
article, aside, figure, footer, header, hgroup, menu, nav, section
{ display: block; }*/
/* light css reset */
* { margin : 0; padding : 0; }
/*h2, h3, h4, h5, p, ul, ol { margin : 0 20px; padding : .5em 0; }
img { border: 0px;}
/* =page level container */
#container {/*Container que contem o site */
margin: 0px auto 0px auto;
width: 960px;
background:#CAE1FF;
}
#corpo { /*Div Corpo do site possui a section*/
margin: 1px;
padding-top: 0px;
padding-bottom: 20px;
height: 600px;
}
section { /*Div Corpo do site possui o cabecalho do artigo, o corpo do artigo e o cabecalho*/
margin:0px auto 0px auto;
width:958px;
height:600px;
float:left;
background:#CAE1FF;
margin-left:0px;
}
.artigo {
margin:0px auto 0px auto;
width:958px;
height:350px;
float:left;
background:#CAE1FF;
margin:0px;
}
.txtarea {/*Define a altura do input*/
/*background-color:#B0E0E6;*/
height: 40px;
font: 18px georgia, sans-serif;
color:#154ecd;
}
Agora vamos fazer a conexão com banco de dados, crie um arquivo: conexaobd.inc
Importante lembrar que é necessário um servidor para rodar o php. Caso esteja habituado com php, temos um tutorial de introdução: Clique aqui.
ou http://informaticadodia.blogspot.com/2013/10/tutorial-como-instalar-o-wamp-server.html
<?php
//conexão com o servidor
$conect = mysql_connect("endereço_servidor", "usuario_do_banco_de_dados", "senha_banco_de_dados");
// Caso a conexão seja reprovada, exibe na tela uma mensagem de erro
if (!$conect) die ("<h1>Falha na coneco com o Banco de Dados!</h1>");
// Caso a conexão seja aprovada, então conecta o Banco de Dados.
$db = mysql_select_db("nome_banco_de_dados");
/*Configurando este arquivo, depois é só você dar um include em suas paginas php, isto facilita muito, pois caso haja necessidade de mudar seu Banco de Dados você altera somente um arquivo*/
?>
Agora vamos salvar os dados no banco de dados, crie um arquivo: processacont.php
<?php
$operacao = $_POST["operacao"];
include "conexaobd.inc";
if($operacao == "incluir"){
$nome = $_POST["nome"];
$email = $_POST["email"];
$telefone = $_POST["telefone"];
$interesse = implode($_POST["interesse"],",");
$solicitacao = $_POST["solicitacao"];
$sql = "INSERT into cadastro VALUES";
$sql .="('$nome', '$email', $telefone, '$interesse', '$solicitacao')";
$resultado = mysql_query ($sql);
echo "Mensagem enviada com sucesso!";
}
?>
Espero que gostem do formulário.
Até um próximo tutorial.
