Lightbox crear un formulario web
Necesito ayuda quiero crear un formulario para mi web y he escuchado de lightbox que superpones objetos quiero aprender hacerlo pero para formularios para enviar correo.
1 respuesta
Respuesta de Ernesto Medina
1
1
Ernesto Medina, Lo mejor siempre está por venir.
Reitero con cambios porque no leí bien tu pregunta
En ese link tienes detallado como usarlo. Aquí te dejo de donde bajar los archivos para usarlo:
Descargar lightbox
Explicación que ya he dado aquí para usar el Lightbox (síguela solo la primera parte, donde instalas el lightbox)
http://www.todoexpertos.com/categorias/tecnologia-e-internet/desarrollo-de-sitios-web/respuestas/2553616/como-instaler-lightbox-en-mi-web
Ahora, para lo que quieres hacer
En un DIV colocas tu formulario. A ese div, en linea, le pones un id="form" y style="display:none;". Esto ultimo te oculta ese div en tu página. Ejemplo:
<div id="form" style="display:none;">
<form>
</form>
</div>
Luego, donde quieres que este el link (en texto o imagen) que abra el form, colocas
<a href="#TB_inline?height=385&width=480&background=#000&inlineId=form" rel="sexylightbox" title="Detenidos desaparecidos">FORM</a>
En este ultimo solo debes modificar el height y width al tamaño que desees la ventana, y donde dice "FORM" poner el texto que quieras que sea el link que abra el lightbox. Si quisieras usar una imagen, en vez del texto usas el tag <img> con la imagen que deseas y listo!
Ten en cuenta que en esta ultima linea de codigo que pegue, donde dice "...;background=#000&inlineId=form", este ultimo "form" DEBE SER EL MISMO QUE EL ID QUE LE DISTE AL DIV, ya que es asi como se comunican
Espero te sirva. Si necesitas algo más regresa sin problemas!
Saludos!
Ernesto
messiha.com.ar
En ese link tienes detallado como usarlo. Aquí te dejo de donde bajar los archivos para usarlo:
Descargar lightbox
Explicación que ya he dado aquí para usar el Lightbox (síguela solo la primera parte, donde instalas el lightbox)
http://www.todoexpertos.com/categorias/tecnologia-e-internet/desarrollo-de-sitios-web/respuestas/2553616/como-instaler-lightbox-en-mi-web
Ahora, para lo que quieres hacer
En un DIV colocas tu formulario. A ese div, en linea, le pones un id="form" y style="display:none;". Esto ultimo te oculta ese div en tu página. Ejemplo:
<div id="form" style="display:none;">
<form>
</form>
</div>
Luego, donde quieres que este el link (en texto o imagen) que abra el form, colocas
<a href="#TB_inline?height=385&width=480&background=#000&inlineId=form" rel="sexylightbox" title="Detenidos desaparecidos">FORM</a>
En este ultimo solo debes modificar el height y width al tamaño que desees la ventana, y donde dice "FORM" poner el texto que quieras que sea el link que abra el lightbox. Si quisieras usar una imagen, en vez del texto usas el tag <img> con la imagen que deseas y listo!
Ten en cuenta que en esta ultima linea de codigo que pegue, donde dice "...;background=#000&inlineId=form", este ultimo "form" DEBE SER EL MISMO QUE EL ID QUE LE DISTE AL DIV, ya que es asi como se comunican
Espero te sirva. Si necesitas algo más regresa sin problemas!
Saludos!
Ernesto
messiha.com.ar
Amigo gracias por responderme pero no me sale lo intente como me dijiste pero nada no se si puedes hacerlo tu. Dime una cosa se puede hacer con jquery por favor me lo puede hacer tu y explicármelo es que es algo nuevo para mi.
De antemano muchas gracias.
Atte. R. Chuman
De antemano muchas gracias.
Atte. R. Chuman
Aquí lo he probado y me anduvo... te prepare un ejemplo andando para que lo copies!
Descarga ejemplo!
Checkalo, aquí anda perfecto. Ten en cuenta de copiar lo del HEAD que te indico en el mismo HTML y de copiar todos los archivos y la carpeta sexyimages en el directorio raíz junto con tus HTML.
Con jQuery se puede hacer, pero no soy experto en ese lenguaje. Los programadores con quienes trabajo están muy ocupados como para consultarles, pero se que si buscas en google "formulario mail lightbox en jquery" o similar encontraras mil ejemplos para hacerlo con ese lenguaje. Esto que te paso yo es mucho más sencillo, menos avanzado, por así decirlo.
Checka el ejemplo, te tiene que andar perfecto. Aquí anda 10 puntos. Lo que si obviamente te va a faltar tu PHP que envíe en mail, pero eso es aparte del funcionamiento del lightbox.
Un abrazo y espero que esta vez te ande. Pon todo junto en el mismo directorio y listo, tiene que andar!
Si necesitas algo más, regresa sin dudarlo que intentare ayudarte nuevamente.
Saludos!
Descarga ejemplo!
Checkalo, aquí anda perfecto. Ten en cuenta de copiar lo del HEAD que te indico en el mismo HTML y de copiar todos los archivos y la carpeta sexyimages en el directorio raíz junto con tus HTML.
Con jQuery se puede hacer, pero no soy experto en ese lenguaje. Los programadores con quienes trabajo están muy ocupados como para consultarles, pero se que si buscas en google "formulario mail lightbox en jquery" o similar encontraras mil ejemplos para hacerlo con ese lenguaje. Esto que te paso yo es mucho más sencillo, menos avanzado, por así decirlo.
Checka el ejemplo, te tiene que andar perfecto. Aquí anda 10 puntos. Lo que si obviamente te va a faltar tu PHP que envíe en mail, pero eso es aparte del funcionamiento del lightbox.
Un abrazo y espero que esta vez te ande. Pon todo junto en el mismo directorio y listo, tiene que andar!
Si necesitas algo más, regresa sin dudarlo que intentare ayudarte nuevamente.
Saludos!
Hola que tal gracias por el ejemplo ya salio y de verdad muchas gracias.
Ahora existe un inconveniente en la página web, tengo unos flash (SWF) y cuando le doy clic en contactar el formulario se superpone pero los Flash siguen adelante del formulario y no se ve. Puedes ayudarme a solucionar este problemita por favor.
Gracias.
Atte, Robert Chuman
Ahora existe un inconveniente en la página web, tengo unos flash (SWF) y cuando le doy clic en contactar el formulario se superpone pero los Flash siguen adelante del formulario y no se ve. Puedes ayudarme a solucionar este problemita por favor.
Gracias.
Atte, Robert Chuman
Me alegro que te anduviera!
Por eso, checka estos dos ejemplos
Aqui, al final de la pagina: http://kb2.adobe.com/cps/142/tn_14201.html
Revisa y me avisas!
Por eso, checka estos dos ejemplos
Aqui, al final de la pagina: http://kb2.adobe.com/cps/142/tn_14201.html
Revisa y me avisas!
Hola amigo gracias por la respuesta.
Editing HTML code manually
To edit an existing HTML page, add the WMODE parameters to the HTML code.
1.Add the following parameter to the OBJECT tag:
<param name="wmode" value="transparent">
2.Add the following parameter to the EMBED tag:
wmode="transparent"
Esto hara que el formulario aparesca delante de todos los SWF que hay en la pagina web.
Lo probaré muchas gracias.
Atentamente Chuman
Editing HTML code manually
To edit an existing HTML page, add the WMODE parameters to the HTML code.
1.Add the following parameter to the OBJECT tag:
<param name="wmode" value="transparent">
2.Add the following parameter to the EMBED tag:
wmode="transparent"
Esto hara que el formulario aparesca delante de todos los SWF que hay en la pagina web.
Lo probaré muchas gracias.
Atentamente Chuman
Esto lo saque de un código de una página, veras el ejemplo puesto directamente.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1000" height="300" title="Cabeza de página Bohemios Como Nosotros.">
<param name="movie" value="imagenes/cabeza.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" /> <embed src="imagenes/cabeza.swf" width="1000" height="300" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
Yo no tengo ejemplos ya que no uso más flash!
Saludos y cuéntame como te ha ido
Ernesto
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1000" height="300" title="Cabeza de página Bohemios Como Nosotros.">
<param name="movie" value="imagenes/cabeza.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" /> <embed src="imagenes/cabeza.swf" width="1000" height="300" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
Yo no tengo ejemplos ya que no uso más flash!
Saludos y cuéntame como te ha ido
Ernesto
Hola amigo gracias ya me salio gracias de verdad muchísimas gracias.
Te pido otro servicio quiero que al llenar el formulario me envíe a uno o varios correos espeficos. Me puedes ayudar por favor este es el código de mi formulario en el
<div>
<div id="form" style="display:none;">
<form action="enviarcorreo.php" method="post" name="form1" id="form1">
<table width="411" border="0">
<tr>
<td colspan="4" class="Estilo2"><strong><U>CONTACTENOS</U></strong></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="1"> </td>
<td width="56"><span class="Estilo2">Nombre:*</span></td>
<td colspan="2"><input name="nombre" type="text" class="Estilo2"></td>
<td width="1"> </td>
<td width="187"><span class="Estilo2">Para contactarnos, le pedimos completar el formulario siguiente.</span><BR></td>
</tr>
<tr>
<td> </td>
<td><span class="Estilo2">Correo :*</span></td>
<td colspan="2"><input name="email" type="text" class="Estilo2"></td>
<td width="1"> </td>
<td width="187"> </td>
</tr>
<tr>
<td> </td>
<td><span class="Estilo2">Asunto:*</span></td>
<td colspan="2"><input name="asunto" type="text" class="Estilo2"></td>
<td> </td>
<td><span class="Estilo2">También nos alegra su llamada o un correo electrónico.</span></td>
</tr>
<tr>
<td class="Estilo2"> </td>
<td class="Estilo2">Mensaje:*</td>
<td colspan="2" class="Estilo2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="3">
<div align="center">
<textarea name="mensaje" cols="28" rows="9" class="Estilo2" id="mensaje"></textarea>
</div>
</td>
<td> </td>
<td>
<div align="center"><img src="images/Contactenos.png" width="183" height="167"></div>
</td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<div align="center">
<input name="button" type="submit" class="Estilo2" id="button" value="Enviar">
</div>
</td>
<td width="141">
<div align="center">
<input name="button2" type="reset" class="Estilo2" id="button2" value="Restablecer">
</div>
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="5" class="Estilo2">* Campos Obligatorios.</td>
</tr>
<tr>
<td> </td>
<td colspan="5" class="Estilo2">Sus datos personales serán tratados con la máxima confidencialidad</td>
</tr>
</table>
</form>
</div>
Me puede ayudar por favor. Gracias
Atentamente Chuman
Te pido otro servicio quiero que al llenar el formulario me envíe a uno o varios correos espeficos. Me puedes ayudar por favor este es el código de mi formulario en el
<div>
<div id="form" style="display:none;">
<form action="enviarcorreo.php" method="post" name="form1" id="form1">
<table width="411" border="0">
<tr>
<td colspan="4" class="Estilo2"><strong><U>CONTACTENOS</U></strong></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="1"> </td>
<td width="56"><span class="Estilo2">Nombre:*</span></td>
<td colspan="2"><input name="nombre" type="text" class="Estilo2"></td>
<td width="1"> </td>
<td width="187"><span class="Estilo2">Para contactarnos, le pedimos completar el formulario siguiente.</span><BR></td>
</tr>
<tr>
<td> </td>
<td><span class="Estilo2">Correo :*</span></td>
<td colspan="2"><input name="email" type="text" class="Estilo2"></td>
<td width="1"> </td>
<td width="187"> </td>
</tr>
<tr>
<td> </td>
<td><span class="Estilo2">Asunto:*</span></td>
<td colspan="2"><input name="asunto" type="text" class="Estilo2"></td>
<td> </td>
<td><span class="Estilo2">También nos alegra su llamada o un correo electrónico.</span></td>
</tr>
<tr>
<td class="Estilo2"> </td>
<td class="Estilo2">Mensaje:*</td>
<td colspan="2" class="Estilo2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="3">
<div align="center">
<textarea name="mensaje" cols="28" rows="9" class="Estilo2" id="mensaje"></textarea>
</div>
</td>
<td> </td>
<td>
<div align="center"><img src="images/Contactenos.png" width="183" height="167"></div>
</td>
</tr>
<tr>
<td> </td>
<td colspan="2">
<div align="center">
<input name="button" type="submit" class="Estilo2" id="button" value="Enviar">
</div>
</td>
<td width="141">
<div align="center">
<input name="button2" type="reset" class="Estilo2" id="button2" value="Restablecer">
</div>
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="5" class="Estilo2">* Campos Obligatorios.</td>
</tr>
<tr>
<td> </td>
<td colspan="5" class="Estilo2">Sus datos personales serán tratados con la máxima confidencialidad</td>
</tr>
</table>
</form>
</div>
Me puede ayudar por favor. Gracias
Atentamente Chuman
Me alegro te haya salido todo bien.
Respecto de eso que me pides no puedo ayudarte. Se que se hace con PHP pero no soy experto en esos lenguajes y el programador con el que trabajamos esta complicadísimo de trabajo como para poder molestarlo y preguntarle.
Una vez lo busque y no es nada difícil, se hace con una simple orden de PHP, pero como no entiendo nada de eso, no pude hacerlo marchar.
Te recomiendo Googlees con algo como "php formulario mail varios destinatarios" o "form php varios destinatarios" o algo así... yo encontré cientos de ejemplos pero no lo pude hacer andar porque como te dcia no entiendo de PHP.
Lamento no poder ayudarte con esto compadre.
Saludos!.
Respecto de eso que me pides no puedo ayudarte. Se que se hace con PHP pero no soy experto en esos lenguajes y el programador con el que trabajamos esta complicadísimo de trabajo como para poder molestarlo y preguntarle.
Una vez lo busque y no es nada difícil, se hace con una simple orden de PHP, pero como no entiendo nada de eso, no pude hacerlo marchar.
Te recomiendo Googlees con algo como "php formulario mail varios destinatarios" o "form php varios destinatarios" o algo así... yo encontré cientos de ejemplos pero no lo pude hacer andar porque como te dcia no entiendo de PHP.
Lamento no poder ayudarte con esto compadre.
Saludos!.
No hay problema gracias de todas maneras me has auydado ya vas tanto. Y te agradezco ese gesto amigo de verdad. Me gustaría agregarte a mi msn para poder conversar.
Como puede darte la puntuación que se da acá en todoexpertos es que también soy nuevo acá y no se como utilizarlo muy bien. Me puedes ayudar en ese aspecto.
Atentamente Chuman
Como puede darte la puntuación que se da acá en todoexpertos es que también soy nuevo acá y no se como utilizarlo muy bien. Me puedes ayudar en ese aspecto.
Atentamente Chuman
- Compartir respuesta
- Anónimo
ahora mismo