Blogger: Cómo poner un formulario de contacto con Foxyform

Una de las secciones que no deben faltar en tu blog es el formulario de contacto. Mediante esta opción facilitas que los usuarios de tu blog puedan comunicarse contigo, a través del correo electrónico. Esto te permitirá recibir retroalimentación sobre el estado de tu blog, críticas, dudas, etc. En definitiva, mantener un vínculo entre tú y tu comunidad de usuarios.

Blogger nos viene de serie con un gadget que cumple con este cometido, pero está ideado para incluirlo en una sección de nuestro blog. Si lo que quieres es añadir una página con un formulario de contacto, esta opción no nos sirve, al menos directamente.

Aunque existen muchas formas de incluir una página de contacto, las más utilizadas son:

• Incluir un formulario facilitado por terceros, como FoxyForm
• Modificar el gadget nativo de blogger, para que aparezca en una página
• Utilizar un formulario de Google Docs e incrustarlo en nuestro Blog

¿Cuál crees que es la mejor opción?... pues como pasa siempre, la que mejor se adapte a tus necesidades. No es que no me quiera mojar, es que realmente ninguna es mejor que otra, todo depende de lo que quieras hacer.

Yo te propongo lo siguiente:

• FoxyForm o similares.- Si quieres algo que funcione, sin complicaciones
• Toqueteando el gadget de Blogger.- Si no le tienes miedo al código y no quieres depender de terceros
• Formulario de Google Docs.- Si amas a Google

Hoy vamos a analizar la primera opción, veremos cómo incluir un formulario de contacto con Foxyform y aprenderemos a personalizarlo, más allá de las opciones que nos ofrecen por defecto. 

Poner un formulario de contacto con Foxyform

Hay muchas empresas que nos facilitan la vida, nos dejan amablemente unas herramientas estupendas que integramos en nuestro blog en un periquete. Vamos a aprovecharnos de una denominada Foxyform, que funciona y además muy bien.

Paso 1: Configurar Foxyform

1. Entramos en la página oficial de Foxyform
2. En opciones básicas, seleccionamos los campos que necesitemos en nuestro formulario
   
   

   Marca las opciones que necesites en tu formulario de contacto, para guiarte échale un vistazo a la vista previa que se va generando en la parte inferior. Recuerda marcar como obligatorio, los campos que quieras forzar a introducir al usuario.

3. Seleccionamos opciones de la configuración avanzada
   

   Éstas son las únicas opciones que podemos controlar del aspecto del formulario, selecciona las que mejor vayan con la plantilla que estés utilizando. Luego veremos como modificar otras opciones de la presentación desde Blogger.

4. Introducimos dirección de correo electrónico, donde se enviarán los datos del formulario
   
5. Pulsamos el botón Crear Formulario
   
6. Se generará el código HTML, que necesitarás para el siguiente paso
   

Paso 2: Poner FoxyForm en una página de Blogger

1. Creamos una página  en blanco
   Blogger > Páginas > Página Nueva > Página en blanco
2. Le ponemos un título a la página, por ejemplo "Contacto"
3. Pulsamos sobre botón HTML y pegamos el código obtenido al final de paso 1
4. Publicamos 

Si has seguido los pasos anteriores, ya tienes disponible el formulario de contacto en tu blog. Si añadimos el código generado en esta misma entrada, éste es el resultado:

Formulario de contacto generado con Foxyform

foxyform

Como puedes observar, es muy sencillo de incluir. Si quieres modificar alguna opción, basta con iniciar los pasos anteriores, generar un nuevo código y volverlo a pegar en la página de contacto.

Cómo personalizar Foxyform

La herramienta que nos facilita Foxyform desde su página web, no permite modificar muchas opciones del aspecto del formulario. Vamos a utilizar algunos trucos, para tener un mayor control sobre la presentación.

Modificar el ancho del formulario

Por defecto, el formulario es muy estrecho. Puedes cambiar el ancho, modificando el parámetro width del código que proporciona Foxyform. Al final del paso 1, se te generó un código parecido a éste:

<!-- Do not change the code! -->
<a id="foxyform_embed_link_131472" href="http://es.foxyform.com/">foxyform</a>
<script type="text/javascript">
(function(d, t){
   var g = d.createElement(t),
       s = d.getElementsByTagName(t)[0];
   g.src = "http://es.foxyform.com/js.php?id=131472&sec_hash=15f3e67be28&width=350px";
   s.parentNode.insertBefore(g, s);
}(document, "script"));
</script>
<!-- Do not change the code! -->

Edita la página que creaste en el paso 2 y modifica el valor resaltado (350px), por el ancho que mejor se adapte a la plantilla que tengas (500px por ejemplo).

Eliminar barra de desplazamiento vertical

El código que genera Foxyform incrusta un iframe que, en algunos casos, hace aparecer una barra vertical poco estética. Para eliminarla debemos ajustar el alto del iframe, vamos a emplear CSS para hacerlo:

<style>
.post-body iframe {
  height: 600px; 
}
</style>

Edita la página creada en el paso 2 en formato HTML y copia el código al principio del documento. Ajusta el alto del ejemplo (600px), por el que mejor se adapte según tu formulario de contacto.

Avanzado: hackeando Foxyform

Foxyform no permite personalización CSS mucho más allá de lo que hemos hecho, debido a que genera estilos propios a nivel interno. Para lograr personalizarlo aún más, tendríamos que recurrir a javascript o utilizar código directo. 

El código que nos proporciona Foxyform, genera un elemento iframe de esta forma:

<iframe src="http://es.foxyform.com/form.php?id=131472&sec_hash=15f3e67be28" width="500px" height="474px" style="border: none;" frameborder="0"></iframe>

Si usamos este código, en vez del que nos proporciona Foxyform, tenemos la libertad de modificar el ancho y el alto directamente en los atributos de iframe, además, vamos a incluirle un nuevo atributo scrolling="no", que evitará que aparezcan las molestas barras de desplazamiento. El código resultante quedaría así:

<iframe src="http://es.foxyform.com/form.php?id=131472&sec_hash=15f3e67be28" scrolling="no" width="500px" height="450px" style="border: none;" frameborder="0"></iframe>

Sustituye el código que te proporcionó Foxyform por éste otro, recuerda poner tu id y sec_hash y no el que aparece en el ejemplo.

Si utilizamos este método también eliminaremos los créditos de Foxyform. El parámetro id y sec_hash de Foxyform se genera cada vez que creamos un formulario, estos valores los puedes copiar del código que te genera Foxyform.

Éste es el resultado del código anterior, donde hemos especificado un ancho de 500px, alto de 450px y hemos forzado a que no aparezcan barras de desplazamiento:

Formulario de contacto Foxyform, incrustado directamente

Conclusión 

Tanto si ya tenías un formulario de contacto con Foxyform, como si no, espero que esta guía te haya ayudado a conocerlo un poco mejor y a mejorarlo. Como ya comenté inicialmente, existen otros tipos de formulario y lo veremos en detalle en próximos artículos.

Ya sabes que me tienes disponible para cualquier duda, sírvete de mi formulario de contacto. Que, por cierto, está hecho con Foxyform ;-)

Que lo compartas es el mejor regalo que me puedes hacer

• Tweet

Gracias :-)