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.

Cómo lograrlo paso a paso

1. 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.


2. Una vez que hayas creado la página, haz click en la opción "Ver" para que accedas a la página, y copia la URL de ésta, que aparece en la barra de direcciones.
   
   
   
   


3. Copia el siguiente código, y edita lo que resalté de rojo. Donde dice 350px, es el ancho máximo del formulario, edítalo poniendo el mismo valor, en las dos veces que aparece. En font-size:16px, puedes cambiar el tamaño del texto.
   
   

<b:widget id='ContactForm1' locked='false' title='' type='ContactForm'>

<b:includable id='main'>

<b:if cond='data:blog.url == &quot;URL_DE_LA_PAGINA_ESTATICA&quot;'>

<style type="text/css">

.contact-form-widget {

max-width:350px; font-size:16px;

}

.contact-form-name, .contact-form-email, .contact-form-email-message {

max-width:350px;

}

.post-footer{

display:none;

}

.home-link{

display:none;

}

.feed-links {

display:none;

}

</style>

<!-- b:if cond='data:title != &quot;&quot;'>

<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 + &quot;_contact-form-name&quot;' 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 + &quot;_contact-form-email&quot;' 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 + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>

<p/>

<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/>

<p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>

</div>

</form>

</div>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>








4. 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.
   
   
   
   


5. Ya que estés ubicad@ exactamente "antes" de dicha linea, pega el código del paso 3, mismo que ya editaste.


6. 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.



Otra truco para lograr esto, ya se ha publicado en Oloblogger.



Notas finales

• El código que resalté de azul en el paso 3 es el que hace que aparezca el titulo del formulario. Puedes eliminarlo, si es que no tienes ninguna intención de que aparezca, ya que, la pagina estática mostrará el título. Ahora está comentado, por eso no se interpreta por el navegador.

Última actualización:

00/00/00.