13. Crea un formulario de contacto con PHP

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Task Navigation 

Adiciona un formulario de contacto


Para añadir un formulario vamos a utilizar el tag de HTML <form> y para definir los campos del formulario el tag <input>. Para el tipo de formulario que vamos a crear probablemente también vas a querer utilizar el tag <textarea> para adicionar un área de texto.

Un formulario que te pide tu nombre y apellido se puede escribir así:

<html>
<body>

   <form action="" method="get">
     <p>Nombre: <input type="text" name="varNombre" /></p>
     <p>Apellido: <input type="text" name="varApellido" /></p>
     <input type="submit" value="Enviar" />
   </form>

 </body>
</html>


Analicemos los atributos del tag <form>:

  • action: aquí colocas la dirección a la cual le vamos a enviar los datos que capturaste con el formulario. Si está en blanco envía los datos a la página que contiene el formulario, en otras palabras no cambia de página. Cuando tengamos otra página podremos apreciar como funciona.
  • method: esto indica el método que utilizará el browser para enviar la data. Puede ser "get" o "post". Más adelante veremos cual es la diferencia.


En el tag <input> tenemos:

  • type: indica que tipo de elemento es. Utilizamos "text" para campos de captura de texto. Utilizamos "submit" cuando queremos adicionar un botón que al presionar envía la data que se encuentra en los "text" a la dirección que le diste al "action" de tu <form>.
  • name: el nombre asociado a la data capturada. Se podría decir que la información se envía en forma de variables. En nuestro ejemplo, el nombre de la persona se enviaría en la variable "varNombre".

 

Para completar la tarea:

  1. Crea una nueva subcarpeta en el web root (ej. htdocs) de tu servidor web llamada formularioContacto.
  2. Dentro de formularioContacto crea una archivo PHP llamado formulario.php
  3. Adiciona al formulario campos para: Nombre de la persona, Email y Mensaje que quiera enviar. Para el mensaje probablemente vas a querer utilizar un <textarea>.
    • Recordemos que la idea de este formulario de contacto es que un visitante de la página pueda enviarle un mensaje al administrador de la página.
  4. Deja el action como "" y el method como "get".
  5. Para los nombres de variables:
    • nombre de la persona = varNombre
    • email = varEmail
    • mensaje = varMensaje
  6. Prueba que tu formulario esté funcionando correctamente.
    1. Entra a la dirección localhost/formularioContacto/formulario.php y llena tu formulario con información y envíala.
    2. Si todo funciona correctamente notarás que la información se muestra en el URL de tu página. Tu formulario debería quedar así.

 

Te recomendamos:

Task Discussion