Cómo hacer un formulario de contacto en WordPress que enamore

Seguramente te hayas encontrado en la situación de querer cambiar tu formulario de contacto en WordPress, hacer una encuesta a tus lectores, o incluir formularios de contacto en más sitios en tu web, no sólo en el contacto.

Pues bien, si no quieres instalar más plugins en tu sitio WordPress, no sabes nada de programación ni HTML y te parecen demasiado complicados de configurar los que has visto, o quieres darle un aspecto más moderno a tus formularios de contacto, la solución es Typeform.

3 formas de crear formularios en WordPress

TYPEFORM

Typeform no es un plugin para WordPress, es una plataforma online en la que tienes que darte de alta y así poder crearlos y luego copiar y pegar el código en las páginas de tu sitio web.

Tiene una interfaz muy amigable y sencilla, y te va guiando en cada paso para su creación.

Lo primero que debes hacer en entrar en Typeform y darte de alta.

Puedes crear una cuenta gratuita, suficiente para la mayoría, que te permite crear formularios de forma ilimitada con muchas opciones, pero si necesitas algo más avanzado, estas son las opciones que hay:

Cuenta Core (gratuita) con:

• Formularios ilimitados sin límite de preguntas ni límite de respuestas almacenadas.
• Diseño propio o uso de uno predefinido.
• Galería con plantillas para su uso.
• Envío de respuestas al buzón de tu correo.
• Monitorización de número de usos de los formularios.
• Posibilidad de exportar los datos a Excel.
• Posibilidad de enviar los datos para su análisis a otras aplicaciones.

Cuentra PRO (18€/mes) que incluye:

• Todo lo de la cuenta Core.
• Lógica de salto de pregunta en función de la respuesta.
• Posibilidad de incluir subida de archivos.
• Posibilidad de incluir valores en las respuestas para realizar test.
• Posibilidad de incluir botón de pago.
• Campos ocultos para incluir en los formularios.
• Eliminación de la marca Typeform.

Con estas opciones se pueden crear formularios tan complejos como necesites y como están en una aplicación externa, haces la carga de tu sitio web más ligera.

Una vez has creado la cuenta y entras, empieza la creación.

Como puedes ver la interfaz es muy intuitiva y te va guiando paso a paso hasta que lo terminas, pudiendo configurar colores, preguntas, botones… de una forma muy sencilla.

Los formularios typeform están divididos en tres partes:

• Pantalla de inicio
• Preguntas
• Pantalla final

Sólo tienes que pinchar y arrastrar hasta su lugar los distintos elementos del menú de la izquierda y luego configurarlos.

Unas vez has terminado de crear las tres partes, pinchas en Diseñar y te da la posibilidad de cambiar colores, tipografías, incluir imágenes de fondo o elegir un tema predefinido como plantilla.

Después está la pestaña Configurar, donde puedes ajustar algunos parámetros, como el tipo de barra de progreso que va a tener, cómo van a ser las notificaciones que recibas por email, o si quieres integrarlo con alguna plataforma como Mailchimp, Google Drive, Zendesk, Trello y muchas más.

Una vez configurado, sólo queda elegir el formato que va a tener el formulario en tu web, y para eso tienes que ir a la siguiente pestaña, Distribuir.

En ella se pueden elegir tres formas de integrarlo:

• A través de un enlace a la url: para que se abra en una nueva ventana o en la misma en la que estás.
• Lanzar un popup
• Incrustarlo en la web en un iframe: esta última, si se está navegando en un dispositivo móvil, en vez de aparecer el formulario, aparece automáticamente un banner que al pinchar sobre él, se abre en una ventana nueva.

Para las tres opciones, sólo hay que pinchar sobre ella, copiar el código que te ofrece Typeform y pegarlo en el sitio de tu web donde más te interese.

¡Así de fácil!

De esta forma ya lo tienes integrado en tu sitio web, sin instalar ningún plugin.

 

Sin embargo, si lo que quieres es un plugin porque prefieres todo en tu propia plataforma y además te gusta modificar los archivos CSS o sabes algo de programación, vamos que no te suena a chino el HTML, te recomiendo los siguientes plugins:

NINJA FORMS

 

Un plugin de WordPress para la creación de formularios de forma rápida y fácil.

Tiene un sencillo interfaz para crearlos, tan solo tienes que pinchar y arrastrar los elementos que quieras que tenga.

Se instala como cualquier otro plugin de WordPress, pero siempre asegúrate de tener una copia de seguridad reciente de la base de datos y archivos antes de instalar o actualizar cualquier elemento en tu sitio web.

