Mi Blog

No te olvides seguirme en Facebook.

Tan solo tienes que hacer click en Me Gusta

 

 

x

⋆ Cómo crear un formulario de contacto con Bootstrap 4 y PHP

⋆ Cómo crear un formulario de contacto con Bootstrap 4 y PHP

(Tiempo estimado: 9 - 18 minutos)

Gracias a Bootstrap, crear formularios se ha convertido en una tarea realmente sencilla. No son necesarios muchos conocimientos de programación PHP/HTML para conseguir hacer un formulario completamente funcional con multitud de campos y diferentes tipos. El tutorial está enfocado a gente que tenga una base de PHP y HTML.

Seguid leyendo y os enseñaré como crear vuestros propios formularios de contacto de forma sencilla y rápida con Bootstrap y PHP...aunque no explicaré todos los pasos al detalle...

 

 

¿QUÉ ES BOOTSTRAP?

Bootstrap es uno de los Frameworks CSS de código abierto más conocidos y más utilizados en el mundo del desarrollo web.

Este framework facilita enormemente la maquetación de páginas web, ya que te permite crear una interfaz muy limpia y completamente responsive, es decir, adaptable a cualquier tamaño de pantalla. Además, ofrece tantas herramientas y funcionalidades que permite crear una web desde cero de una forma realmente sencilla.

Web: https://getbootstrap.com/

 

Ventajas:

  • Mantenimiento y actualización realizados por Twitter
  • Paquete de elementos web personalizables
  • Utiliza componentes vitales para los desarrolladores (HTML5, CSS3, jQuery o GitHub, entre otros)
  • De sencilla adaptación responsive
  • Incluye Grid system para maquetar por columnas
  • Integración a librerías JavaScript
  • Usa Less
  • Uso ágil y sencillo
  • Contiene suficiente documentación por niveles
  • Cada vez ofrece más plugins

 

 

Bootstrap es un Framework de CSS muy potente y versátil

 

 

1.- ELEMENTOS NECESARIOS PARA ESTE TUTORIAL

  • Un editor de textos/código (Notepad++, SublimeTxt, Visual Studio Code, Netbeans, Eclipse...)
  • Un entorno WAMP/LAMP instalado (Necesitamos soporte de PHP)
  • Conexión a Internet (muy recomendado)

 

 

2.- ¿QUÉ QUEREMOS CONSEGUIR?

En este tutorial lo que queremos hacer es un sencillo formulario de contacto con Bootstrap, PHP y habilitar el envió a través de correo electrónico gracias a la función mail() que nos ofrece PHP. El formulario que diseñaremos tendrá el siguiente aspecto y se necesitan conocimientos de PHP y HTML básicos para entender como funciona, ya que no explicaré todo:

Formulario con Bootstrap 4 y PHPEjemplo del formulario

 

 

Se puede ver una DEMO del Formulario en el siguiente enlace: DEMO FORMULARIO

 

 

3.- DESCARGAR Ó ENLAZAR BOOTSTRAP

Existen 2 opciones para "instalar" bootstrap en nuestra Web.

  1. Descargar Bootstrap y descargarlo en local (ideal si es una web que no tendrá acceso a Internet)
  2. Enlazar los ficheros CSS y JS de los servidores de bootstrap.

 

En este ejemplo se ha optado por la opción número dos, siguiendo las instrucciones de bootstrap https://getbootstrap.com/docs/4.4/getting-started/introduction/. En el siguiente paso se puede ver como en el <head></head> de la página web se enlaza a Bootstrap.

 

 

4.- CREANDO EL FORMULARIO

Crearemos un fichero php con cualquier editor de texto (notepad++,sublimeTxt) o cualquier otro IDE (Netbeans,eclipse,Visual studio code...) que utilicemos para desarrollar. Escribiremos la estructura básica de un fichero HTML dentro de nuestro fichero PHP. Por ejemplo lo llamaremos "formulario-contacto.php". Fuera de las etiquetas PHP se puede escribir código HTML:

<html>
<head>
<!-- AQUI HOJAS DE ESTILO Y JS-->
</head>
<body>
<!-- AQUI EL FORMULARIO -->
</body>
<!-- AQUI EL JS QUE HAGA QUE TARDE EN CARGAR LA WEB --
</html>

 

 

Entre las etiquetas de <head></head>, pondremos el título de nuestra página web, y el enlace a la hoja de estilo CSS de Bootstrap. Este enlace se puede encontrar en la página de Bootstrap.

<title>Formulario de Contacto con Bootstrap y PHP</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

 

 

Dentro de las etiquetas <head></head>, tenemos que incluir la hoja de estilos CSS, bien embebida ó bien como fichero externo. En este ejemplo, como son pocas líneas, se añade el estilo en la propia cabecera.

