Formulario HTML, ¿como hacer que envie un mail?

Namaris #1 Abr '15

Alguien entiende que le falla a este formulario HTML para que envie el mensaje al correo asignado?

Cuando le doy a enviar me dice que esta enviado pero luego no recibo nada en mi bandeja, soy un poco noob con el HTML, es un codigo que estoy editando de una plantilla.

<form id="contact-form">

  <div class="success"> Consulta Enviada! <strong>Pronto nos pondremos en contacto con usted, gracias.</strong> </div>
  <fieldset>
    <div class="coll-1">
      <div>
        <div class="form-txt">su nombre:</div>
        <label class="name">
          <input type="text">
          <span class="error">*Esto no es un nombre valido.</span> <span class="empty">*Campo Requerido.</span> </label>
        <div class="clear"></div>
      </div>
      <div>
        <div class="form-txt">telefono:</div>
        <label class="phone">
          <input type="tel">
          <span class="error">*Telefono no valido.</span> <span class="empty">*Campo Requerido.</span> </label>
        <div class="clear"></div>
      </div>
      <div>
        <div class="form-txt">Email:</div>
        <label class="email">
          <input type="email">
          <span class="error">*E-mail no valido.</span> <span class="empty">*Campo Requerido.</span> </label>
        <div class="clear"></div>
      </div>
    </div>
    <div class="coll-2">
      <div>
        <div class="form-txt">mensaje:</div>
        <label class="message">
          <textarea></textarea>
          <span class="error">*Mensaje demasiado corto.</span> <span class="empty">*Campo Requerido.</span> </label>
        <div class="clear"></div>
      </div>
    </div>
    <div class="clear"></div>
    <div class="btns"> <a class="btn" data-type="reset">limpiar</a> <a class="btn" data-type="submit" method="post" action="mailto:[email protected]">enviar</a> </div>
  </fieldset>
</form>

KoRMuZ #2 Abr '15

Un correo no se envía con HTML solo. Tienes que hacerle una parte "trasera" que funciona en el servidor, que es el que gestiona todo el tema de enviar el email.

El "mailto:[email protected]" es para que salte el programa que tengas por defecto.

Si no me equivoco, vamos.

1 respuesta

B

[Borrado] #3 Abr '15

http://php.net/manual/es/function.mail.php

Namaris #4 Abr '15

Es decir que solo HTML es imposible para enviar el mail? tengo que usar PHP por cojones?

Joer es que todavia estoy con el tutorial aprendiendo HTML...CSS y PHP todavia no he llegado

banerplayer #5 Abr '15

#1 Como bien dice #2 la forma correcta es crear un script en el lado del servidor que gestione el envio del mail.

Pero si no me equivoco, para que funcione como lo tienes hecho tu (que se abra la aplicación por defecto de correo) seria poniendo esto

method="post" action="mailto:[email protected]"

que lo tienes en una etiqueta "a" en la etiqueta de apertura de "form".

Si me equivoco que alguien me corrija.

1 respuesta

Namaris #6 Abr '15

#5 ENtonces lo he hecho mal, no quiero que se abra el cliente de correo del usuario sino que se envie todo dsd el mismo servidor, para eso esta el formulario...

Tendre que mirar lo del PHP entonces me temo

A

Alpinador #7 Jun '15

la parte trasera como dice algun "experto" (XD) se llama formalmente CGI (common gateway interface) y suele residir con forma de programa interpretado en el servidor de hosting en el subdirectorio CGI-BIN del hosting

Lo que buscas es un Form Email Responder o algo similar

puedes encontrarlo aqui....http://www.cgi-resources.com/

