Formulario HTML + PHP para novatos.

Valga remarcar que hay mil formas de crear hoy en día un formulario web en HTML que, posteriormente, se enviará a nuestro correo mediante varias opciones (php, cgi, java, “mailto”)….

 

PHP? ¿qué es eso?

Como a mi (y creo que a muchos) se me/nos resiste el “mailto”, voy a reenviaros a las páginas con las que he conseguido hacer funcionar mi formulario, mediante HTML y un sencillo script PHP.

Como primer paso, crearemos nuestro formulario en HTML, que no es complicado. Con cualquier programa WYSIWYG lo hareis rápidamente.

Finalmente, nos quedará un bonito código HTML con el formulario en cuestión, mediante un código obtenido con Dreamweaver que no sabemos hasta que punto es ortodoxo, pero que funciona.

<!--Título-->
<p><H2>Mi formulario HTML</H2></p>
<!--Formulario-->
<FORM id="contacto" name="contacto" action="enviar.php" method="POST">
<p>
<label>Nombre <input name="nombre" type="text" id="nombre"
 size="42"/></label>
</p>
<p>
<label>Empresa
<input name="empresa" type="text" id="empresa" size="31"/></label></p>
<p><label>E-mail <input name="mail" type="text" id="mail" size="43"/>
</label>
</p>
<p><label>Mensaje<br>
<textarea name="mensaje" cols="40" rows="8" id="mensaje">
</textarea></label>
</p>
<p><input type="submit" name="Submit" value="Enviar"/></p>
</FORM>

Como podemos observar, en un bonito color, el código hace una llamada al archivo ‘enviar.php’, que será el encargado de mandar a la dirección que queramos los datos que se introduzcan en el formulario. Para que este procedimiento funcione, lógicamente, nuestro alojamiento web deberá permitir el uso de PHP. Si quereis uno gratuito para practicar o enlazar (no sabemos que tal funciona bajo mucha demanda), 000webhost o ueuo os proveen de hostings gratuitos que permiten PHP.

Segundo:

El archivo ‘enviar.php’ será un script que hemos obtenido del primer tutorial citado. Lo que debemos hacer es crear el script php con el programa de diseño WEB que más rabia nos de. En él copiaremos el script y tendremos casi todo hecho. Si entendemos bien el código, podremos usarlo y adaptarlo siempre que queramos.

De hecho, un servidor escribe esta entrada para cuando tenga que hacer el próximo, no tener que rebuscar en los “favoritos” para encontrarlo…..

El script enviar.php es el siguiente:

<?php
$nombre = $_POST['nombre'];
$mail = $_POST['mail'];
$empresa = $_POST['empresa'];

$header = 'From: ' . $mail . " \r\n";
$header .= "X-Mailer: PHP/" . phpversion() . " \r\n";
$header .= "Mime-Version: 1.0 \r\n";
$header .= "Content-Type: text/plain";

$mensaje = "Este mensaje fue enviado por " . $nombre . ",
 de la empresa " . $empresa . " \r\n";
$mensaje .= "Su e-mail es: " . $mail . " \r\n";
$mensaje .= "Mensaje: " . $_POST['mensaje'] . " \r\n";
$mensaje .= "Enviado el " . date('d/m/Y', time());

$para = 'ejemplo@mail.com';
$asunto = 'Asunto del mail recibido';

mail($para, $asunto, utf8_decode($mensaje), $header);

echo 'Mensaje enviado correctamente';
?>

En éste enlace teneis el script detalladamente explicado. Yo os resumiré lo más importante:

  • Las tres primeras líneas establecen las variables que vendrán del formulario HTML, serán tratadas en el archivo php y llegarán al mail que recibamos.
  • En el bloque de líneas “header”, ‘enviar.php’ creará la información que nos llegará acerca del remitente del formulario.
  • Las líneas “mensaje” redactarán el correo que recibamos en el buzón que hemos escrito en la línea ‘para’ y con el ‘asunto’ indicado.
  • La penúltima línea “mail” será la encargada de enviarnos el mail con toda la información que os he resumido.
  • Finalmente, “echo” se encarga de que el usuario reciba un mensaje al haberse procesado correctamente su solicitud.

