Puntos clave:
- Los formularios de contacto PHP permiten a los usuarios enviar mensajes fácilmente a los administradores del sitio web.
- Construir un formulario de contacto implica crear el formulario HTML, configurar una base de datos para almacenar los mensajes y escribir un script PHP para procesar los datos del formulario y enviar correos electrónicos.
- Añadir medidas de seguridad como CAPTCHA ayuda a evitar el envío de spam y garantiza que los usuarios reales puedan ponerse en contacto contigo.
Un formulario de contacto PHP permite a los usuarios comunicarse con los administradores del sitio web. Les permite enviar consultas a los propietarios del sitio sobre servicios o funciones relevantes. Mediante el formulario de contacto, los administradores de la web pueden gestionar sus correos electrónicos comerciales. Una vez que hay un formulario de contacto activo disponible, puede generar consultas. Se conecta fácilmente con la base de datos, proporcionando así registros y detalles completos sobre los usuarios que desean contactar y enviar sus consultas a los administradores del sitio web.
Requisitos previos
Para crear un sencillo formulario de contacto PHP con MySQL, supongo que tienes una aplicación PHP instalada en un servidor web. Mi configuración es :
- PHP 7.1
- MySQL
- Jquery/Ajax
Para asegurarme de que no me desvío por problemas a nivel de servidor, decidí alojar la aplicación PHP en servidores gestionados por Cloudways, porque la plataforma ofrece un potente entorno optimizado para PHP. Además, no tengo que ocuparme de los problemas de gestión del servidor y así puedo centrarme en la idea central de este tutorial.
Aloja sitios web PHP con facilidad [A partir de 10 $ de crédito].
- Puesta en escena gratuita
- Copia de seguridad gratuita
- PHP 8.0
- Sitios web ilimitados
También puedes probar Cloudways gratis registrando una cuenta en la plataforma siguiendo este GIF:
Crear el formulario de contacto HTML
Crea el formulario de contacto HTML como se muestra a continuación con validación y guárdalo con extensión .php. El valor que se escribirá entre comillas dobles en el atributo Nombre como name=»u_name» en las etiquetas de entrada funciona como nombre de variable. Estos atributos contendrán los datos del formulario que utilizaremos para guardar en nuestra base de datos . Existen dos métodos para enviar los datos de tu formulario a tu página PHP: GET y POST. Yo utilizaré POST porque oculta los datos del usuario y no hay límite para enviar datos. Si no tienes tiempo para profundizar en tecnicismos, puedes utilizar formularios online que están prediseñados según los estándares profesionales de diseño de formularios.
Nota: Para el estilo puedes usar tu propio CSS y también usar Clases de Bootstrap para mejorar el estilo.
!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">
<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 la base de datos MySQL
El siguiente paso es instalar y configurar la base de datos MySQL. Para ello, inicia el Gestor de Bases de Datos de Cloudways y crea una tabla ‘formulario_contacto_info’, con los campos id , nombre , email , teléfono , comentarios.
A continuación, crea config.php que se utilizará para establecer la conexión entre la aplicación PHP y la base de datos. Una vez creado el archivo, ábrelo y pega en él el siguiente código:
<?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);
}
?>
También te puede gustar: Cómo conectarse a una base de datos MySQL remota
Crear el Script PHP del Formulario de Contacto
Ahora vamos a crear un archivo get_response.php y a pegar en él el siguiente código:
<?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";
}
?>
En este código PHP, he utilizado el método POST para enviar los datos del formulario de contacto al servidor. Utilizaré dos métodos globales de PHP, $_REQUEST y $_POST para recuperar y guardar los datos del formulario de contacto en la variable local del servidor.
La diferencia entre estos dos es que $_REQUEST puede recuperar datos de ambos métodos, es decir, GET y POST. Sin embargo, $_POST sólo puede recibir datos del método POST.
Este es el aspecto del script PHP del formulario de contacto en acción:
Método de correo
También creo un archivo contact_mail.php para el correo en el que enviar tus datos del formulario de contacto en tu correo fácilmente.
<?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>"; } ?>
También te puede gustar: Cómo enviar correo electrónico en PHP
Formulario Captcha
Puedes utilizar código Captcha en un formulario para asegurarte de que el formulario se envía con intervención manual sin utilizar ninguna herramienta.
Formulario de contacto PHP con Captcha
Para desarrollar el formulario de contacto con captcha, empecemos con el siguiente código HTML. En este código, pondré un enlace a un archivo PHP en la etiqueta imagen con el nombre 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>
Formulario de contacto Validación Captcha
Para la validación del campo Captcha, puedes pegar el siguiente código en la etiqueta <script>. Usando este código, puedes establecer la validación jQuery para la validación del formulario captcha.
if(!$("#captcha").val()) {
$("#captcha-info").html("(required)");
$("#captcha").css('background-color','#FFFFDF');
valid = false;
}
Actualizar Captcha
Este sencillo script jQuery refrescará el código PHP del captcha, y recreará la imagen con el nuevo código. Esta nueva imagen se establecerá como fuente de la imagen captcha.
function refreshCaptcha() {
$("#captcha_code").attr('src','captcha.php');
}
PHP Captcha Imagen
PHP utiliza una función llamada PHP rand() para generar un número aleatorio. Usando md5(), puedes encriptar el número y dividirlo en un código captcha de 6 caracteres. El código no sólo se añade a la sesión PHP, sino que también se añade como fuente de la imagen captcha utilizando la función PHP GD.
session_start();
$random_alpha = md5(rand());
$captcha_code = substr($random_alpha, 0, 6);
$_SESSION["captcha_code"] = $captcha_code;
$target_layer = imagecreatetruecolor(70,30);
$captcha_background = imagecolorallocate($target_layer, 255, 160, 119);
imagefill($target_layer,0,0,$captcha_background);
$captcha_text_color = imagecolorallocate($target_layer, 0, 0, 0);
imagestring($target_layer, 5, 5, 5, $captcha_code, $captcha_text_color);
header("Content-type: image/jpeg");
imagejpeg($target_layer);
Biblioteca de manipuladores de formularios
También puedes realizar la validación de captchas y formularios utilizando la biblioteca Form Handler. Mira el siguiente ejemplo:
use FormGuide\Handlx\FormHandler;
$demo = new FormHandler();
$validator = $demo->getValidator();
$validator->fields(['name','email'])->areRequired()->maxLength(50);
$validator->field('email')->isEmail();
$validator->field('message')->maxLength(6000)
$demo->requireCaptcha();
Alojamiento PHP Gestionado Supercharged – Mejora la velocidad de tu aplicación PHP en un 300%.
Palabras finales
En este tutorial, he demostrado la creación de un formulario de contacto PHP utilizando HTML, AJAX, jQuery y MySQL. Aquí tienes una demostración en vivo del Código PHP del formulario de contacto en acción. También he dado una breve visión general sobre el formulario captcha, y por qué debes utilizarlo en el formulario de contacto. El artículo no sólo demuestra cómo configurar captcha en un formulario de contacto, sino que también define cómo configurar su validación utilizando la etiqueta script. Además, también puedes utilizar la biblioteca Form Handler para integrar la validación de captcha dentro del formulario.
Aún así, si tienes alguna pregunta más sobre la integración de captchas en el formulario de contacto, o quieres compartir algunos de tus consejos sobre el tema, no dudes en escribir tus sugerencias en la sección de comentarios más abajo.
Q. ¿Cómo codifico un formulario de contacto en PHP?
A. Para codificar un formulario de contacto en PHP, crea un formulario HTML con campos de entrada y establece la opción method="POST". En tu script PHP, utiliza $_POST['field_name'] para capturar los datos del formulario, y luego procésalos utilizando mail() o PHPMailer para enviar correos electrónicos.
Q. ¿Necesitas PHP para un formulario de contacto?
A. PHP se utiliza habitualmente para gestionar el envío de formularios de contacto, procesar las entradas de los usuarios y enviar correos electrónicos. Aunque existen alternativas como JavaScript y servicios de terceros, PHP sigue siendo una opción estándar para el procesamiento de formularios del lado del servidor.
Q. ¿Cómo puedo crear un formulario de Contacto utilizando HTML y PHP?
A. Crea un formulario HTML con campos para la entrada del usuario y establece la acción en un script PHP. En PHP, utiliza $_POST para recuperar los valores enviados, validar los datos y procesarlos utilizando mail() o una biblioteca de correo como PHPMailer.
Q. ¿Existen frameworks o librerías PHP que simplifiquen la construcción de un formulario de contacto?
A. Sí, frameworks como Laravel, Symfony y Slim facilitan el manejo de formularios. Bibliotecas como PHPMailer y Swift Mailer simplifican el envío de correos electrónicos, garantizando una mayor fiabilidad y seguridad.
Q. ¿Cuáles son las mejores prácticas para evitar el spam en un formulario de contacto PHP?
A. Utiliza CAPTCHA, campos de formulario aleatorios, campos honeypot ocultos y validación basada en tokens para evitar el spam. Además, limita el envío de formularios, valida las entradas y utiliza el filtrado de correo electrónico para bloquear los ataques de bots automatizados.
Start Growing with Cloudways Today.
Our Clients Love us because we never compromise on these
Salwa Mujtaba
Salwa Mujtaba es redactora de contenidos técnicos en Cloudways. Con una sólida formación en Informática y experiencia previa como jefa de equipo en Operaciones de Cloudways, aporta a sus escritos un profundo conocimiento de la Plataforma Cloudways. Salwa crea contenidos que simplifican conceptos complejos, haciéndolos accesibles y atractivos para los lectores. Cuando no está escribiendo, puedes encontrarla disfrutando de la buena música, leyendo un libro o pasando tiempo con su familia.
