Formulario que no funciona

pilar0 · 25 Oct 2010, 13:46 · Solicitar retirada

Hola, he montado mi página sobre una plantilla en la que ya venía un formulario. He conseguido enlazarlo con mi e-mail pero no que envíe lo que se escribe en la misma página, te vuelve a hacer escribir todo ¿que debería de hacer?

La página del formulario es esta:
http://www.xn--miscompaerosdeviaje-23b.com/contactaconnosotros.html?#

Y el código:

										<br style="line-height:26px"> 
										[img]images/px2_1.gif[/img]

										<br style="line-height:25px">
										[img]images/title5_2.gif[/img]

										<div style="margin-left:30px">
											<br style="line-height:12px">
											Env&iacute;anos un e-mail para comentar o aportar lo que des&eacute;es.

											<br style="line-height:9px">
											<form action="" enctype="multipart/form-data" id="form">
											<table  cellspacing="0" cellpadding="0" class="form">
											  <tr>
												<td  style="width:198px; height:128px">
													<table  cellspacing="0" cellpadding="0">
													  <tr>
														<td  style="width:198px; height:27px"><input name="" type="text" value="Nombre:"></td>
													  </tr>
													   <tr>
														<td  style="width:198px; height:27px"><input name="" type="text" value="Apellidos/nick:"></td>
													  </tr>
													   <tr>
														<td  style="width:198px; height:27px"><input name="" type="text" value="Tel&eacute;fono:"></td>
													  </tr>
													   <tr>
														<td  style="width:198px; height:27px"><input name="" type="text" value="e-mail"></td>
													  </tr>
													</table>
												</td>
												<td  style="width:202px; height:128px">
													<table  cellspacing="0" cellpadding="0">
													  <tr>
														<td  style="width:202px; height:109px"><textarea name="" cols="0" rows="0">mensaje:</textarea></td>
													  </tr>
													  <tr>
														<td  style="width:202px; height:19px">
														<br style="line-height:1px">
														[img]images/spacer.gif[/img][b][url="#"]Limpiar[/url][/b]

</p>[b][email="[correo eliminado]"]Enviar[/email][/b]														</td>
													  </tr>
													</table>
												</td>
											  </tr>
											</table>
											</form>
										</div>

un saludo y gracias.

pilar0 · 26 Oct 2010, 22:02 · Solicitar retirada

po favor , seguro que sabéis como se hace, he esperrdo un par de dias antes de volver a postear pero la verdad es que estoy un poco "quemada" con esto.

manmanu · 30 Oct 2010, 21:40 · Solicitar retirada

Hola,
tal y como tienes tu código cuando das a enviar lo que hace es abrir el gestor de correo de la persona que hace clic.
Y en este caso, no es necesario tu formulario, basta con poner un enlace a tu email.

Este tipo de formulario es algo diferente.

Para hacer un formulario en donde el usuario envíe sus datos y comentarios, debes plantearlo de otra manera.

Para hacer un formuilario sencillo de contacto, debes crear un archivo para que procese los datos e información enviada desde tu formulario.
No se si me entiendes, o y si ya lo solucionaste.

manmanu

pilar0 · 30 Oct 2010, 22:33 · Solicitar retirada

Pues no te entiendo, verás mis pocos conocimientos de html vienen de esta página , el resultado fue una web que era un clon de la vuestra y por eso me decidí por esa plantilla, me gusta como queda pero no tengo ni idea de como crear o enlazar lo que tu me dices.

A lo mejor es mejor quitarlo porque me va a quitar mucho espacio ¿ o no?
Como ves soy muy torpe.

manmanu · 30 Oct 2010, 23:12 · Solicitar retirada

Hola,
no te preocupes....
Así hemos empzado tod@s, y esto no es mio.

Yo solo me limito a hecharte una mano en lo que pueda.
Y de momento he de decirte que hay sitios en internet en donde puedes descargarte un formulario de conatcto.
En donde ellos te envian los datos del contacto a tu email en modo de datos.

Pero he de prevenirte que la información por lo general la procesan ellos, no es privado... supongo que esto si lo entiendes.
Aunque muchos dicen que que más da, otro no entran por hay.
A mí no me gusta.

Bueno he leido que el formulario ya s encontraba, pero puedo ayudarte a que la información que envían por medio de tu formulario se te envie a tu correo sin aplicaciones extenas como tu gestor de correo.

