En esta serie de tutoriales vamos a ver como crear desde cero un formulario de contacto básico con PHP.
Para el PHP habrá que tener algún tipo de hosting que nos permita enviar e-mails (me consta que 000webhost lo permite). Aunque lo primero es tener el HTML necesario, que es un formulario cualquiera. Usaré tres campos: Nombre, e-mail y mensaje, que serán obligatorios.

El resultado final será algo así:

formulario con PHP y Javascript

Si te interesa aprender cómo hacerlo, te recomiendo que leas esto. Si no, siempre puedes esperar a que acabe, y ponga un link de descarga a los archivos finales.

Nota: tened en cuenta que usaremos varios atributos propios de HTML5 (aunque haremos que funcione en navegadores antiguos )

Para hacer todo crearemos una carpeta con estos archivos (por ahora):

  • index.html, donde tendremos nuestro formulario.
  • Una carpeta llamada css, donde guardaremos style.css, el archivo para editar la apariencia del formulario, y reset.css, el famoso reset de Eric Meyer (suelo preferir usar normalize.css, pero no merece la pena incluirlo sin editar para un proyecto pequeño).
  • Una carpeta llamada js, donde guardaremos:
    • modernizr.js, una versión de modernizr que comprueba los tipos de elementos HTML5 de los formularios. Podéis descargarla desde aquí
    • script.js, donde pondremos el código necesario para enviar el formulario con los datos necesarios, y comprobar los campos necesarios.
  • post.php, donde enviaremos los datos.

Toda la serie:

2 pensamientos en “Creando un formulario de contacto con PHP y Javascript [1]: El proyecto

  1. Imagen de AndresbaaAndresbaa el dijo:

    Buenos días.

    Estoy intentando insertar un checkbox en el formulario que, además sea obligatorio.

    He insertado el input en sí y funciona, pero no soy capaz de hacerlo obligatorio.

    Es cuestión del checkbox, porque sí he conseguido insertar otro campo para el teléfono y hacerlo obligatorio con el mensaje de salida en caso de no rellenarse el campo.

    Creo que el problema podría estar en esta parte de script.js:

    function getValue(element) {
    switch(element.nodeName.toLowerCase()){
    case ‘input’:
    return element.getAttribute(‘type’).toLowerCase() === “file” ? element.files[0] : element.value;
    // No hace falta break; (se ha acabado la funcion)
    case ‘select’:
    return element.options[element.selectedIndex].value;
    case ‘textarea’:
    default:
    return element.value;
    }
    }

    No consigo dar con la forma de insertar el checkbox aquí.

    Espero y agradecería algún comentario.

    Gracias.
    Andrés.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.