(el POST" es un comando que envia lo que tengas en el formulario al programa CGI que lo recibe y lo procesa y te devuelve algo, una pagina de GRACIAS POR TU ENVIO o lo que sea....pero no tienes que poner mailto:[email protected] sino el script en perl o lo que sea que vaya a recibir los datos en el servidor)

yo te recomiendo el script en lenguaje PERL porque es muy sencillito de subir por FTP y lo haces en 2 minutos.....eso si, no olvides leerte el README de instalacion

un saludo

PD.- Creo que al invocar con POST al script del lado del servidor, tienes que tener en cuenta en que subdirectorio te encuentras y referenciar en la llamada la ruta relativa o absoluta del directorio CGI-BIN .....vamos resumiendo, para que al mandar el formulario ENCUENTRE el script y pueda ejecutarlo

en concreto esta linea:

<a class="btn" data-type="submit" method="post" action="mailto:[email protected]">enviar</a>

quedaria algo asi como

<a class="btn" data-type="submit" method="post" action="http://www.tuservidor.com/cgi-bin/mail_responder.pl">enviar</a>

1 respuesta

L

laurota #8 Jun '15

Una cosilla aparte de que neceistas PHP para enviar mails. Tambien debes utilizar un servidor que permita enviar mails. Estoy es importante ya que puedes tener el código perfecto pero igual no te llegan por esta razón.

1 respuesta

Namaris #9 Jun '15

#7 #8 El servidor es un host privado. La version de PHP esta al día y la funcion y el servicio de mail() funciona perfectamente, lo he testeado a parte.

He reconstruido el codigo para hacerlo sencillo pero el problema viene a ser ahora el boton submit que cuando le haces click no reacciona, lo posteo (solo el <form> para no vomitar aqui mil lineas de codigo) por si alguien da con la solucion porque llevo dias ya...

<form id="contact-form" method="post" action="mail.php">
      <fieldset>
        <div class="coll-1">

        <!-- CAMPO NOMBRE DEL FORMULARIO -->
      <div>
        <div class="form-txt">su nombre:</div>
          <input type="text" name="name">
      </div>
        <!------------------------------>

      <div>
        <div class="form-txt">telefono:</div>
          <input type="tel" name="phone">
      </div>


      <div>
        <div class="form-txt">Email:</div>
        <label class="email">
          <input type="email" name="email">

      </div>
    </div>

    <div class="coll-2">
      <div>
        <div class="form-txt">mensaje:</div>
        <label class="message">
          <textarea name="coments"> </textarea>
              <a class="btn" type="submit" name="submit">Send</a>
      </div>
    </div>

  </fieldset>
</form>

Yo pienso que el problema esta en:

<a class="btn" type="submit" name="submit">Send</a>

, pero no se donde...

2 respuestas

KarlosWins #10 Jun '15

.

2 respuestas

L

laurota #11 Jun '15

#9

<a class="btn" type="submit" name="submit">Send</a>

Esto esta mal...

Lo que te ha comentado #10 es la forma correcta. Todos los elementos de tu formulado son inputs si no los declaras no funcionarán como tales.

1 respuesta

Namaris #12 Jun '15

#10 #11 Ya lo se, y haciendo eso funciona, pero cuando cambio el elemento <a> por <input> no se crea el boton que el css tiene definido en la clase btn

He cambiado el <a> por el <input> para que se vea lo que intento explicar: http://restaurantcanpages.es/contacto2.php

2 respuestas

lebroN #13 Jun '15 Cofrade

#12 pues simplemente ve copiando cachitos del css del <a> y ponlos en el input:button no?

Con esto se debería ver más o menos bien:

display: inline-block;
  color: #fff;
  padding: 8px 16px;
  background: #063;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px #c5c2a9;
  -moz-box-shadow: 0 1px 2px #c5c2a9;
  -webkit-box-shadow: 0 1px 2px #c5c2a9;
  width: 94px;
  cursor: pointer;
  margin-top: 20px;

L

laurota #14 Jun '15

#12 Tendrías que hacer en css lo siguietne:

input.submit{
width: auto !Important;
background: #f5f5f5;
color: #000;
border-color: #c8c8c8;
padding: 5px;
margin-top: 0.5em;
}

De todas formas te aconsejo que estudies primero los temas para poder desarrollar tus páginas web que es bastante fácil y así ganas soltura y te será más rápido y sencillo encontrar por ti mismo las soluciones.

2 respuestas

jalamoNNN #15 Jun '15

#14 querrás decir input.btn o input[type=submit]

1 respuesta

Namaris #16 Jun '15

#14 #15 No funciona ni uno y otro, los he copiado en style.css como habeis dicho, el boton en si debería de quedar algo parecido a esto: http://restaurantcanpages.com/menu.html (como los cuadros verdes de "Vinos" que agrupan como blanco, negro, rosado...)

Asi esta ahora mismo:
http://pastebin.com/26A152bB

Y tambien he probado en ponerle un "." antes del input

1 respuesta

TeNSHi #17 Jun '15

#16 Si inspeccionas el elemento con el inspector del navegador veras que:

#contact-form input, #contact-form textarea

Están "sobrescribiendo" a .btn, para empezar podrías añadir #contact-form input.btn en el selector .btn y ademas también se le aplica esto:

#contact-form input{
height: 24px;
}

Por lo que deberías poner:

#contact-form input.btn{
height: initial;
}

Curiosidad, cuanto estas cobrando por esto?

1 respuesta

Namaris #18 Jun '15

#17 Entonces como se supone que quedaria? Asi?:

#contact-form
.input.btn{
height: initial
width: auto !Important;
background: #f5f5f5;
color: #000;
border-color: #c8c8c8;
padding: 5px;
margin-top: 0.5em;
}

No estoy cobrando nada, estoy aprendiendo con tutoriales de html, css, php y esta web se la estoy haciendo a un amigo para poder poner en practica el aprendizaje.

2 respuestas

L

laurota #19 Jun '15

#18 Eso esta mal.

vamos a ver, tienes que aprender la diferencia entre un div y una clase.

input.submit

Con eso en css le estas diciendo que a los elementos input que sean submit le hagas el css que tu quieras. Si no te funciona quiere decir que en tu página html no esta bien declarado tu el elemento submit ( el boton de envio).

1 respuesta

TeNSHi #20 Jun '15

#18 No, yo lo que haría es

#contact-form input.btn, .btn {

AQUI EL CSS ORIGINAL DE .btn

}

Y después

#contact-form input.btn{
height: initial;
}

Igualmente yo me leería algún libro como CSS: The Missing Manual, mas que nada porque no entiendes como funciona CSS y dando palos de ciego no vas a aprender mucho o vas a tardar un montón.

1 respuesta

Namaris #21 Jun '15

Una duda que tengo que no encuentro la respuesta es:

Cuando veo utilizar una clase css para alguna etiqueta html:

1. ¿Como saber a cual de los archivos css esta haciendo referencia si hubiera más de un .css en la web?
2. Y si la clase o id esta repetida en varios archivos con diferentes declaraciones?

P.D: Hago esta pregunta dado que estoy practicando sobre un template.

#20 #19 Entiendo lo que quereis decir, y de hecho estoy con tutoriales de CSS, lo que ocurre que no he avanzado lo suficiente como para resolver esto por ahora, aun asi algo entiendo....

1 respuesta

Namaris #22 Jun '15

Dejo aqui todo el codigo de la pagina de:

Contacto.php: http://pastebin.com/EG2GGavP
Style.css: http://pastebin.com/7r31zfqg

Mewtwo #23 Jun '15

#21 depende de como los coloques , ten en cuenta que en html es importante el orden en el que declaras los css prevaleciendo siempre el ultimo que hayas puesto.

Formulario HTML, ¿como hacer que envie un mail?

Usuarios habituales

Tags