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


  • Alejandro J. ALdama Rubio said:

    para crear esta (subcarpeta en el web root), necesito contar con un servicio de hosting ?

    on June 28, 2012, 7:24 p.m.

    Alexis Hevia said:

    Sí necesitas un hosting. Si no tienes uno, te recomiendo que visites este reto: https://p2pu.org/en/groups/preparate-para-construir-una-pagina-dinamica/

    on June 29, 2012, 9:45 a.m. in reply to Alejandro J. ALdama Rubio

  • Johel Batista said:

    Tambien si estan usando HTML, deben poner al momento de crear en el formulario un campo de email y esto les puede servir para validar el email sin la necesidad de usar javascript, todo con HTML5:

    <!DOCTYPE HTML>

<form method="post" action="enviar.php">

<input type="email">

<input type="submit">

</form>

</html>

    on Jan. 31, 2012, 1:33 p.m.