Crea tu propio formulario de contacto elegante con 123 Contact Form

Por propia experiencia sé que, a medida que vas haciéndote a las tareas y necesidades de tener tu propio blog, van surgiendo cuestiones a las que más tarde o más temprano habrás de enfrentarte.

Estoy convencida de que una de ellas será la de insertar un formulario de contacto para tu sitio. Pero, claro, querrás uno elegante, y lo más bonito posible, sin las consabidas "marcas de agua". Y hoy te traigo la solución.

Tras dar muchas, muchas, pero que muchas vueltas, e ir probando varias plataformas, hoy te hablo de una que seguro te convence. Primero porque es gratis, y segundo, porque permite eliminar la "marca de agua" de forma muy sencilla, aunque claro, no menciones esto muy alto, porque es un truco que quizá convenga compartir de forma discreta, y que he descubierto por pura casualidad. Así que no lo divulgues demasiado. Ya me entiendes 😉😉😉

Otro día te daré una alternativa también muy interesante, a modo de chat. Pero hoy, ¿qué te parece si analizamos en primer lugar los motivos por los que conviene tener un formulario de contacto en tu blog?:

1. Supongamos que has sido seleccionado para una colaboración en algún blog... Si no cuentas con un formulario de contacto, la persona encargada de hacerte la propuesta, tendrá estas opciones: dejarte un comentario en alguno de los posts, indagar hasta encontrar tu dirección de email, o investigar si puede comunicarse contigo a través de alguna de tus redes sociales. Resumiendo: un auténtico rollo, salvo que cuentes con un apartado específico donde tu email sea accesible (y francamente no es una práctica recomendable por temas de spam).
2. Imagina que tus proyectos gustan tanto que quieren contactar contigo para proponerte que seas DT en algún equipo. Estupendo desde luego, pero ¿cómo pueden comunicártelo? Se hallarían en la misma tesitura que en el punto anterior.
3. Cuentas con una tienda online, o al menos, aceptas encargos. Desde luego el comentario no es la mejor manera de realizar un pedido, por la falta de privacidad, y porque puede que pases por alto el comentario, si no tienes habilitada la opción de "aprobar comentarios", y eso podría llevarte a perder una venta. Con lo cual, volveríamos al primer punto.

Por tanto, ahora conviene analizar, ¿qué ventajas ofrece un mensaje recibido a través de formulario frente a uno recibido directamente en tu email?

1. Ante todo orden. Sí, sí como suena. Los mensajes de los formularios llegan a tu bandeja de correo, por supuesto, pero lo hacen identificados como "Formulario X de tal...", así que ya de por sí, eso ayuda a que no se pierdan entre la multitud de mensajes publicitarios o de newsletters a los que estás suscrito, porque es posible que capten más fácilmente tu atención. Dime que no soy la única que recibe, en su email, millones de mensajes de nuevas publicaciones de sitios que sigue, por favor 😅.
2. Otra ventaja adicional es que, si los eliminas por error de tu bandeja de entrada, por norma general, quedan guardados en el registro de tu servidor de formularios. Por tanto, son recuperables, accediendo a tu cuenta. ¿Nunca te ha sucedido que has borrado un correo por error y justo al poco has limpiado la papelera? ¡Horror! Saltan todas las alarmas... Con los formularios de contacto, esto lo evitas en parte, al menos a priori.

Y ahora lo que importa. En todo el tiempo que llevo con el blog, he probado tres plataformas: Foxyform, Googleforms y la última que es la que te recomiendo 123form. Las tres son gratuitas, y aunque en un principio parece que la de Foxyform permite una mayor personalización con los colores y los campos, a mí siempre me ha dado problemas, porque la mayoría de los avisos no me llegaban. En cuanto a GoogleForms, aunque sí deja jugar un poco con las plantillas, no me gusta que organice los mensajes en páginas Excel. Habrá quien considere esto cómodo, pero a mí no me resulta práctico, pues según desde que tipo de dispositivo trate de abrirlo, si no tengo el programa apropiado, no podré visualizarlo. Por último, 123Contact Form constituye, en mi humilde opinión, la mejor alternativa. Por varios motivos: 

1. Cuenta con diversas plantillas o temas con que personalizar los colores del formulario.
2. El panel de control está organizado en dos pestañas: "Formularios recientes", "Respuestas recientes".
3. En esa misma pantalla dispones de un diagrama de barras con las estadísticas.
4. Si te metes en "respuestas recientes" y seleccionas alguna de ellas, te deriva a los formularios que tienes creados. Al pinchar sobre uno de ellos te sale una tabla con el total de las respuestas recibidas, organizadas por: país, nombre y apellidos, email, asunto, fecha..., pero lo que la convierte para mí, en parte, en la opción más interesante es que si seleccionas en esa tabla cualquiera de esas respuestas te genera una nueva pantalla que puedes directamente imprimir, reenviar a alguien o transformar en PDF. Todo en una misma pantalla. Lo cual considero de lo más práctico (aporto captura para que comprendas a qué me refiero).

5. Esta plataforma cuenta además, con diversos tipos de formularios: de contacto, encuesta, eventos, pedidos, formulario de solicitud de trabajo... Herramientas de lo más funcionales, como ves.

Como estamos hablando sobre formularios de contacto, y queremos personalizarlos, lo más que nos sea posible, partiremos de una plantilla en blanco, pero para que te hagas una idea de los muchos campos que puedes insertar, te dejo una imagen:

Imagínate que ya has creado uno a tu gusto, con los campos que te interesan y la gama de colores que más te agrada. Llega el momento de obtener el código o el link. Es más, ¿sabías que lo puedes publicar casi en cualquier red social? Te lo muestro.

Pues bien, supongamos que hemos obtenido un código como éste, obviamente éste corresponde al mío. Te subrayo la parte que habrás de suprimir para eliminar la marca de agua:

Powered by 123FormBuilder | Reportar abuso

Es muy importante que todo lo demás lo mantengas. Las etiquetas <p> y </p> indican párrafo o texto. La primera es de apertura, precede por tanto al texto, y la segunda es de cierre: delimita el final del párrafo. Para que el formulario se vea adecuadamente en el lugar de tu blog donde deseas insertarlo (recomiendo que lo pongas en una página) te dejo un enlace a la mía por si te sirve de ejemplo, es preciso que lo hagas desde la pestaña de redactar. Siempre y cuando tengas habilitada la opción de "Interpretar HTML escrito". De no ser así, para que funcione adecuadamente habrás de insertarlo a través de la pestaña HTML del redactor de Blogger. Suena lioso, pero te pongo capturas de pantalla de Blogger, para que comprendas mejor lo que te comento. Menciono esto, porque en mi caso, por el tipo de posts que hago de vez en cuando (éste es un ejemplo de ello), hube de desactivar esa opción. Lo habitual es que por defecto esté activa, pero por si acaso...

• Éste es el aspecto del redactor de Blogger. En la imagen aparece esta misma entrada que ahora lees, a medida que la iba redactando. Si te fijas, en la parte izquierda, justo bajo el título del blog, aparecen dos pestañas: "Redactar" y "HTML".

• Por contra, a la derecha, en esa misma pantalla, nos sale algo como esto: 

• Al desplegar el apartado de "Opciones", hay que verificar que en "Modo de redacción" tengas activada la opción "Interpretar HTML escrito". Esto significa que cualquier código HTML que insertes en tus entradas será simultáneamente traducido en imagen o en el formato adecuado.

¿Qué te ha parecido el super tutorial?, ¿te resulta interesante?, ¿te animas a usarlo? Espero que me lo cuentes en los comentarios.

Un besazo.

P.D.: Aunque no tiene relación directa con el tema de hoy, aprovecho para recordar que en pocos días se cierra el plazo para el actual reto desvanero. ¡No faltes!

[EDITO 25/04/2018: Esta plataforma dispone de nuevo dominio y  nuevo nombre. Ahora se accede a ella desde 123formbuilder.com, en lugar desde la url que te dispenso en este artículo. No obstante, la url antigua te redirecciona a la actual.]