Para ello te aconsejo crear;
un archivo para procesar la información que te envien y llege a tu email limpiamente.
Un archivo por lo menos para que valide un solo campo por lo menos.
Y por último el archivo que genera el OK, mensaje enviado.

Mira tipo a este formulario, sin javascript, con php.
Un formulario muy básico, sin captcha pero funcional.

http://www.internavegacion.com/prueba-formulario-1-Dreamweaver/inde…

Bueno, igual te puede valer.
Con los campos que tienes en este momento en tu formulario.

manmanu

pilar0 · 31 Oct 2010, 11:36 · Solicitar retirada

manmanu, me parece muy bien la sugerencia pero no se crear esos archivos, si sabes de algún sitio donde lo pueda leer y me lo expliquen así facilito te lo agradecería.

gracias

manmanu · 31 Oct 2010, 13:22 · Solicitar retirada

Hola,
este sitio que te escribo aquí es una de esas web de internet muy intuitiva en la que puedes hacer un formulario gratuito.
http://www.jotform.com/

Pero como he dicho antes, y si no han cambiado las cosas, los contactos que tengas mediante su formulario será visible para ellos, creo que debes saberlo lo cuál para una parte de la gente no nos gusta, yo me incluyo.

Luego el formaulario que te mostre, lo puedes hacer tu misma, siguiendo unos consejos que puedo decirte.
Pero con un poco de paciencia, no necesitas saber de programación php, solo crear archivos, cambiar la extensión a los archivos y saber utilizar el servicio FTP de tu hosting, nada más.

Tu decides.

manmanu

pilar0 · 31 Oct 2010, 14:28 · Solicitar retirada

Sigo tus consejos, sin duda, pero ten en cuenta que me lo vas a tener que explicar como para tontos.

manmanu · 31 Oct 2010, 21:31 · Solicitar retirada

Hola, no te preocupes pues creo que me vas a seguir y entender.

Puedes hacer primero antes de seguir, te pongo el código que tu formulario con algunos cambios.
Este es el código que vas a utilizar, solo que en esta prueba vamos a corregir algunas cosas que en el que tienes actualmente, está un poco desordenado.
He hecho algunos cambios en el formulario que el resultado te debe quedar ordenado como te muestro en la imagen.

[contenido no disponible]

Antes de nada, haz una copia o guarda el archivo "contactaconnosotros.html".
Quiero que hagas una comprobación, pues antes de seguir en este primer paso debes intentar dejarlo como está en la imagen.
Para ello, copia este codigo y sustituyyelo por el que tienes ahora desde la etiqueta <form> hasta el final </form>, incluidas estas.

Una vez hecho lo que te pido, y si efectivamente lo ves como en la imagen que te muestro, vuelve a dejarlo como lo tenias antes y este paso ya lo podemos dejar como finalizado.
Has conseguido ponerlo ordenado pues luego lo vas a utilizar.

El código a cambiar del formulario;

<form action="" method="post" id="form">
<table  cellspacing="0" cellpadding="0" class="form">
<tr>
<td  style="width:198px; height:128px">
<table  cellspacing="0" cellpadding="0">
<tr>
<td  style="width:198px; height:27px"><input name="nombre" type="text" value="Nombre:"></td>
</tr>
<tr>
<td  style="width:198px; height:27px"><input name="apellidos" type="text" value="Apellidos:"></td>
</tr>
<tr>
<td  style="width:198px; height:27px"><input name="telefono" type="text" value="Tel&eacute;fono:"></td>
</tr>
<tr>
<td  style="width:198px; height:27px"><input name="mail" type="text" value="e-mail:"></td>
</tr>
</table>
</td>
<td  style="width:202px; height:128px">
<table cellspacing="0" cellpadding="0">
<tr>
<td  style="width:202px; height:109px;"><textarea name="" cols="1" rows="1">Mensaje:</textarea></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input style="cursor:pointer" type="submit" name="enviar" id="enviar" value="Enviar">
</td>
<td>
<input style="cursor:pointer" type="reset" name="Restablecer" id="Restablecer" value="Restablecer">
</td>
</tr>
</table>
</form>

Fijate aquí debajo como se inicia el nuevo código que te he escrito.

<form action="" method="post" id="form">

Este cambia respecto al que tu tienes, en que vamos a procesar los datos de tu formulario con el metodo POST, y lo va a procesar el código php que vamos a escribir dentro de un archivo que podemos llamarle, por ejemplo, "envio_formulario.php".

