Formulario de contacto con Bootstrap en php

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.

 

Comenzamos:

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

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

Explicación:

<Form>

Esto es el contenido dentro de la etiqueta &lt;form&gt; , 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.

Variable adicionales para el envío del mail.

 

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.

Para validar el correo electrónico…

Verificación del código antispam.

Para que se muestre la respuesta de verificación debes insertar…

debajo de cada nombre.

 

No te olvides de insertar el código…

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

 

Código de envío php:

Verificación de errores.

Si no existen errores se enviara con:

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.

 

Resultado y descarga:

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

 

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

Funciona perfectamente.

Formulario de contacto con Bootstrap en php
4.7 (93.33%) 3 Votos

Share on FacebookTweet about this on TwitterShare on Google+Digg thisPin on PinterestShare on LinkedInPrint this pageEmail this to someone VOTA Y COMPARTE

Agregar comentario

*

Suscribete

Suscribete a nuestro newsletter y mantente informado con nuestros últimos artículos, noticias y más. Todo completamente gratis.

Tu suscripción a sido realizada con éxito.