Para instalarlo tienes que ir a:

• Plugins > Añadir nuevo > en buscar introducir Ninja Forms > Instalar

Una vez instalado vas a:

• Forms > Add new form

De esta forma has creado el nuevo formulario y ahora tienes que configurarlo.

Cuando entras en el formulario ves cuatro pestañas:

• Form Settings: Para configurar las opciones.
• Fields Settings: Para añadir los campos que quieres que tenga y luego configurarlos.
  La foma de añadirlo es muy sencilla ya que sólo hay que pinchar sobre el tipo de campo y arrastrarlo a la parte derecha de la pantalla. Luego se pincha en el campo y se despliegan las opciones que tiene para poder configurar.
• Notifications: Donde se crean los distintos correos a los que se va a notificar el envío.
• Form Preview: Que abre una pestaña nueva en el navegador con la previsualización.

Una vez que lo hayas salvado, si vuelves a la ventana Forms de tu WordPress, verás todos los que has creado y un shortcode diferente para cada uno.

Ese shortcode es el que tienes que copiar y pegar en la página donde quieras que esté.

Por ejemplo, si es en la página contacto, creas esa página y pegas directamente en ella el shortcode que has copiado del apartado Forms. De esta forma, al publicar la página, estará el formulario en su interior.

Si quieres personalizar su aspecto, tienes que hacerlo a través del archivo CSS del plugin o de tu tema para que las actualizaciones del plugin no deshagan los cambios.

Este plugin tiene muchas extensiones de pago para ampliar las funcionalidades de los formularios que se pueden adquirir en su página web.

 

CONTACT FORM 7

 

Es uno de los plugins más utilizados y tiene muchas extensiones gratuitas que te dan la opción de crear formularios tan complejos como quieras.

Se instala como cualquier otro plugin de WordPress, pero siempre asegúrate de tener una copia de seguridad reciente de la base de datos y archivos antes de instalar o actualizar cualquier elemento en tu sitio web.

Para instalarlo tienes que ir a:

• Plugins > Añadir nuevo > en buscar introducir Contact Form 7 > Instalar

Una vez instalado vas a:

• Contacto > Formularios de contacto > Añadir nuevo

Automáticamente genera un nuevo formulario con los elementos más esenciales:

• Nombre
• Mail
• Asunto
• Mensaje
• Botón enviar

Pero tiene muchas opciones que se pueden añadir, para ello, a la derecha de la pantalla verás un botón “generar etiqueta” que muestra todas las opciones que puede incluir.

Al seleccionar una de ellas, se genera una etiqueta, entre corchetes, que es la que debes copiar y pegar en el espacio de la izquierda de la pantalla que es donde se está creando el formulario.

La forma de crearlo es mediante etiquetas HTML + las etiquetas que se van generando de los distintos campos a incluir en el formulario.

Una vez creado el formulario, en la parte de abajo verás la configuración de las notificaciones: Email y Email(2).

Estos son los correos que se van a enviar, y son completamente configurables, tanto los campos de:, para: y asunto: como el cuerpo del mensaje, y para ello tienes que incluir las etiquetas que has generado en la creación del formulario y el texto que quieras.

Como opción está Email(2) por si quieres crear dos tipos de correo diferente, por ejemplo uno para el administrador con la información que han incluido en el formulario de una forma esquemática, y otro para la propia persona que envía el formulario, para que le llegue una copia de los datos que ha mandado o simplemente para enviar un mail de agradecimiento por invertir su tiempo en tu web.

Una vez lo hayas salvado, aparecerá una lista con los creados y un shortcode diferente para cada uno.

Ese shortcode es el que tienes que copiar y pegar en la página donde quieras que esté el formulario.

Por ejemplo, si es en la página contacto, creas esa página y pegas directamente en ella el shortcode que has copiado del apartado Forms. De esta forma, al publicar la página, estará en su interior.

Si quieres personalizar el aspecto del formulario tienes que hacerlo a través del archivo CSS del plugin o de tu tema para que las actualizaciones del plugin no deshagan los cambios.

Este plugin tiene unas extensiones muy interesantes para crear formularios muy complejos.

Ya te hablamos de una de ellas:  para que te lleguen los avisos a WhatsApp cada vez que rellenan un formulario en tu sitio web.

¿Y tú qué prefieres, instalar un plugin y que el formulario esté en tu sitio web o trabajar con aplicaciones externas y darle un aspecto más moderno a los formularios?