Gadget para contacto Blogger. Cambiar estilo. Instalar en una página estática

Bueno, pues ya tenemos un nuevo cacharrito que viene de serie con Blogger. Se trata de un formulario de contacto que permite remitir un mensaje al administrador del blog.

Es muy básico, pues -al menos de momento- no permite incorporar ficheros o enviar nada que no sea texto plano. Es decir, que si estáis ya pensando en enviarme una plantilla o código por ahí, olvidaros (no voy a explicar de nuevo el truco para lo segundo ☺).


Pero tan simple es su formato como la manera de instalarlo.

Como con otros gadgets sólo hay que ir a Diseño > Añadir gadget y en la ventana emergente que sale, seleccionar este del que hablamos: Formulario de Contacto.

Si de primeras no lo veis es porque está en el segundo apartado del menú de la izquierda, en Más gadgets, marcado en amarillo en la captura adjunta.

Cambiar estilo

Como el fondo es transparente, el formulario se integrará bien dónde lo pongáis, estéticamente hablando, pero no obstante es fácilmente modificable aplicando estilo (CSS) a los selectores adecuados. Aquí un sencillo ejemplo:

/* Contenedor general */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #ddd;
color: #000;
}
/* Cajas para insertar datos y botón de envío */
.contact-form-name, .contact-form-email, .contact-form-email-message, .contact-form-button-submit {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
border-color: #fff;
background: #000;
color: #fff;
}

En una página estática

Esto ya es una chapucilla no muy ortodoxa, pero fácil de hacer y que funciona. El truco consiste en añadir el gadget, cortar la parte del código justo para que no salga dónde debería (en las zonas normales para gadgets) y luego añadir ese mismo código en una página.

Lo de añadir primero el gadget y luego anularlo parcialmente, es porque si Blogger no encuentra el gadget (original) en algún sitio, no carga la parte JavaScript que lo ejecuta. Con esto logramos engañarlo para que lo cargue pero que no se vea el formulario en su ubicación natural.

Así que el primer paso es añadir el gadget (desde Diseño) y el segundo editar la Plantilla para eliminar casi todo el gadget. Hay que buscar la cadena "ContactForm", desplegar el widget pinchando en la flecha negra de la izquierda (lo mismo con el includable) y borrar las que a continuación he coloreado en gris.

<b:widget id='ContactForm1' locked='false' title='Contacta' type='ContactForm'>
    <b:includable id='main'>
  <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/>
        BLA, BLA, BLA
        <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:includable>
  </b:widget>

Al final no lo he reproducido entero, porque con dejar las dos primeras y las dos últimas será suficiente.


El problema es que para que el código del gadget nos sirva a todos, este incluye variables data cuyos valores controla Blogger y a los que sólo se puede acceder si incluimos esas variables en la plantilla. Por tanto, así a pelo no funcionará en una página.

Pero en este caso los datos personalizados para cada blog se reducen a cero, al menos los importantes, así que la solución que se me ocurrió fue pegar ese código y sustituir las data por los datos necesarios.

Abreviado sólo un poco, esto es lo que habría que pegar en una nueva Página en blanco con el título que queramos, para que el formulario funcione en ella:

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Nombre<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>Correo electrónico *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Mensaje *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Enviar'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

Y para comprobar que funciona, en esta página tenéis la prueba que hice. Es una cuenta que no uso, así que no esperéis contestación.


Si hay cambios en el código del gadget puede que este truco deje de funcionar, pero también puede que valga para siempre ;)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter