Crea tu propio formulario de contacto elegante con 123 Contact Form

Cartel de formulario personalizado y elegante

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).
Pantallazo de opciones extra en respuestas

  1. 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:
Captura de campos que puedes añadir

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.

Redes sociales donde insertar el formulario


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

<!-- www.123contactform.com script begins here -->

<script type="text/javascript" defer src="//www.123contactform.com/embed/3066252.js" data-role="form" data-default-width="650px"></script>
<p>Powered by <a class="footerLink13" title="123ContactForm" href="http://www.123contactform.com">123ContactForm</a> | <a style="font-size:small!important;color:#000000!important; text-decoration:underline!important;" title="¿Parece phishing? ¡Repórtalo!" href="http://www.123contactform.com/sfnew.php?s=123contactform-52&control119314=http:///contact-form--3066252.html&control190=Report%20abuse" rel="nofollow">Reportar abuso</a></p><!-- www.123contactform.com script ends here -->

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

Captura de pantalla del redactor de Blogger

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

Menú derecho del redactor

  • 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!


Image and video hosting by TinyPic


Image and video hosting by TinyPic

4 comentarios

  1. Gracias por todas las explicaciones! Yo estoy contenta con el formulario, y me arreglo bien, al menos de momento, con el de google.
    Besos!! Helena

    ResponderEliminar
  2. Yo lanzo propuestas. Luego que cada cual decida, cuál es la que más le conviene, por supuesto.
    Un abrazo, guapi.

    ResponderEliminar
  3. ESto lo tengo que poner yo en práctica!!!
    Gracias preciosa eres la caña!!!
    Muxutxuak 😘

    ResponderEliminar
    Respuestas
    1. Me alegro de que lo encuentres útil. Ya me dirás qué tal, la verdad es que es muy sencillo.
      Un besazo.

      Eliminar

Me encanta tenerte por aquí, desvanero. Es un placer conocer tu opinión. Si quieres que te visite, indícame el nombre de tu sitio, pero no me dejes el enlace, por favor. No quiero que Google me penalice. Gracias y un abrazo enoooooooorme.