<style>
body {
background-color: beige;
}
.red {
color: red;
}

#footer {
position: fixed;
width: 100%;
height: 40px;
line-height: 40px;
vertical-align: middle;
background-color: black;
color: white;
text-align: center;
bottom: 0;
left: 0;
}
</style>

 

 

Ahora es momento de crear los campos del formulario. Para ayudarnos podemos visitar la página de ayuda de Bootstrap e ir completando los campos. Es tan sencillo como copiar&pegar. La ayuda está en estas dos páginas Forms y Input-Group. Recordad añadir required a los campos que queráis que sean obligatorios.

<!-- INICIO FORMULARIO HTML -->
<form method="POST" action="/index.php" class="needs-validation" novalidate>

<div class="form-row mt-5">
<div class="col-md-4 mb-3">
<label for="validarNombre">Nombre:<span class="red">*</span></label>
<input type="text" class="form-control" id="validarNombre" name="validarNombre" required>
</div>
</div>

<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validarApellidos">Apellidos:<span class="red">*</span></label>
<input type="text" class="form-control" id="validarApellidos" name="validarApellidos" required>
</div>
</div>

<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validarEmail">Email:<span class="red">*</span></label>
<input type="email" class="form-control" id="validarEmail" name="validarEmail" required>
</div>
</div>

<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validarTelefono">Teléfono:</label>
<input type="number" class="form-control" id="validarTelefono" name="validarTelefono" max="999999999">
</div>
</div>

<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validarTema">Tema:<span class="red">*</span></label>
<select class="custom-select" id="validarTema" name="validarTema" required>
<option selected disabled value="">Selecciona...</option>
<option value="Problema con acceso a Web">Problema con acceso a Web</option>
<option value="Propuesta de colaboración">Propuesta de colaboración</option>
<option value="Eliminar mi usuario de la Web">Eliminar mi usuario de la Web</option>
<option value="Otras cuestiones">Otras cuestiones</option>
</select>
</div>
</div>

<div class="form-row">
<div class="col-md-4 mb-3">
<label for="validarAsunto">Asunto:</label>
<input type="text" class="form-control" id="validarAsunto" name="validarAsunto" required>
</div>
</div>

<div class="form-group">
<label for="validationMensaje">Mensaje:<span class="red">*</span></label>
<textarea class="form-control" id="validationMensaje" name="validationMensaje" rows="3" min="25" required></textarea>
</div>

<div class="form-group mb-10">
<button class="btn btn-primary" type="submit" name="submit">Enviar</button>
<button class="btn btn-success" type="reset" name="reset">Limpiar</button>
</div>

</form>

 

 

Con las líneas anteriores, ya tenemos todo el formulario de contacto creado visualmente. Hay que destacar el campo "action" del formulario, el cual sirve para enviar los datos del formulario a una página de procesado de los datos. En este caso, se  va a procesar todo en la misma página web, por eso el action form  tiene ese valor utilizando PHP. Los datos serán enviados a "ella misma".

 

 

 

 

5.- ENVIAR EL FORMULARIO CON PHP

Ahora tenemos que hacer la parte lógica del formulario en PHP, y se encargará de recibir todos los datos de los campos del formulario y enviarlos por email gracias a la funcion mail() de PHP. No merece mucha explicación ya que es bastante sencillo.

<? php
if (isset($_POST['submit'])) {
//ini_set( 'display_errors', 1 ); # REMOVE // FOR DEBUG
//error_reporting( E_ALL ); # REMOVE // FOR DEBUG
$from = "Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo."; // Email con el dominio del Hosting para evitar SPAM
$fromName = "RPF-WEB"; // Nombre que saldrá en el email recibido
$to = "Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo."; // Dirección donde se enviará el formulario
$subject = $_POST['validarAsunto']; // Asunto del Formulario

/* Componemos el mensaje */
$fullMessage = "Hola! " . $to . "\r\n";
$fullMessage .= $_POST['validarNombre'] . " " . $_POST['validarApellidos'] . " te ha enviado un mensaje:\r\n";
$fullMessage .= "\r\n";
$fullMessage .= "Nombre: " . $_POST['validarNombre'] . "\r\n";
$fullMessage .= "Apellidos: " . $_POST['validarApellidos'] . "\r\n";
$fullMessage .= "E-Mail: " . $_POST['validarEmail'] . "\r\n";
$fullMessage .= "Teléfono: " . $_POST['validarTelefono'] . "\r\n";
$fullMessage .= "Tema: " . $_POST['validarTema'] . "\r\n";
$fullMessage .= "Asunto: " . $_POST['validarAsunto'] . "\r\n";
$fullMessage .= "Mensaje: " . $_POST['validationMensaje'] . "\r\n";
$fullMessage .= "\r\n";
$fullMessage .= "Saludos!\r\n";

/* Creamos las cabeceras del Email */
$headers = "Organization: RPF WEB\r\n";
$headers .= "From: " . $fromName . "<" . $from . ">\r\n";
$headers .= "Reply-To: " . $_POST['validarEmail'] . "\r\n";
$headers .= "Return-Path: " . $to . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
$headers .= "X-Priority: 3\r\n";
$headers .= "X-Mailer: PHP". phpversion() ."\r\n";

/* Enviamos el Formulario*/
if (mail($to, $subject, $fullMessage, $headers)) {
echo "<center><h2>El E-Mail se ha enviado correctamente!</h2></center>";
} else {
echo "<center><h2>Ops ! El E-Mail ha fallado!</h2></center>S";
}
}
?>

 

 