Pues luego lo dejaremos así;

<form action="envio_formulario.php" method="post" id="form">

Esto quiere decir que cuando un usuario hace cilc en enviar el formulario, automáticamente llamamos al archivo "envio_formulario.php" y este procesará los datos.

Luego, he de decirte que en tu esilo css en;

.form textarea {
	width:191px;
	height:102px;
	font-family:verdana;
	font-size:9px;
	color:#7F7F7F;


	overflow:hidden;


	padding:2 0 0 6px;
	border-color:#D5D5D5;
	border-style:solid;
	border-width:1px;
	background-color:#F8F8F8
}

Esta propiedad y valor css, overflow:hidden;
hace que tu textarea, en donde se escribe el mensaje, no tenga Scroll.
Quiero decir que si alguien se extiende en su comentario no verá el scroll vertical, para subir arriba y bajar a releer su comentario sin complicaciones.
Deberias considerar esa opción, es incomodo no tener a mano el escroll para ver el comentario sin complicarse.
Como en la imagen de debajo.

[contenido no disponible]

Bueno haz tu comprobación, dime si lograste ver más ordenado el formulario y seguimos.

manmanu

pilar0 · 31 Oct 2010, 23:27 · Solicitar retirada

Si,se vio perfecto y lo volví a dejar como estaba.

manmanu · 1 Nov 2010, 16:50 · Solicitar retirada

Hola,
bien me parece perfecto.
Pero olvide preguntarte...

Mira la imagen.
No se si te interesa válidar aunque sea solo un campo, pero recuerda que este formulario no autentica tu email, solo que no permite el campo del e mail vacio.

En caso afirmativo hay que crear un archivo de error para cuando no se cumple el requisito, es sencillo.

[contenido no disponible]

Si decides que sí, cambia el form que te puse arriba por este otro, y haz otra vez la comprobación y mira si lo ves como en la imagen.

Nuevo cambio validar campor e mail;

<form action="" method="post" id="form">
											<table  cellspacing="0" cellpadding="0" class="form">
											  <tr>
												<td  style="width:198px; height:128px">
													<table  cellspacing="0" cellpadding="0">
													  <tr>
														<td  style="width:198px; height:27px"><input name="nombre" type="text" value="Nombre:"></td>
													  </tr>

													   <tr>
														<td  style="width:198px; height:27px"><input name="apellidos" type="text" value="Apellidos:"></td>
													  </tr>
													   <tr>
														<td  style="width:198px; height:27px"><input name="telefono" type="text" value="Tel&eacute;fono:"></td>
													  </tr>
													   <tr>
														<td  style="width:198px; height:27px"><input name="mail" type="text" value="e-mail:*"></td>
													  </tr>

													</table>
												</td>
												<td  style="width:202px; height:128px">
													<table cellspacing="0" cellpadding="0">
													  <tr>
														<td  style="width:202px; height:109px;"><textarea name="" cols="1" rows="1">Mensaje:</textarea></td>
													  </tr>
                                                      </table>
                                                     </td>
                                                     </tr>
                                                   <tr>
                                                   <td >
                                                   <p style="margin:-20px 0 10px 0;">* Campo obligatorio</p>
                                                   </td>
                                                   </tr>
                                                   <tr>
                                                 <td>
                                                   <input style="cursor:pointer" type="submit" name="enviar" id="enviar" value="Enviar">
                                                </td>
                                                 <td>
                                                   <input style="cursor:pointer" type="reset" name="Restablecer" id="Restablecer" value="Restablecer">
                                                   </td>
                                                 </tr>
                                               </table>
													</form>

Ya queda menos.

manmanu

pilar0 · 1 Nov 2010, 18:11 · Solicitar retirada

Ya está colocado, y me gusta bastante por cierto, lo que si me gustaría es tener scroll como tu indicabas.

manmanu · 1 Nov 2010, 19:07 · Solicitar retirada

Hola me alegra que te guste y se vea bien.

Recuerda que mientras no terminemos con esto, tu email si lo dejas como está ahora, no está operativo, si alguien quiere contactar contigo no se si tienes otro enlace mail.

Bueno, sobre el scroll del textarea, como te dije en el post anterior;

En tu código CSS tienes;