pform os permite crear bonitos formularios online

Finalmente, recordaros que necesitais tener un hosting que permita php, copiar y guardar correctamente el código del script (incluyendo las indicaciones de que es PHP el lenguaje escrito mediante “<?php” y “?>”).

No es un procedimiento nada difícil, pero tampoco es el único: teneis desde servidores de formmail gratuitos hasta páginas que os crean el formulario y un javascript….  Dejemos esas cosas para los profesionales, a nosotros nos ha funcionado esta, quien sepa otras es libre de instruirnos. 😉

Como fuente de conocimientos, le debemos esto a Jorge Oyhenard y sus tutoriales en tallerwebmaster.com.

Si quereis más información del tema, os recomiendo el tutorial completo sobre formularios anteriormente citado y el blog de Nelly Natalí, que ha tratado el tema múltiples veces.

Acerca de Gaius Baltar

Aficionado a la tecnología informática desde que un MSX pasó por casa y apasionado defensor del Software Libre como religión para unir a los pueblos. Es Gaius Baltar al fin y al cabo, y tiene derecho a equivocarse. Cuando se aburre, redacta y gestiona los contenidos en diversos blogs subculturales. Ver todas las entradas de Gaius Baltar

54 responses to “Formulario HTML + PHP para novatos.

  • turyesdios

    que si burbujas el html es un lenguaje de programacion.

    • Emmanuel

      Disculpa, pero Html no es ningún lenguaje de programacion. HTML no es mas que un formato universal para publicar contenido por medio de la WWW. Un lenguaje de programacion es PHP, C, C#, JAVA, VISUALBASIC, etc,, Te lo dice un desarrollador de software para aplicaciones de escritorio o dispositivos moviles que maneja los anteriores lenguajes de programacion.

  • Gentzane

    Excelente tutorial!!! Muchísimas gracias a todos…! Tengu una única pregunta, cómo podría obtener también la hora en que envían el formulario?! Obtengo la fecha pero me gustaría conseguir también la hora… Es sólo un capricho…

    MUCHÍSIMAS GRACIAS NUEVAMENTE!!!

  • turyesdios

    Por si a alguien le interesa el jotfom es una pagina de creaccion de formularios para añadir a tu pagina web que creo que te da todo lo que necesitas incluido envio de archivo a traves del formulario que es un tema escabroso al montar uno de estos formularios se soluciona facil y sencillo con este creador de formularios online para embeber (piripipi) después. http://spanish.jotform.com

  • miguel

    hola no tengo ni idea de programacion pero tengo una pagina me ayudo un colega y ya no lo tengo con migo y no termino la web mi pregunta es.
    como en mi formulario que tiene estos requisitos , nombre, apellidos, telf, dos select desplegables con la provincia y el servicio a realizar, campo de descripcion, carpcha y boton.

    lo que quiero es que cuando en los 2 desplegables se elija en cada uno lo que se quiere y al mandar el envio del formulario les envie el correo a las empresas que tengo en mi bd y ademas esas empresas aprezcan su logo y nombre de empresa diciendo se les a enviado a estas empresas su peticion. gracias de antemano al que me ayude.

    espero que se me entienda bien.

  • quico

    una ayuda por favor.
    me funciona el formulario pero luego al enviar no se borra lo que se ha escrito,como se borra automaticamente despues de enviar?

    gracias

  • Miguel

    La información que se añade en el campo “pass” del formulario despues se verá en el email sin circulos? o se envia con circulos negros?

  • Humberto Barrera (@consultormkting)

    Hola que tal, realmente soy aficionado de la programacion, modifico codigos y cosas asi, para paginas personales. Mi problema es que quiero hacer funcionar un formulario con el siguiente codigo y, por lo que veo es java script (creo) me podrias sacar de dudas y ayudar a hacerlo funcioanr? Gracias 🙂

    Nombre:
    E-mail:
    Tu Mensaje:
    Enviar
    Cancelar

  • Humberto Barrera (@consultormkting)

    Opps creo que no se pego el codigo.. pero lo podras ver en el codigo fuente de la siguiente direccion: http://www.humbertobarrera.com/final Gracias y ojala puedan ayudarme,

  • Hithgil

    Gracias!! es muy útil y además está contado de una forma especial :]

  • Victor Saez

    Por aclararme, pregunto: en un programa como DW, por ejemplo, escribo el código php y obtengo un documento con terminación .php que envío al servidor, a la carpeta www, pero sin meter el ese documento en carpera alguna. Por ejemplo, estaría junto a donde está index.html.- Y aparte, en la página web iría el html del formulario, inserto en el codigo fuente de la propia página. ¿es así?

    Ah.. y muchisimas gracias por estas explicaciones y por este trabajo divulgativo.

  • mauricio

    hola buena muy bueno el scrip , tengo una pregunta como hago para que al momento de presionar el boton enviar limpie los campos y me redirija a la pagina inicio

    • anonimo y malito

      se me ocurre que podrias poner un onclick para el formulario en vez de submit, y en el submit ponerle la accion goto… le das la url de la pagina de inicio y listo.

      • fabian

        buenas, yo quiero que haga lo mismo, pero no hay caso, no me funciona como tu me lo planteaste, podrias mandarme un ejemplo por mail?

  • Claudia

    Hola, después de buscar varios códigos finalmente éste me funcionó, la única pregunta es: Cuando llegan los correos a mi buzón en el “de” me aparece NoBody, es normal? o hay alguna forma de ponerle algun nombre.

    Saludos y Mil gracias!!!!!!

  • Victor Saez

    Claudia, desde hace tiempo estoy peleando con este formulario que no onsigo que funcione. ¿Me puedes decir EXACTAMENTE qué has hecho? ¿Donde lo has colocado en el servidor? ¿Qué pasos has dado? Te lo agradecería mucho, ya me estoy desesperando! jeje..Gracias.
    Mi correo es: vsaez@ya.com

  • jose

    Muchas gracias, despues de buscar dos semanas, por fin encontré la solución.

  • mar

    Muchas Muchas Muchas Muchas Gracias

  • luis

    Les dejo mi código para formulario quiero saber como generar el php

    <!–
    today = new Date()
    if(today.getMinutes() =6) && (today.getHours() =10) && (today.getHours() =12) && (today.getHours() =20) && (today.getHours() =0) && (today.getHours() =4) && (today.getHours()

    var txt=” [ ELECTRONICA.S.A ] – UN NUEVO MUNDO EN TECNOLOGIA”;
    var espera=100;
    var refresco=null;
    function rotulo_title() {
    document.title=txt;
    txt=txt.substring(1,txt.length)+txt.charAt(0);
    refresco=setTimeout(“rotulo_title()”,espera);}
    rotulo_title();

    var mydate=new Date()
    var year=mydate.getYear()
    if (year < 1000)
    year+=1900
    var day=mydate.getDay()
    var month=mydate.getMonth()
    var daym=mydate.getDate()
    if (daym<10)
    daym="0"+daym
    var dayarray=new Array("Domingo,","Lunes,","Martes,","Mi&eacutercoles,","Jueves,","Viernes,","S&aacutebado,")
    var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
    document.write("”+dayarray[day]+” “+daym+” de “+montharray[month]+” de “+year+””)

    <!–
    body{background-image:url(fondo.jpg);background-color:#666665;}

    FORMULARIO DE VISITAS

    Nombre:

    Apellido:

    Direccion E-mail:

    Como llegaste hasta esta pagina:

    Tus comentatios:

    me ha gustado mucho

    no me ha gustado

    no esta mal

    Volver a la pagina anterior

  • Abby

    Gracias, la explicación y el código muy bien maquetados! El mejor que encontré! Alguien sabe algo del Captcha, supongo es html y php también?

  • Lucas Silva S.

    Aqui funcionou perfeitamente, realmente ficou muito bom, obrigado.
    Não é SPAM, apenas estou mostrando uma nova ferramenta que talvez vocês possam usar para divulgar algo ou agregar um grupo com as mesmas idéias.
    Embora ninguém possa voltar atrás e fazer um novo começo, qualquer um pode começar agora e fazer algo diferente para um novo fim.

    http://www.phaco.com.br/painel

  • Anónimo

    muy bueno!!! muchas gracias por tu ayuda!!!

  • Agata

    ¿es un formulario de contacto o de comentarios?

  • arancha

    Buenos dias,
    Estoy haciendo mi primera pagina web y tengo un problema con el formulario.

    He creado contacto.html y enviar.php tal cual indicais y al ejecutar mi pagina contacto.html el ordenador me manda guatdar un archivo enviar.php pero no envia el formulario a mi correo. Me han dicho q es pq no tng php en mi pc pero como compruebo q funciona antes de publicarlo

  • walterchava

    BUenas Noches tenia un ejemoplo muy similar sin embargo al querer acomodar las cajas de texto en una table para que se vera bien y acomodado, resulta que ahora no me envia la info.

    alguna idea

  • Anónimo

    para que no salga el echo si no vuelva a cargar la pagina en el inicio????
    gracias

  • David

    Buen artículo, me sirvió para orientarme y el script si funciona. Gracias!!

  • Estantaya Nega Nebulous

    muchas gracias aqui esta mi trabajo: mc.zurvive.com.ar

  • gonzo

    Una consulta, el form funciona perfectamente, pero deseo que al final, el ECHO ‘su mensaje se envio correctamente’; sea en un campo del mismo formulario. Cualquiera de ellos. como se hace?

  • Iván

    Para ello el submit del formulario debe de hacer referencia al mismo fichero del formulario (action). puedes utilizar la condición isset($_POST[‘nombre’]) para saber si es la primera vez que accedes al formulario o por el contrario se han enviado los datos. Luego tan solo tienes que imprimir el mensaje donde más te guste (En el caso de una caja de texto, puedes usar el valor value=’).

    En la dirección http://www.suformulario.com puedes configurar facilmente formularios de contacto y reserva y ponerlos en tu web (De esta forma te evitas muchas dificultades y dispones de una pantallas de consultay gestión).

    Un saludo.

  • Txemary

    Gracias por este post, se me estaba atragantando esta mierda, que mira uqe es fácil! pero nada, ha sido cortar pegar y funcionó, eres un crak!

  • Francisco

    Muchas gracias por tu ayuda, me ha funcionado perfectamente.
    Estoy empezando mi propia página de mi nueva empresa.
    Voy a colocar ahora el “me gusta” del facebook.
    Admito consejos.
    Un saludo

  • fabian

    Consulta a todos, yo quiero que este formulario envie el mail (que lo hace perfecto), muestre un mensage emergente de confirmacion y vuelva a la misma pagina (del formulario) pero con los campos vacios.
    Alguien tiene algun codigo como ese?
    Gracias

    • Iván

      Hola Fabian:

      Has probado a usar un formulario de contacto o reserva de http://www.suformulario.com si se adapta a tus necesidades? tan solo tendrás que agregar un iframe como contenedor de tu formulario. Cuando das de alta un formulario en esta página te enseñan el codigo fuente que tienes que insertar en tu web.

      En cuanto al código necesario para que tu propio formulario, es tan sencillo como añadir un botón (o enlace) a la par que el mensaje que reidreccione de nuevo al formulario. Como por ejempo<input type="button" onclick="javascript:window.location=htmltuformulario.hmtl" ……. o también <a href="htmltuformulario.html" ….. para volver a cargar de nuevo el formulario.

      Si la llamada a enviar.php es mediante ajax o cualquier otro sistema asíncrono, es suficiente con hacer document. ormulario.reset.

      Un saludo.

  • Julian_DC

    Mil gracias me funciono perfecto

  • Florencia

    si quisiera enviar el form a mas de un mail.. deberia agregarlo asi?
    $para = ‘ejemplo@mail.com’; ‘ejemplo2@mail.com’; ‘ejemplo3@mail.com’;

  • mike

    hola pues ya lo hice y cuando lo pruebo con un buscador me descarga el php eso es normal? por no tener hosting?

  • Anónimo

    HOLA! anda perfectamente…solo que cuando dice el mail fue enviado correctamente…éste mensaje queda en una hoja en blanco..xq no sale en el mismo cuadro del formulario??? dentro de la hoja de contacto…como puedo hacer para que eso suceda?

  • Gentz

    Va perfectamente pero: Por qué no sale el mensaje de confirmación dentro de la misma página del formulario? Cómo hacer esto y también que al enviarlo se limpien los datos del formulario automáticamente?

    • Iván

      Hola Gentz:

      Para resetear el formulario solo tiene que ejecutar la función reset del formulario (Ejemplo: form.reset()).

      Para sacar el mensaje de confirmación en la misma página en la que se ha enviado el formulario, puedes cambiar la forma de enviar los datos (haciendo uso de submit del propio formulario). Si no quieres hacer submit en el propio formulario y estás invocando a otra página puedes usar los atributos parent de javascript para comunicar el envío del formulario con la página original. De forma que en la página de envío sería algo parecido a:

      if (isMensajeEnviadoOK)
      {
      parent.mostrarMensaje();
      parent.form.reset(); //para borrar los datos del formulario.
      }

      Donde mostrarMensaje() será una función javascript de la página padre o inicial. Esta función puede ser algo similar a esto:

      function mostrarMensaje()
      {
      alert(“Su mensaje se ha enviado correctamente”);
      }

      Espero que te sirva de ayuda. De cualquier forma te invito a pasarte por http://www.suformulario.com para que compruebes si los formularios que puedes configurar se adaptan a tus necesidades.

      Un saludo.

  • Eduardo Vera

    yo soy nuevo en Html y PHP.

    Mi duda es como hago un correo en un host como phpmyadmin .

    Estoy estancando en la parte del formulario de contacto de mi pagina alguien que me ayudo POR FAVOR.

  • Rosemberg Lozano (Solodetalles)

    Buen dia encontre este formulario en html pero me dicen que es obsoleto que recomiendan uno en php mira el link que me recomiendas el php o el html gracas http://piemse.com/como-crear-un-formulario-de-contacto-html/

    • Gaius Baltar

      Hombre, a día de hoy ya es habitual que casi todos sean o plugins de formulario para WordPress, Joomla y similares, incluso un formulario de Google Docs y listo.

  • jose

    Mi me sale enviado el mensaje correctamente —- pero verifico que halla llegado y no llega nada porfa ayudenme mi correo es jose.pizarrol95@gmail.com

  • Aylen

    Hola! cuando le doy a enviar se dirige al php correctamente y me dice que se envio, pero cuando entro a mi casilla de correo no veo ningun mensaje nuevo. En “para” le puse mi mail para probar.. que estoy haciendo mal?

  • Frank

    , sale el mensaje de confirmacion en mi pagina, pero no llega ami correo, ni gmail , ni hotmail, agradecería las ayudas

    • Gaius Baltar

      Es probable que tu servidor no deje enviar correos desde una cuenta no existente (campo from del email)

  • Nelida Soto

    Muchas gracias, es el único código que me sirvió, de varios que habia probado. Mil gracias.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: