Formulario de contacto con Bootstrap en php

Actualizado el lunes, 7 agosto, 2017

Como ampliación / actualización de un antiguo articulo sobre la creación de un formulario de contacto, en este veremos una versión mas actualizada y ya diseñado con bootstrap sobre php.

Veremos paso a paso, como se crea un formulario de contacto con Bootstrap que trabaje con PHP, que de echo es el lenguaje de servidor mas usado. También agregaremos las funciones de prevención de spam y la validación del formulario. Ya veras que sencillo.

Formulario de contacto con Bootstrap en php 1

 

Comenzamos:

Lo primero que haremos sera configurar la estructura HTML. No es imprescindible pero en este caso usaremos las clases col-md-6 col-md-offset-3.

Para empezar sin problemas usaremos el siguiente código HTML, luego lo explicamos.

<form class="form-horizontal" role="form" method="post" action="index.php">
	<div class="form-group">
		<label for="name" class="col-sm-2 control-label">Nombre</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="">
		</div>
	</div>
	<div class="form-group">
		<label for="email" class="col-sm-2 control-label">Email</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="">
		</div>
	</div>
	<div class="form-group">
		<label for="message" class="col-sm-2 control-label">Mensaje</label>
		<div class="col-sm-10">
			<textarea class="form-control" rows="4" name="message"></textarea>
		</div>
	</div>
	<div class="form-group">
		<label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="human" name="human" placeholder="Respuesta">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-10 col-sm-offset-2">
			<input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-10 col-sm-offset-2">
			<! Will be used to display an alert to the user>
		</div>
	</div>
</form>

Explicación:

<Form>

Esto es el contenido dentro de la etiqueta<form> , vemos una gran variedad de atributos.

Method: Hay dos métodos diferentes, podemos usar GET y POST. Normalmente usaremos el método post.

Role: En Bootstrap se añadio el atributo role="form"  que nos ayudara con la accesibilidad. Recomendable su uso.

Action: El action se usa para indicar la ubicación del script PHP. En este caso, hemos incluido la secuencia completa en un solo código, pero vale la pena tenerlo en cuenta.

<Label>

Las etiquetas las usaremos para especificar qué información se debe introducir en cada entrada. El forse usa para asociar la etiqueta con el nombre de entrada. En el ejemplo hemos creado una etiqueta de nombre for="name". Que se asocia con  id="name".

<Input>

Declaramos las entradas.

Input Type: Hay varios tipos de entrada y es muy importante que usemos el correcto. Si seleccionamos el tipo de entrada “e-mail”, el teclado para escribir el mail se mostrará en los dispositivos móviles. Si se selecciona el tipo de entrada “tel”, los usuarios móviles podrán hacer clic en el número de teléfono y hacer una llamada inmediatamente.

En el formulario de contacto, usamos los tipos de entrada de texto, correo electrónico y de haga clic.

Id: El atributo id le permite proporcionar una identidad única para cada elemento HTML. Útil cuando se asocia las etiquetas a las entradas.

Name: El nombre de atributo se utiliza para hacer referencia a elementos de un JavaScript o bien a los datos del formulario una vez enviado.

Placeholder: Muestran un texto de ejemplo o indicación dentro de las entradas del formulario.

Value: El atributo value puede variar dependiendo del tipo de entrada. En nuestro ejemplo, el valor se utiliza para definir el valor de entrada inicial.

En el caso de los botones, el valor del atributo se utiliza para visualizar el texto del botón.

 

Bootstrap Classes:

Otorgamos a nuestro <form> una clase de form-horizontal que se utiliza para alinear las etiquetas y los controles del formulario en una disposición horizontal. Después creamos una <div> para cada área de entrada con una clase form-group.

Para cada etiqueta, usaremos control-label. En el ejemplo, hemos añadido una clase de col-sm-2  de modo que nuestras etiquetas se apilan en la parte superior de las entradas de los formulario en los dispositivos móviles más pequeños. Esto hace que sea mucho más fácil de leer en los móviles.

 

Variables php:

Declaramos las siguientes variables en PHP para poder extraer los datos.

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$human = intval($_POST['human']);

Variable adicionales para el envío del mail.
$from = 'Formulario de contacto'; 
$to = 'ejemplo@midominio.com'; 
$subject = 'Mensaje del formulario de contacto ';
 
$body = "From: $name\n E-Mail: $email\n Message:\n $message";

 

Validación:

Creamos un código de validación para alertar al usuario si hay algún error o algun campo esta sin rellenar correctamente.

Para la casilla de nombre y mensaje comprobaremos que a sido rellenada.

if (!$_POST['name']) {
	$errName = 'Introduzca su nombre';
}

Para validar el correo electrónico…
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
	$errEmail = 'Introduce un email valido';
}

Verificación del código antispam.
if ($human !== 5) {
	$errHuman = 'Verificacion antispam fallida';
}

Para que se muestre la respuesta de verificación debes insertar…
<?php echo "<p class='text-danger'>$errName</p>";?>

debajo de cada nombre.

 

No te olvides de insertar el código…

value="<?php echo htmlspecialchars($_POST['name']); ?>">