form textarea {
width:191px;
height:102px;
font-family:verdana;
font-size:9px;
color:#7F7F7F;

overflow:hidden;

padding:2 0 0 6px;
border-color:#D5D5D5;
border-style:solid;
border-width:1px;
background-color:#
}

Elimina lo que está en negrita de la class textarea, esto dice que se quede oculto.

Luego para seguir, debes tener dos cuentas e mail,
una desde la que se envía tu formualrio, y otra la que recibe.

me sigues...???

manmanu

pilar0 · 1 Nov 2010, 21:10 · Solicitar retirada

Ahora quito lo de la hoja de estilos.

Tengo varias cuentas, de hecho hay una a nombre de la página, lo que no me gustaría es que se viera la mía personal en ningún sitio.

manmanu · 1 Nov 2010, 22:31 · Solicitar retirada

Hola,
no te preocupes que no se van a ver ninguno de los dos, esa es una de las cosas buenas de php, el código no está accesible a cualquiera.

Bien, dices que tienes una cuenta de la página, perfecto.
De todas las maneras funciona incluso con cuentas Gmail.

Bueno perodona la lentitud, estoy un poco liado y de vez en cuando entro en CCTW, pero terminaremos pronto, debo de prepararte el código.

Ahoa hasta que te ponga los códigos, necesitarás tres archivos, 1 php, y dos html por que estos dos últimos seguro que te resulta más familiar.

1- envio_formulario.php
1- envio_correcto.html
1- error_envio.html

Estos archivos de error, y correcto te pondre el código de los que te puse, te valdrán y no son feos.

Entre hoy (un poco más tarde) y mañana intentaré terminar este tema, perdona la demora.

manmanu

PD.Como pequeños consejos;
el <br style="line-height:14px">
que tienes debajo de los botones de enviar y restablecer, esteticamente creo que te pueden sobrar...
No se si piensas lo mismo.

Luego la frase;
Envíanos un e-mail para comentar o aportar lo que desées.
Está muy bien, pero una sugerencia....

Envíanos tú comentario, te contestaremos en breve.
Por ejemplo, creo que envíanos un email te sobrará.
Nadie debe saber que se envía un email, solo que se envia un fromaulrio de contacto, en la forma que lo recibas, es más bien algo personalizado.
Esto no es más que una sugerencia, desde luego.....

pilar0 · 2 Nov 2010, 00:29 · Solicitar retirada

No me había dado cuenta antes pero al quitar el párrafo de la hoja de estilos se ha dejado de ver lo del Campo obligatório.

No tengas prisa manmanu, demasiado estás haciendo, además de momento mi página no tiene apenas visitas, con lo cual ni siquiera creo que lo haya probado nadie.

Ya están creados los archivos y hasta mañana por la noche no podré volver a hacer nada.

¿Te he dicho alguna vez gracias por todas las molestias que te estás tomando?

Gracias.

manmanu · 2 Nov 2010, 02:09 · Solicitar retirada

Hola,
bueno no tienes nada de que agradecer, no me cuesta nada y me deja bien ayudarte.
Si me costaría dinero hacerlo, posiblemente lo hubiera pensado.
Tú aprovechate, nada más, y si te sirve mejor que mejor.

Bueno, quiero que mires el código de estos archivos, si te gustan los pegas en tus archivos.
Todos los que vas a crear dejalos en el mismo directorio que el archivo;
contactaconnosotros.html

_____________________________________________

Para el interior de envio_correcto.html ;
Este archivo avisa cuando el envío del formulario se envía correctamente.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Env&iacute;o deL formulario correctamente</title>
<style type="text/css">
body{
   background-color:#F3F3F3;
   font:normal .8em Arial, Helvetica, sans-serif;
}
#aviso{
   margin:120px auto 0 auto;
   width:480px;
   height:auto;
   background-color:#FFF;
   border:#999 solid 1px;
   padding:20px;
   -moz-border-radius: .8em;
   -webkit-border-radius: .8em;
   color:#444;
}
</style>
</head>

<body>
<div id="aviso">
<p  align="center">Gracias, tus datos se han enviado correctamente ...  
[url="http://www.xn--miscompaerosdeviaje-23b.com/contactaconnosotros.html"]Volver atr&aacute;s ...[/url]</p>
</div>

</body>
</html>