6.- VALIDACIÓN DEL FORMULARIO

Bootstrap es capaz de validar los formularios, para ello debemos añadir al final de nuestro body el siguiente código Javascript:

Formulario con Bootstrap 4 y PHPValidar campos del formulario

 

 

Código Javascript para la validación del formulario:

<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>

 

 

7.- COMPROBAR EL CORRECTO FUNCIONAMIENTO

Ahora es el momento de probar el formulario. Completaremos todos los campos y le daremos a enviar:

Formulario con Bootstrap 4 y PHPFormulario rellenado

 

 

Si el mail se envía correctamente, que no hay ningún error, aparecerá el siguiente mensaje:

Formulario con Bootstrap 4 y PHPFormulario enviado

 

 

Y pasados unos minutos/segundos, recibiremos un email como el que se muestra la imagen siguiente:

Formulario con Bootstrap 4 y PHPEmail recibido

 

 

ENJOY!


Raúl Prieto Fernández

Sitio Web: raulprietofernandez.net

Si quieres ir rápido, ve solo. Si quieres llegar lejos, ve acompañado.

Comentarios  

omar arturo corona
# omar arturo corona 23-06-2020 03:03
Ya hice todo pero no me envia el correo ni me manda el mensaje de que el correo se envio
Responder
Raúl Prieto Fernández
# Raúl Prieto Fernández 23-06-2020 18:00
Hola omar:

¿Puedes subir los ficheros a algún sitio para así poder revisarlo yo?

Saludos
Responder
antoniom_d
+1 # antoniom_d 04-09-2020 20:50
Funciona perfectamente. gracias. Me surge una duda.
En cualquiera de los campos al rellenar el dato con un acento, el mail que recibes te lo devuelve con condigo extraño. habria alguna forma de solucionarlo?¿
Y por ultimo, se le podria añadir un campo para poder adjuntar un archivo al formulario? gracias.
Responder
Raúl Prieto Fernández
# Raúl Prieto Fernández 05-09-2020 12:07
Hola antoniom_d:

Para los caracteres especiales me imagino que haya que añadir en el head de la página el charset a utilizar, por ejemplo:

< meta charset=UTF-8 >


Para adjuntar ficheros, en mi ejemplo no lo tengo contemplado pero si que lo he he utilizado alguna vez. Dale un vistazo a este tutorial: https://www.codexworld.com/send-email-with-attachment-php/ y deberás hacer uso en Bootstrap del File Browser para seleccionar el archivo a subir: https://getbootstrap.com/docs/4.0/components/forms/#file-browser

Saludos
Responder
Antoniom_d
+1 # Antoniom_d 10-09-2020 22:05
Gracias Raúl.
Pruebo y te digo.
Abrazo
Responder
Raúl Prieto Fernández
# Raúl Prieto Fernández 14-09-2020 17:33
Hola:

Perfecto Antoniom_d.

Un saludo
Responder
omar bravo
# omar bravo 22-09-2020 19:18
Buenas tardes, sigo el tutorial pero al precionar el boton enviar me salta el siguiente error, espero pueda ayudarme por favor.
Parse error: syntax error, unexpected 'if' (T_IF) in /home1/click241/zioninmobiliaria.pe/test/includes/ formulario-reclamos.php on line 8

Saludos.
Responder
Raúl Prieto Fernández
# Raúl Prieto Fernández 23-09-2020 21:00
Hola omar bravo:

Con esa poca información poco puedo hacer. ¿Puedes colgar en algún lado el fichero para echarle un vistado?

Saludos
Responder
omar bravo
# omar bravo 22-09-2020 19:19
Buenas tardes, sigo el tutorial pero me encuentro con el siguiente error, espero pueda ayudarme, saludos.
Parse error: syntax error, unexpected 'if' (T_IF) in /home1/click241/zioninmobiliaria.pe/test/includes/ formulario-reclamos.php on line 8
Responder

Escribir un comentario

Código de seguridad
Refescar