Formulario de Contacto de Blogger en una Página Estática del Blog
Pues ya tenemos juguetito nuevo, me refiero al formulario de contacto que tantos usuarios echaban de menos en Blogger, y ahora, las dudas e inquietudes surgen, pues al ser un widget, el código que viene en la plantilla no se puede incrustar en una página estática tal y como aparece.
La buena noticia es que, con algunos trucos o chapuzas, podemos hacer que el formulario de contacto aparezca en una página estática.
Básicamente, este truco que te mostraré, consiste en condicionar el formulario de contacto para que se muestre en una página estática que crearemos para este propósito. De ese modo, el formulario se cargará y aparecerá en dicha página. Veamos entonces cómo hacerlo.
Antes de comenzar con ésto, te recomiendo guardar una copia de respaldo de tu plantilla, y para ello, vas a la pestaña Plantilla, y haces click en el botón que dice: "Crear/Restablecer copia de seguridad" y descargas la plantilla completa.
¡Y listo!, ahora el widget con el formulario de contacto aparecerá en una página estática de tu blog ;)
Puedes ver la demostración en esta página estática.
Notas finales
Otro truco para lograr ésto, ya se ha publicado en Oloblogger.
04/08/2015. He cambiado la unidad de pixeles en la fuente por una unidad relativa "%".
La buena noticia es que, con algunos trucos o chapuzas, podemos hacer que el formulario de contacto aparezca en una página estática.
Básicamente, este truco que te mostraré, consiste en condicionar el formulario de contacto para que se muestre en una página estática que crearemos para este propósito. De ese modo, el formulario se cargará y aparecerá en dicha página. Veamos entonces cómo hacerlo.
Antes de comenzar con ésto, te recomiendo guardar una copia de respaldo de tu plantilla, y para ello, vas a la pestaña Plantilla, y haces click en el botón que dice: "Crear/Restablecer copia de seguridad" y descargas la plantilla completa.
Cómo lograrlo paso a paso
- Crea una página, yendo a la pestaña Páginas, luego, en la lista desplegable que dice Página nueva, seleccionas Página en blanco, y ahí agregas el texto que desees que aparezca arriba del formulario.
- Una vez que hayas creado la página, haz click en la opción "Ver" que aparece debajo del titulo de la página que creaste (al estar en "Páginas"), para que accedas a la página, y copia la URL de ésta, que aparece en la barra de direcciones del navegador.
- Copia el siguiente código, y edita lo que resalté de rojo. Donde dice: URL_de_la_página_estática, pones la dirección web (URL) de la página estática que creaste. Donde dice 350px, puedes editar el ancho máximo que tendrá el formulario. Edítalo poniendo el mismo valor, en las dos veces que aparece, tomando en cuenta el ancho máximo que quieres que tenga en pixeles. En font-size:110%, puedes cambiar el tamaño del texto. Al aumentar ese valor: "110%", aumentas el tamaño del texto.
<b:widget id='ContactForm1' locked='false' title='' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL_de_la_página_estática"'>
<style type="text/css">
.contact-form-widget {max-width:350px; font-size:110%;}
.contact-form-name, .contact-form-email, .contact-form-email-message {max-width:350px;}.post-footer,.home-link,.feed-liks{position:absolute;top:-9999px;left:-9999px;}
</style>
<!-- b:if cond='data:title != ""'>
<h2 class='title'>
<data:title/>
</h2>
</b:if -->
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/>
<span style='font-weight: bolder;'>
*
</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/>
<span style='font-weight: bolder;'>
*
</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
- Luego, vas a la pestaña Plantilla, después a Editar HTML y en la lista desplegable "Ir al widget", selecciona "Blog1", para que te lleve al código del widget de las entradas. Ahí ubícate antes de </b:section> tal y como puedes ver en la imagen.
Haz clic sobre la imagen para verla en su tamaño original
- Ya que estés ubicada (o) exactamente "antes" de dicha linea, pega el código del paso 3, mismo que ya editaste.
- Verifica en vista previa y si todo luce bien, guarda los cambios.
¡Y listo!, ahora el widget con el formulario de contacto aparecerá en una página estática de tu blog ;)
Puedes ver la demostración en esta página estática.
Notas finales
- El código que resalté de azul en el paso 3 es el que hace que aparezca el título del formulario. Puedes eliminarlo, si es que no tienes ninguna intención de que aparezca, ya que, la página estática mostrará el título. Ahora está comentado, (eso quiere decir que agregue: "!--" al principio y "--" al final) por eso no se interpreta por el navegador.
Otro truco para lograr ésto, ya se ha publicado en Oloblogger.
Última actualización:
Etiquetas:trucos,Tutoriales