Para el interior de error_envio.html ;
Este avisa del campo vacio.......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Errores en el env&iacute;o del formulario</title>
<style type="text/css">
body{
   background-color:#F3F3F3;
   font:normal .8em Arial, Helvetica, sans-serif;
}
#aviso{
   margin:120px auto 0 auto;
   width:480px;
   height:auto;
   background-color:#FFF;
   border:#999 solid 1px;
   padding:20px;
   -moz-border-radius: .8em;
   -webkit-border-radius: .8em;
   color:#444;
}
</style>
</head>

<body>
<div id="aviso">
<p align="center">Disculpa, pero debes incluir t&uacute; E mail ...  
[url="http://www.xn--miscompaerosdeviaje-23b.com/contactaconnosotros.html"]Volver atr&aacute;s ...[/url]</p>
</div>

</body>
</html>

Bueno, añadelos dentro de los archivos y mira si te quedan bien....
Mañana terminamos el archivo que queda, y a ver si te va bien.

manmanu

manmanu · 2 Nov 2010, 11:14 · Solicitar retirada

Hola de nuevo,
vaya olvide decirte que podemos hacer en vez de estos avisos, hacer los avisos dentro de hojas similares a la de contactaconnosotros.html.

Espero que entiendas lo que digo.
La hoja de OK...!! envio, similar a la de contactaconnosotros.html, añadiendo dentro del formulario por ejemplo, un aviso de que a sido Ok, el envío.

Dime que te parece la idea.

manmanu

PD. luego intentaré poner el código php, debo probarlo con los campos que tu tienes ahora, y no lo he hecho todavía.

pilar0 · 2 Nov 2010, 14:34 · Solicitar retirada

manmanu, como tu veas que es mejor, a mi la idéa me parece muy bien.

manmanu · 2 Nov 2010, 22:15 · Solicitar retirada

Hola pilar0,
te he preparado unos cambios, creo que te pueden gustar.
Mira las imágenes, se supone que están bien hay colocados los avisos.

Para ello, debes crear dos archivos al igual que antes.
Estos son clonados de contactaconnosotros.html, pero con algunos cambios.

Error envio;

[contenido no disponible]

Envio correcto;

[contenido no disponible]

Bueno amiga, tú decides.
Lo podriamos intentar.

Jejejeje, ahora queda aún menos para terminar.
manmanu

pilar0 · 2 Nov 2010, 22:37 · Solicitar retirada

Me encantan, que nivel, me tienes asombrada.

manmanu · 3 Nov 2010, 00:09 · Solicitar retirada

Hola pilar0,
me alegra que te gusten, pues los he creado para que te queden bien.

Bueno, vamos a intentar avanzar, haz dos copias de contactaconnosotros.html y llamalos;
1-envio_correcto.html
1-error_envio.html

Ahora añade esto justo despues de </form>, primero en
envio_correcto.html;

<p style="border:#090 dotted 1px;padding:10px; background-color:#F2FAED;font:normal 1.3em  'Trebuchet MS', Arial, Helvetica, sans-serif;color:#090; width:87%;margin:10px 0 -61px 0;">Gracias, t&uacute; comentario se a enviado correctamente...</p>

Luego en error_envio.html;

<p style="border:#F00 dotted 1px;padding:8px 10px; background-color:#FFF5FF;font:normal 1.3em 'Trebuchet MS', Arial, Helvetica, sans-serif; color:#F00;width:87%;margin:10px 0 -61px 0;"><strong style="font-size:16px;">*[/b] Disculpa, pero debes incluir t&uacute; e-mail..</p>

Luego, una sugerencia por que pienso que te molesta un poco esta linea-imagen;

búsca...

</form>
</div>
[contenido no disponible]

Elimina la imagen que te escibo en rojo, búsca esa linea de código.

Abrelos y mira si te quedan bien.
Suerte.

manmanu

pilar0 · 3 Nov 2010, 09:34 · Solicitar retirada

Esta tarde ¿ vale?

pilar0 · 3 Nov 2010, 20:01 · Solicitar retirada

manmanu, quedan perfectos.

Lo único es que se sigue sin ver lo de *Campo obligatorio, en tu imágen si, pero en mi página no.

manmanu · 3 Nov 2010, 20:47 · Solicitar retirada

Hola pilar,
efectivamente no se ve, por estas navegando con Internet explorer, y yo no.
De momento con lo demás navegadores se ve normal.

A ver si en un ratito descubro por qué, ahora no recuerdo si está en un parrafo.
Hasta ahora.

Igual luego dispongo de algo más de tiempo, y dejo tu archivo preparado.

manmanu