1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Formulario de contacto

Tema en 'Tutoriales de HTML y CSS' comenzado por kenbrown, 30 de Enero de 2015.

  1. kenbrown

    kenbrown Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    28
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    Hola hoy les iba a mostrar el código de un formulario aquí el código del send.php

    PHP:

    <?
    $nombre= $_POST['nombre'];
    $email = $_POST['email'];
    $comentario = $_POST['comentario'] ;
    $titulo= "Mensaje Sw";
    $telefono=$_POST['telefono'];

    $headers = "MIME-Version: 1.0 \r\n";  
    $headers .= "Content-type: text/html; charset=iso-8859-1 \r\n";
    $headers .= "From: $email \r\n";  
    $headers .= "X-Priority: 1 \r\n";
    $headers .= "X-MSMail-Priority: High \r\n";  


    $mensaje .= "Nombre : ";
    $mensaje .= $nombre;
    $mensaje .="<br>";
    $mensaje .= "Télefono : ";
    $mensaje .= $telefono;
    $mensaje .="<br>";
    $mensaje .= "Mensaje : ";
    $mensaje .= $comentario;








    $target= "E-Mail";
    if (mail($target,$titulo,$mensaje,$headers,$telefono)){
    #echo "Mensaje enviado correctamente";
    header('Location:ok.htm');
    }
    else{
    #echo "fallo";
    header('Location:error.htm');
    }
    ?>
     

    Precisamos también un index.html que este es el codigo

    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Mensaje</title>
    <link rel="stylesheet" href="estilos.css">


    </head>
    <body>
    <center>
      <form action="send.php" method="post" name="form1">

      <tr>
      <td height="35" colspan="3" align="center"><h1>Deja Tu Mensaje</h1></td>
      </tr>
      <br>
      <tr>
      <td width="124" height="33" align="right"><p>Nombre :</p></td>
      <td colspan="2"><input name="nombre" id="nombre" type="name" required="required"></td>
      <br>
      </tr>
      <tr>
      <td height="37" align="right"><p>E-Mail :</p></td>
      <td colspan="2"><input name="email" id="email" type="email" required="required"></td>
      </tr><br>
      <tr>
      <td height="37" align="right"><p>Teléfono:</p></td>
      <td colspan="2"><input name="telefoo" id="telefono" type="text" required="required"></td>
      </tr><br>
      <tr>
      <td height="109" align="right" valign="top"><p>Mensaje :</p></td>
      <td colspan="2" valign="top"><textarea name="comentario" id="textarea" rows="5" cols="40" required="required"
     ></textarea></td>
      </tr><br>
      <button> Enviar Mensaje </button>

      </form>
      </center>
    </body>
    </html>
     


    Y bueno la decoración es opcional pero yo les dejo aquí una

    Código (Text):

    form{

      background:#F0F8FF;
      width:910px;
      border: 3px solid #4e4d4d;
      border-radius:3px;
      -moz- border-radius:3px;
      -webkit-border-radius:3px;
      box-shadow: inset 0 0 10px #000;
      margin: 10px auto;
    }

    form h1{
    text-align: center;
    color:  #003153;
    font-weight:normal;
    font-size: 40pt;
    margin: 30px 0px;
    font-family: 'Pinyon Script', cursive;
    }

    form h2{
    text-align: center;
    color: #fff;
    font-weight:normal;
    font-size: 25pt;
    margin: 30px 0px;
    }
    form p{

      text-align:center;
      color:#000;
      font-family: "Pinyon Script", cursive;
      font-size: 18pt;
      border-radius:2px;

    }
    form button{
      width: 135px;
      margin:20px 0px 30px 30px;
      height:50px;
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top, #1e5799 0%, #3c3c3c 0%, #2a2828 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(0%,#3c3c3c), color-stop(100%,#2a2828)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%,#3c3c3c 0%,#2a2828 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%,#3c3c3c 0%,#2a2828 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #1e5799 0%,#3c3c3c 0%,#2a2828 100%); /* IE10+ */
    background: linear-gradient(to bottom, #1e5799 0%,#3c3c3c 0%,#2a2828 100%); /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#2a2828',GradientType=0 ); /* IE6-9 */
    border:1px solid #232323;
    color: #fff;
    box-shadow: 0px 2px 0px #000;
    -moz-box-shadow: 0px 2px 0px #000;
    -webkit-box-shadow: 0px 2px 0px #000;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    }

    form button:hover{
    background: #3a3a3a;

    }
    form button:active{

      background: #2a2828; /* Old browsers */
    background: -moz-linear-gradient(top, #2a2828 0%, #3c3c3c 100%, #1e5799 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a2828), color-stop(100%,#3c3c3c), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #2a2828 0%,#3c3c3c 100%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #2a2828 0%,#3c3c3c 100%,#1e5799 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #2a2828 0%,#3c3c3c 100%,#1e5799 100%); /* IE10+ */
    background: linear-gradient(to bottom, #2a2828 0%,#3c3c3c 100%,#1e5799 100%); /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#2a2828', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
    }
    form input{
      width:280;
      height: 35px;
      padding: 0px 10px;
      margin: 10px 30px;
      color: #6d6d6d;
      text-align: center;
      border: 1px solid #4e4d4d;
      border-radius:3px;
      -moz- border-radius:3px;
      -webkit-border-radius:3px;
      box-shadow: inset 0 0 10px #000;
      margin: 10px auto;
    }
    form textarea{

      padding: 0px 10px;
      margin: 10px 30px;
      color: #6d6d6d;
      text-align: center;
      border: 1px solid #4e4d4d;
      border-radius:3px;
      -moz- border-radius:3px;
      -webkit-border-radius:3px;
      box-shadow: inset 0 0 10px #000;
      margin: 10px auto;
    }
     
    así que tenemos 3 archivos : index.html - send.php - estilos.css y nesesitamos hacer 2 archivos mas el ok.htm y error.htm que eso se los dejo a ustedes
    Bueno eso fue todo y así les quedaría el formulario



    Captura de pantalla de 2015-01-30 18:30:41.png
     
    Última modificación: 31 de Enero de 2015
    A santos le gusta esto.
  2. Briaares

    Briaares Nuevo Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    26
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    y dondé vinculas el formulario? o que nombre tiene el archivo PHP?
     
  3. Briaares

    Briaares Nuevo Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    26
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Todo bien, solo que el mensaje no se envia.
     
  4. kenbrown

    kenbrown Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    28
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    El archivo php le pones send.php el html le pones el nombre que quieras pero .html y el css estilos.css y tienes que poner el destino que va que esta en la linea 15 espero que te sirva ;)
     
  5. Briaares

    Briaares Nuevo Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    26
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    En destino pongo mi correo? porque lo hago y cuando le doy enviar mensaje sucede esto: me redirige a el archivo send.php y me muestra esto: "; $mensaje .= $comentario; $target= "diegogonzalezhernandez1@gmail.com"; if (mail($target,$titulo,$mensaje,$headers)){ echo "Mensaje enviado correctamente"; header('Location:eek:k.html'); } else{ echo "fallo"; header('Location:error.html'); } ?> alomejor hay un error de sintáxis, no se, aqui te dejo el código por si las dudas.
    PHP:

    <?php  
    $nombre= $_POST['nombre'];
    $email = $_POST['email'];
    $comentario = $_POST['comentario'];
    $titulo= "Mensaje web";
    $headers = "MIME-Version: 1.0 \r\n";
    $headers .= "Content-type: text/html; charset=iso-8859-1 \r\n";
    $headers .= "From: $email \r\n";
    $headers .= "X-Priority: 1 \r\n";
    $headers .= "X-MSMail-Priority: High \r\n";
    $mensaje = "Nombre : ";
    $mensaje .= $nombre;
    $mensaje .="<br>";
    $mensaje .= $comentario;
    $target= "diegogonzalezhernandez1@gmail.com";
    if (mail($target,$titulo,$mensaje,$headers)){
    echo "Mensaje enviado correctamente";
    header('Location:ok.html');
    }
    else{
    echo "fallo";
    header('Location:error.html');
    }
    ?>
     
     
    Última modificación: 31 de Enero de 2015
  6. kenbrown

    kenbrown Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    28
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    Tienes el archivo ok.html y error.html ? tal ves es por eso ;)
     
  7. Briaares

    Briaares Nuevo Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    26
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Si lo tengo, pero a lo que me refiero es que no llega a el correo el mensaje. Púes según yo, el mensaje debería de llegar a dicho correo escrito "diegogonzalezhernandez1@gmail.com" y no lo hace.
     
  8. agusti

    agusti
    Moderador

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    260
    Me gusta recibidos:
    106
    Puntos de trofeos:
    43
    Género:
    Hombre
    @Briaares podrías incluir el código junto con el planteamiento del problema en un nuevo tema? Dado que este tema inicia con "Tutorial" se puede prestar para confusiones.
    Saludos!
     
  9. kenbrown

    kenbrown Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    28
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    Copia el nueo codigo ya lo edite es el wque estoy usando y me funciona ;)
     
  10. kenbrown

    kenbrown Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    28
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    toma este codigo

    Código (Text):
    <?
    $nombre= $_POST['nombre'];
    $email = $_POST['email'];
    $comentario = $_POST['comentario'] ;
    $titulo= "Mensaje Sw";
    $telefono=$_POST['telefono'];
    $headers = "MIME-Version: 1.0 \r\n";
    $headers .= "Content-type: text/html; charset=iso-8859-1 \r\n";
    $headers .= "From: $email \r\n";
    $headers .= "X-Priority: 1 \r\n";
    $headers .= "X-MSMail-Priority: High \r\n";
    $mensaje .= "Nombre : ";
    $mensaje .= $nombre;
    $mensaje .="<br>";
    $mensaje .= "Télefono : ";
    $mensaje .= $telefono;
    $mensaje .="<br>";
    $mensaje .= "Mensaje : ";
    $mensaje .= $comentario;
    $target="Tu email";
    if (mail($target,$titulo,$mensaje,$headers,$telefono)){
    #echo "Mensaje enviado correctamente";
    header('Location: ok.htm');
    }
    else{
    #echo "fallo";
    header('Location:error.htm');
    }
    ?>
     
    Última modificación por un moderador: 3 de Febrero de 2015
  11. Briaares

    Briaares Nuevo Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    26
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    @kenbrown ya para finalizar xD ya vi lo que sucede, tu tienes algo instalado en la sección headers:

    Código (Text):
    $headers = "MIME-Version: 1.0 \r\n";
    $headers .= "Content-type: text/html; charset=iso-8859-1 \r\n";
    $headers .= "From: $email \r\n";
    $headers .= "X-Priority: 1 \r\n";
    $headers .= "X-MSMail-Priority: High \r\n";
    y eso instalado es lo que no compartiste xD imagino yo, por eso si te funciona a ti, porque tu si lo tienes instalado. Si me equivoco no se que sea, revisa si tienes algo en la sección headers, porque no lo pusiste arriba, y si lo tienes compartelo ya de paso xD. Gracias!
     
    Última modificación por un moderador: 3 de Febrero de 2015
  12. kenbrown

    kenbrown Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    28
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    No el código te tendría que funcionar así fijate bien pasame una captura del error
     
  13. kenbrown

    kenbrown Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    28
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    en el #echo "Mensaje enviado correctamente"; y el #echo "fallo"; pon el # al principio
     
  14. Briaares

    Briaares Nuevo Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    26
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    @kenbrown no hay error xD el único problema es que no se envia a el correo. pero fíjate que tienes un plugin o no sé que sea, en la parte que dice:
    $headers = "MIME-Version: 1.0 \r\n";
    seguro que eso no es un plugin o algo que se instala al código?
    PD: ya hie lo de el "#".
     
  15. kenbrown

    kenbrown Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    28
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    Que yo sepa no fijatesi esta bien escrito el correo
     
  16. Nikooo14

    Nikooo14 Nuevo Miembro

    Se incorporó:
    8 de Enero de 2015
    Mensajes:
    3
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    lo estas probando en un hosting o en tu pc?
     
    A kenbrown le gusta esto.
  17. juanmagtt

    juanmagtt Nuevo Miembro

    Se incorporó:
    17 de Febrero de 2015
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    hola muchachos soy nuevo en eso de la programacion perdonen la por la pregunta pero donde ubico este codigo
    <?
    $nombre= $_POST['nombre'];
    $email = $_POST['email'];
    $comentario = $_POST['comentario'] ;
    $titulo= "Mensaje Sw";
    $telefono=$_POST['telefono'];
    $headers = "MIME-Version: 1.0 \r\n";
    $headers .= "Content-type: text/html; charset=iso-8859-1 \r\n";
    $headers .= "From: $email \r\n";
    $headers .= "X-Priority: 1 \r\n";
    $headers .= "X-MSMail-Priority: High \r\n";
    $mensaje .= "Nombre : ";
    $mensaje .= $nombre;
    $mensaje .="<br>";
    $mensaje .= "Télefono : ";
    $mensaje .= $telefono;
    $mensaje .="<br>";
    $mensaje .= "Mensaje : ";
    $mensaje .= $comentario;
    $target="Tu email";
    if (mail($target,$titulo,$mensaje,$headers,$telefono)){
    #echo "Mensaje enviado correctamente";
    header('Location: ok.htm');
    }
    else{
    #echo "fallo";
    header('Location:error.htm');
    }
    ?>
     
  18. juanmagtt

    juanmagtt Nuevo Miembro

    Se incorporó:
    17 de Febrero de 2015
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    alcance aver que digieron en la linea 15
     
  19. kenbrown

    kenbrown Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    28
    Me gusta recibidos:
    3
    Puntos de trofeos:
    3
    Género:
    Hombre
    Lo poner en un archivo llamado send.php que lo tienes que crear Y PARA QUE FINCIONE LO TIENES QUESUBIR A UN DOMINIO
     
  20. Resiliencia

    Resiliencia Miembro

    Se incorporó:
    19 de Marzo de 2015
    Mensajes:
    36
    Me gusta recibidos:
    1
    Puntos de trofeos:
    8
    Género:
    Hombre
    Ocupación:
    Diseñador Gráfico.
    Localización:
    Colombia
    Amigo, el problema que yo tengo es que cuando le doy en enviar, se queda cargando y me sale el fallo.html estoy en hostinger gratuito hasta donde tengo entendido tiene php
     

Comparte esta página