Pontos-chave
- Um formulário de contacto em PHP usa HTML para a estrutura do front-end, PHP para o processamento do lado do servidor e MySQL para guardar os dados enviados.
- Usa o método POST em vez do GET para que os dados enviados não apareçam no URL do navegador.
- O envio AJAX com o jQuery evita que a página seja recarregada e proporciona uma melhor experiência ao utilizador.
- O CAPTCHA que usa a biblioteca GD do PHP bloqueia os envios feitos por bots sem precisar de serviços de terceiros.
Um formulário de contacto em PHP permite que os utilizadores comuniquem com os administradores do site. Permite-lhes enviar perguntas aos proprietários do site sobre serviços ou funcionalidades relevantes. Através do formulário de contacto, os administradores do site conseguem gerir os seus e-mails profissionais. Assim que houver um formulário de contacto ativo disponível, este pode gerar perguntas. Liga-se facilmente à base de dados, fornecendo assim registos completos e detalhes sobre os utilizadores que querem entrar em contacto e enviar as suas perguntas aos administradores do site.
Pré-requisitos
Para criares um formulário de contacto simples em PHP com MySQL, parto do princípio de que tens uma aplicação PHP instalada num servidor web. A minha configuração é a seguinte:
- PHP 7.1
- MySQL
- JQuery/Ajax
Para garantir que não me distraia com problemas ao nível do servidor, decidi alojar a aplicação PHP nos servidores geridos da Cloudways, porque a plataforma oferece um ambiente potente e otimizado para PHP. Além disso, não tenho de lidar com os aborrecimentos da gestão do servidor e, assim, posso concentrar-me na ideia central deste tutorial.
Também podes experimentar o Cloudways de graça, criando uma conta na plataforma seguindo este GIF:
Cria o código HTML do formulário de contacto
Cria o código HTML do formulário de contacto como se mostra abaixo, com validação, e guarda-o com a extensão .php. O valor que vai ser escrito entre aspas duplas no atributo Name, como name=”u_name” nas tags input, funciona como um nome de variável. Estes atributos vão conter os dados do formulário que vamos usar para guardar na nossa base de dados. Existem dois métodos para enviar os dados do teu formulário para a tua página PHP: GET e POST. Vou usar o POST, pois oculta os dados do utilizador e não há limite para o envio de dados. Se não tiveres tempo para te aprofundares nos pormenores técnicos, podes usar formulários online pré-concebidos de acordo com padrões profissionais de design de formulários.
Nota: Para definir o estilo, podes usar o teu próprio CSS e também as classes do Bootstrap para um melhor resultado.
!DOCTYPE html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
#loading-img{
display:none;
}
.response_msg{
margin-top:10px;
font-size:13px;
background:#E5D669;
color:#ffffff;
width:250px;
padding:3px;
display:none;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1><img src="Inquiry.png" width="80px">Easy Contact Form With Ajax MySQL</h1>
<form name="contact-form" action="" method="post" id="contact-form">
<div class="form-group">
<label for="Name">Name</label>
<input type="text" class="form-control" name="your_name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" name="your_email" placeholder="Email" required>
</div>
<div class="form-group">
<label for="Phone">Phone</label>
<input type="text" class="form-control" name="your_phone" placeholder="Phone" required>
</div>
<div class="form-group">
<label for="comments">Comments</label>
<textarea name="comments" class="form-control" rows="3" cols="28" rows="5" placeholder="Comments"></textarea>
</div>
<button type="submit" class="btn btn-primary" name="submit" value="Submit" id="submit_form">Submit</button>
<img src="img/loading.gif" id="loading-img">
</form>
<div class="response_msg"></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#contact-form").on("submit",function(e){
e.preventDefault();
if($("#contact-form [name='your_name']").val() === '')
{
$("#contact-form [name='your_name']").css("border","1px solid red");
}
else if ($("#contact-form [name='your_email']").val() === '')
{
$("#contact-form [name='your_email']").css("border","1px solid red");
}
else
{
$("#loading-img").css("display","block");
var sendData = $( this ).serialize();
$.ajax({
type: "POST",
url: "get_response.php",
data: sendData,
success: function(data){
$("#loading-img").css("display","none");
$(".response_msg").text(data);
$(".response_msg").slideDown().fadeOut(3000);
$("#contact-form").find("input[type=text], input[type=email], textarea").val("");
}
});
}
});
$("#contact-form input").blur(function(){
var checkValue = $(this).val();
if(checkValue != '')
{
$(this).css("border","1px solid #eeeeee");
}
});
});
</script>
</body>
</html>
Configurar a base de dados MySQL
O próximo passo é instalar e configurar a base de dados MySQL. Para isso, abre o Gestor de Bases de Dados do Cloudways e cria uma tabela chamada «contact_form_info», com os campos id, name, email, phone e comments.
A seguir, cria o ficheiro config.php, que vai servir para configurar a ligação entre a aplicação PHP e a base de dados. Assim que o ficheiro estiver criado, abre-o e cola o código seguinte:
<?php
$host = "localhost";
$userName = "fyrhp";
$password = "RTDE";
$dbName = "fyrhp";
// Create database connection
$conn = new mysqli($host, $userName, $password, $dbName);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
Também podes gostar de: Como ligar-se a uma base de dados MySQL remota
Criar o script do formulário de contacto em PHP
Agora vamos criar um ficheiro chamado get_response.php e colar o código seguinte nele:
<?php
require_once("config.php");
if((isset($_POST['your_name'])&& $_POST['your_name'] !='') && (isset($_POST['your_email'])&& $_POST['your_email'] !=''))
{
require_once("contact_mail.php");
$yourName = $conn->real_escape_string($_POST['your_name']);
$yourEmail = $conn->real_escape_string($_POST['your_email']);
$yourPhone = $conn->real_escape_string($_POST['your_phone']);
$comments = $conn->real_escape_string($_POST['comments']);
$sql="INSERT INTO contact_form_info (name, email, phone, comments) VALUES ('".$yourName."','".$yourEmail."', '".$yourPhone."', '".$comments."')";
if(!$result = $conn->query($sql)){
die('There was an error running the query [' . $conn->error . ']');
}
else
{
echo "Thank you! We will contact you soon";
}
}
else
{
echo "Please fill Name and Email";
}
?>
Neste código PHP, usei o método POST para enviar os dados do formulário de contacto para o servidor. Vou usar dois métodos globais do PHP, $_REQUEST e $_POST para recuperar e guardar os dados do formulário de contacto numa variável local do servidor.
A diferença entre estas duas variáveis é que a $_REQUEST consegue recuperar dados de ambos os métodos, ou seja, GET e POST. No entanto, a $_POST só consegue receber dados do método POST.
Eis como fica o script do formulário de contacto em PHP em ação:
Método de envio
Também crio um ficheiro contact_mail.php para o e-mail para o qual deves enviar o teu os dados do formulário de contacto no teu e-mail facilmente.
<?php $toEmail = "[email protected]"; $mailHeaders = "From: " . $_POST["your_name"] . "<". $_POST["your_email"] .">\r\n"; if(mail($toEmail, $_POST["comments"], $_POST["your_phone"], $mailHeaders)) { echo"<p class='success'>Contact Mail Sent.</p>"; } else { echo"<p class='Error'>Problem in Sending Mail.</p>"; } ?>
Também podes gostar de: Como enviar e-mails em PHP
Formulário Captcha
Podes usar o código Captcha num formulário para garantir que este é enviado com intervenção manual, sem recorrer a quaisquer ferramentas.
Formulário de contacto em PHP com Captcha
Para criar um formulário de contacto com captcha, vamos começar com o seguinte código HTML. Neste código, vou colocar um link para um ficheiro PHP na tag de imagem com o nome de captcha.php.
<div> <label>Captcha</label> <span id="captcha-info" class="info"></span><br/> <input type="text" name="captcha" id="captcha" class="demoInputBox"><br> </div> <div> <img id="captcha_code" src="captcha.php" /> <button name="submit" class="btnRefresh" onClick="refreshCaptcha();">Refresh Captcha</button> </div>
Validação do Captcha no formulário de contacto
Para a validação do campo Captcha, podes colar o código seguinte em
Salwa Mujtaba
Salwa Mujtaba é redatora de conteúdo técnico na Cloudways. Com uma sólida formação em Ciência da Computação e experiência anterior como líder de equipe em Operações da Cloudways, ela traz uma profunda compreensão da Plataforma Cloudways para sua escrita. Salwa cria conteúdo que simplifica conceitos complexos, tornando-os acessíveis e envolventes para os leitores. Quando não está a escrever, podes encontrá-la a apreciar boa música, a ler um livro ou a passar tempo de qualidade com a sua família.