para que se restablezcan los valores iniciales y no te salte error.

 

Código de envío php:

<?php
	if (isset($_POST["submit"])) {
		$name = $_POST['name'];
		$email = $_POST['email'];
		$message = $_POST['message'];
		$human = intval($_POST['human']);
		$from = 'Formulario de contacto'; 
		$to = 'ejemplo@midominio.com'; 
		$subject = 'Mensaje de formulario de contacto ';
		
		$body = "From: $name\n E-Mail: $email\n Message:\n $message";

Verificación de errores.

// Check if name has been entered
if (!$_POST['name']) {
	$errName = 'Introduzca su nombre y apellido';
}
 
// Check if email has been entered and is valid
if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
	$errEmail = 'Introduzca un email valido';
}
 
//Check if message has been entered
if (!$_POST['message']) {
	$errMessage = 'Introduzca un mensaje';
}
//Check if simple anti-bot test is correct
if ($human !== 5) {
	$errHuman = 'Validacion anti-spam incorrecta';
}

Si no existen errores se enviara con:
// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
	if (mail ($to, $subject, $body, $from)) {
		$result='<div class="alert alert-success">Thank You! I will be in touch</div>';
	} else {
		$result='<div class="alert alert-danger">Se produjo un error al enviar el mensaje. Por favor, inténtelo más tarde.</div>';
	}
}

Si el formulario se envía correctamente, mostraremos una alerta usando alert alert-success para notificar al usuario que el formulario se ha enviado correctamente. Si el formulario no se envia, mostraremos una alerta usando alert alert-danger donde comunicaremos al usuario que el formulario no pudo ser enviado. Inserta el siguiente código al final.
<?php echo $result; ?>

 

Resultado y descarga:

El resultado final, todo unificado en un index.php, sería:

<?php
	if (isset($_POST["submit"])) {
		$name = $_POST['name'];
		$email = $_POST['email'];
		$message = $_POST['message'];
		$human = intval($_POST['human']);
		$from = 'Demo Contact Form'; 
		$to = 'example@domain.com'; 
		$subject = 'Message from Contact Demo ';
		
		$body ="From: $name\n E-Mail: $email\n Message:\n $message";

		// Check if name has been entered
		if (!$_POST['name']) {
			$errName = 'Introduzca su nombre y apellido';
		}
		
		// Check if email has been entered and is valid
		if (!$_POST['email'] || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
			$errEmail = 'Introduzca un email valido';
		}
		
		//Check if message has been entered
		if (!$_POST['message']) {
			$errMessage = 'Introduzca un mensaje';
		}
		//Check if simple anti-bot test is correct
		if ($human !== 5) {
			$errHuman = 'Validacion anti-spam incorrecta';
		}

// If there are no errors, send the email
if (!$errName && !$errEmail && !$errMessage && !$errHuman) {
	if (mail ($to, $subject, $body, $from)) {
		$result='<div class="alert alert-success">Thank You! I will be in touch</div>';
	} else {
		$result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later.</div>';
	}
}
	}
?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Bootstrap contact form with PHP example by BootstrapBay.com.">
    <meta name="author" content="BootstrapBay.com">
    <title>Bootstrap Contact Form With PHP Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  </head>
  <body>
  	<div class="container">
  		<div class="row">
  			<div class="col-md-6 col-md-offset-3">
  				<h1 class="page-header text-center">Formulario de contacto</h1>
				<form class="form-horizontal" role="form" method="post" action="index.php">
					<div class="form-group">
						<label for="name" class="col-sm-2 control-label">Nombre</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="name" name="name" placeholder="Nombre y apellido" value="<?php echo htmlspecialchars($_POST['name']); ?>">
							<?php echo "<p class='text-danger'>$errName</p>";?>
						</div>
					</div>
					<div class="form-group">
						<label for="email" class="col-sm-2 control-label">Email</label>
						<div class="col-sm-10">
							<input type="email" class="form-control" id="email" name="email" placeholder="ejemplo@dominio.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
							<?php echo "<p class='text-danger'>$errEmail</p>";?>
						</div>
					</div>
					<div class="form-group">
						<label for="message" class="col-sm-2 control-label">Mensaje</label>
						<div class="col-sm-10">
							<textarea class="form-control" rows="4" name="message"><?php echo htmlspecialchars($_POST['message']);?></textarea>
							<?php echo "<p class='text-danger'>$errMessage</p>";?>
						</div>
					</div>
					<div class="form-group">
						<label for="human" class="col-sm-2 control-label">2 + 3 = ?</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="human" name="human" placeholder="Respuesta">
							<?php echo "<p class='text-danger'>$errHuman</p>";?>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-10 col-sm-offset-2">
							<input id="submit" name="submit" type="submit" value="Enviar" class="btn btn-primary">
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-10 col-sm-offset-2">
							<?php echo $result; ?>	
						</div>
					</div>
				</form> 
			</div>
		</div>
	</div>   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

 

Tal como ves el resultado lo puedes copiar y pegar en un index.php y ejecutarlo en tu servidor.

Funciona perfectamente.

Una respuesta

  1. Al
    11/12/2018

Agregar comentario