Crea formularios en WordPress con Contact Form 7

Es muy probable que en tu página web necesites algún tipo de formulario, ya sea de contacto, o para contratar algún tipo de servicio, etc.

En este curso veremos qué es el plugin Contact Form 7 y cómo puede ayudarnos a crear este tipo de formularios.

Además, hemos preparado muchas clases con ejemplos y funcionalidades concretas. ¡Esperamos que os guste!

Formularios en WordPress

Siempre ha parecido curioso que WordPress no cuente con una funcionalidad de formulario nativo. La razón de esto es el intentar que WordPress sea lo más básico posible en su base, y a partir de ahí, que vayamos añadiendo las funcionalidades que necesitemos.

Y, para poder tener un formulario en nuestro WordPress, podemos utilizar los ya conocidos plugins de WordPress. Uno de estos plugins es el plugin de Contact Form 7.

Qué es CF7

Contact Form 7 es uno de los plugins más conocidos y utilizados dentro del repositorio de WordPress. A la hora de escribir este texto, cuenta con más de 5 millones de instalaciones activas.

Con CF7 podemos crear formularios de contacto de forma sencilla. Además, podemos utilizar plugins que añaden nuevas funcionalidades y hacen que este plugin gratuito sea muchísimo mejor y con más opciones.

Cuando instalamos el plugin de Contact Form 7, el plugin nos crea un primer formulario. Este formulario de ejemplo, tiene los campos base que podríamos necesitar a la hora de utilizar un formulario de contacto.

Campos básicos

Entre estos campos básicos, encontramos los siguientes:

• Nombre

• Email

• Asunto

• Mensaje

• Botón para enviar el mensaje

Correo

Una vez tenemos los campos creados, es hora de configurar el correo que se enviará una vez se rellene el formulario.

En esta sección podemos encontrar las siguientes:

• Para: donde definimos a qué email se enviará el contenido del mensaje.

• De: para definir el correo electrónico que envía el mensaje.

• Asunto: el asunto que llevará este email y el que veremos en nuestro gestor de correos.

• Cabeceras adicionales: aquí podemos establecer el «Reply-to» e incluso configuraciones más avanzadas

• Cuerpo del mensaje: este es el contenido que llevará el cuerpo del email. Podemos añadir nuestros propios textos e introducir los contenidos de los diferentes campos del formulario.

• Archivos adjuntos: podemos configurar si se envían archivos adjuntos.

Mensajes

En la sección de mensajes podremos definir qué mensajes se mostrarán. Estos mensajes son los habituales de confirmación, errores, etc.

Mostrarlo en nuestra web

Una vez tenemos el formulario preparado, ya podemos mostrarlo en nuestra página web. Para mostrarlo en la web tenemos dos opciones destacadas:

• Shortcode: un código que podemos poner en la web para que el formulario se muestre.

• Bloque de Gutenberg: Contact Form 7 cuenta con un bloque que nos ayuda a escoger el formulario que queremos mostrar.

La accesibilidad es un tema muy importante en el mundo web, y desde la comunidad de WordPress, se intenta enfatizar esta importancia.

Y, gracias a esta comunidad, podemos hacer uso de un plugin gratuito y hacer que nuestros formularios con Contact Form 7 sean más accesibles.

El plugin en cuestión es: Contact Form 7: Accessible Defaults

Lo único que tenemos que hacer es instalar y activar el plugin, eso es todo.

Importante: los plugins que ya tienes creados no serán accesibles. Deberás crear formularios nuevos y llevarán esta base de accesibilidad de forma automática.

Plantillas

Este plugin nos ofrece unas plantillas base que podemos utilizar y ahorrar tiempo.

En el momento en que añadimos un formulario a nuestra web, abrimos una puerta al SPAM. Una puerta a que cualquier persona pueda escribir en ese formulario. Es por eso que se suele recomendar el uso de Google reCAPTCHA en los formularios. Gracias a él podemos evitar gran parte del SPAM que llega a través de los formularios.

Configuración

El plugin Contact Form 7 cuenta con una funcionalidad para activar el Google reCAPTCHA. Para poder activarlo y configurarlo, tenemos que dirigirnos a: Contacto » Integración » reCAPTCHA

Ahí añadiremos la «Clave del Sitio» y la «Clave Secreta» que nos ofrece Google reCAPTCHA. Para poder crear estas claves, puedes hacerlo en la web de Google reCAPTCHA.

Añadir a un formulario

Si utilizamos la v3 de Google reCAPTCHA, no es necesario que hagamos nada más. Pero, si utilizamos la v2, debemos añadir el shortcode:

[recaptcha]

Una vez añadido, Google reCAPTCHA aparecerá en nuestro formulario.

Pudiera darse el caso en el cuál querramos guardar los mensajes que recibamos a través de nuestros formularios. Contact Form 7 no lo hace pero, el desarrollador del plugin, creó otro plugin que nos permite disfrutar de esta funcionalidad.

El plugin es: Flamingo

Configuración

Una vez hemos instalado y activado el plugin, no tenemos que hacer nada más. Todos los mensajes enviados, a través de los formularios de Contact Form 7, serán guardados en nuestra base de datos.

Libreta de direcciones

Al activar el plugin, nos aparecerá un nuevo enlace en el menú principal de nuestro wp-admin: «Flamingo».

Al hacer clic en este enlace, accederemos a la «Libreta de direcciones de Flamingo» y ahí encontraremos todos los datos de las personas que nos han contactado.

Si no queremos hacer uso de esta libreta, podemos instalar el plugin: Disable Flamingo Addressbook. Este plugin evita que estos datos se guarden en la base de datos, aligerando así su tamaño.

Mensajes

En este mismo menú, podemos encontrar un enlace a los mensajes guardados. Aquí es donde encontraremos todos los mensajes que se han guardado.

Hay veces que necesitamos crear formularios con muchos campos, pero que no todos los campos se tengan que mostrar a la vez. En algunas situaciones necesitamos que los campos aparezcan/desaparezcan dependiendo de las respuestas del usuario.

Gracias al plugin Contact Form 7 – Conditional Fields, podremos crear este tipo de campos condicionales.

Configuración

Una vez hemos instalado y activado el plugin, nos aparecerá un enlace en el menú: Contacto » Conditional Fields

En esta página encontramos lo siguiente:

Entre estos ajustes tenemos:

• Default Animation Settings: podemos configurar si queremos que haya una animación y su duración.

• Conditional Fields PRO: este plugin es gratuito, pero cuenta con una versión PRO con opciones más avanzadas.

• Advanced Settings: nos permite definir si queremos ver los campos condicionales con los estilos del plugin o en modo texto (recomendable si tenemos muchos campos condicionales)

Crear campos condicionales

A la hora de crear/editar uno de nuestros formularios, ahora nos aparecerá un grupo de campos llamado «Conditional Fields Group»

Este campo nos crea una especie de «grupo» donde podremos añadir los textos y campos que queramos. Funcionará como una especie de «contenedor».

Para este ejemplo, haremos lo siguiente:

• Crearemos un campo para preguntar si contacta como empresa

• Crearemos un campo y le añadiremos un par de campos pidiendo el nombre de la empresa y el teléfono

Los campos que están dentro del grupo «grupo-empresa» no estarán visibles en nuestra web.

Crear la condición

Una vez tenemos «el gatillo» y los «campos ocultos», tenemos que crear la funcionalidad que hará que estos campos aparezcan cuando el checkbox sea marcado.

Mailchimp es una de las herramientas más conocidas dentro del sector del «email marketing». Es por ello que quizás necesites poder sincronizar los datos del formulario con tu cuenta de Mailchimp.

Podríamos utilizar los formularios que nos ofrece Mailchimp pero, en esta clase, veremos cómo podemos conectar nuestro formulario de Contact Form 7 directamente con nuestra cuenta de Mailchimp.

El plugin que utilizaremos es: Contact Form 7 Extension For Mailchimp

Configuración

Una vez tenemos el plugin instalado y activado, no veremos nada diferente. Este plugin se configura en cada uno de los formularios que tengamos y creemos.

Dentro de uno de nuestros formularios, encontraremos una pestaña llamada «ChimpMatic Lite»:

Aquí podremos añadir la «API Key» de nuestra cuenta de Mailchimp para así poder sincronizar los datos.

Para encontrar estas credenciales tienes que:

• Acceder a tu cuenta de Mailchimp

• En la parte inferior izquierda, hacer clic en la imagen

• Hacer clic en «Account / Cuenta»

• Entrar en «Extras / API Keys»

• Generar una nueva API Key

Una vez tienes esa API Key, puedes añadirla al formulario. Cuando hayas metido la clave y hecho clic en el botón, te aparecerá la información necesaria para configurarlo.

Los campos básicos a rellenar son:

• Lista: a la cual quieres que se añadan los contactos

• Subscriber email: el campo que registra el email del usuario

• Subscriber name: en caso de tenerlo, el campo que registra el nombre del usuario

Pro

Este plugin es la versión gratuita del mismo. Para poder realizar cosas más avanzadas, e incluso hacer uso de configuraciones avanzadas, deberías de plantearte el uso del plugin Pro.

Pero, si solo quieres añadir gente a una lista, con este plugin, en su versión gratuita, tienes más que suficiente.

En algunas situaciones, es posible que necesitemos que los campos de nuestro formulario se rellenen de forma automática, sin necesidad de que el usuario los rellene.

Para ello, podemos utilizar el plugin: Contact Form 7 Dynamic Text Extension

Configuración

Una vez instalado y activado, no notaremos nada especial en nuestro WordPress. Pero, si accedemos a uno de los formularios de Contact Form 7, encontraremos dos campos nuevos:

• Dynamic text: un campo donde configurar nuestro texto dinámico

• Dynamic hidden: un campo donde configurar nuestro texto dinámico pero que estará oculto para el usuario

Utilizar los campos dinámicos

Estos son los pasos que tienes que seguir para poder hacer usos de estos campos dinámicos en un formulario creado con el plugin Contact Form 7.

Paso 1: crear el formulario

Como es lógico, lo primero que necesitaremos es tener un formulario creado y que sea visible en nuestra página web.

Opción básica: busca un campo a reemplazar, o crea uno nuevo

En este caso, lo que haremos es que nuestro campo de nombre sea dinámico. Sin hacer uso de este plugin, lo que podríamos hacer es poner un contenido predefinido.

El problema es que no todo el mundo se llamará «Ibon», por lo que no nos serviría de mucho.

Paso 3: añadir un campo dinámico

Lo que haremos es reemplazar el campo de nombre por uno nuevo. Para ello, borraremos el campo antiguo de nuestro y crearemos uno dinámico.

Ahora lo que queremos es mostrar el nombre del usuario de forma dinámica. Para esto, utilizaremos el shortcode que ya nos ofrece Contact Form 7:

CF7_get_current_user

Y le diremos que queremos el «display_name» del usuario:

CF7_get_current_user key='display_name'

Importante: no debemos añadir los corchetes [ ], ni tampoco utilizar dobles comillas.

Paso 4: insertar la etiqueta en el formulario

Una vez lo tenemos todo listo, hacemos clic en «Insertar» para que el campo sea añadido a nuestro formulario de contacto.

Si ahora recargamos la página del formulario, y hemos accedido con nuestro usuario, entonces veremos nuestro nombre.

Puede ser que, en nuestro proyecto, necesitemos redirigir al usuario una vez ha enviado un formulario. Quizás no nos sirva solo con el mensaje de confirmación, si no que queremos redirigirle a una página en concreto.

Para poder hacer esto, utilizaremos el plugin: Redirection for Contact Form 7

Configuración

Una vez hemos instalado y activado el plugin, lo único que tenemos que hacer es asignar la redirección a cada uno de los formularios.

Para ello, tenemos que acceder al formulario y dirigirnos a la pestaña «Actions»:

Ahora podemos escoger el tipo de «acción» que queremos realizar. Este plugin nos ofrece muchas opciones diferentes pero, en esta clase, utilizaremos la acción de «Redirect».

Una vez hemos hecho clic en «Add action», nos aparecerá una nueva acción. Haremos clic en editar para así poder configurarlo a nuestro gusto.

Podemos editar lo siguiente:

• Rule Title: el nombre de la acción.

• Use a custom URL: por si queremos utilizar una url personalizada / externa.

• Select a page: nos da la opción de escoger una página ya creada en nuestro WordPress.

• Redirect as X-WWW-Form…: nos permite pasar el formulario como tipo POST, por si queremos guardar los datos en la base de datos.

• Abrir la página en una nueva pestaña: lo que hará es hacer la «redirección» en una nueva pestaña.

• Pasar campos como parámetros: ya sean todos, o solo unos específicos, estos datos irán en la URL por lo que podremos usarlos en la nueva página redirigida.

• How many seconds to delay: cuántos segundos esperará antes de hacer la redirección

Una vez lo tenemos listo, simplemente rellenamos el formulario, le damos a enviar, y se realizará la acción que hayamos configurado.

Extensiones

Este plugin te crea una nueva pestaña de «Extensiones», y te añade enlaces en el menú. En ella nos muestran extensiones que tienen disponibles para Contact Form 7. Son extensiones «externas» y pudieran ser de pago, no tienen nada que ver con la funcionalidad de redirección.

Cuando tenemos un formulario muy extenso, es recomendable dividirlo en diferentes pasos. Esto ayuda a que el usuario no se sienta abrumado y pueda ir rellenándolo sin presión.

Para hacer formularios de pasos múltiples, usaremos el plugin: Contact Form 7 Multi-Step Forms

Configuración

Este plugin, para poder hacer que todo funcione, tiene unos pasos un poco «curiosos». Esto es lo que tenemos que hacer:

• Crear una página por cada «paso» que tendrá el formulario. Digamos que el formulario irá «saltando» de página en página.

• Crear un formulario de CF7 y situar nuestro cursor al final del mismo, debajo del botón de enviar.

• Haz clic en la opción «multistep» y, al ser el primer paso, marca la casilla de «First Step»

• En este mismo pop-up, añade la URL de lo que será el paso 2 (la página 2).

• Si es el último paso, marca la casilla «Last Step» y deja el campo de la url vacío.

• Haz clic en «Insert Tag».

• Añade el shortcode a la página que corresponde este paso / formulario.

• Haz lo mismo con el resto de pasos / formularios / páginas.

Etiquetas adicionales

Este plugin nos ofrece un par de etiquetas adicionales:

Form field: nos permite traer un campo de un formulario anterior y mostrarlo en el actual:

[multiform "your-name"]

Previous: nos permite añadir un botón para regresar al paso / formulario anterior:

[previous "Atrás"]

PRO

Este plugin cuenta con una versión PRO. Lo más destacable de esta versión es la gestión de los datos. Con esta versión de pago, los datos se almacenan en la «Session Storage», pudiendo así almacenar hasta 5MB de datos, en comparación con los 4KB de la versión gratuita.

¿Quieres poder facturar a través de tu web? Estás de enhorabuena, con los formularios de Contact Form 7, podrás cobrar desde tu web directamente con PayPal y Stripe.

Para poder hacer esto, utilizaremos el plugin: Contact Form 7 – PayPal & Stripe Add-on

Configuración

Una vez hemos instalado y activado el plugin, veremos que nos han aparecido dos enlaces en el menú principal, bajo la sección de Contacto.

Ajustes

Lo primero que tendríamos que hacer es gestionar los ajustes para poder conectar los formularios con nuestras cuentas.

Una de las opciones que tenemos es la de gestionar el idioma y la moneda que queremos utilizar.

PayPal

Con PayPal podemos gestionar los siguientes ajustes:

• Live Account: la cuenta que usarás para cobrar

• Sandbox Account: la cuenta que usarás para realizar pruebas

• Sandbox Mode: para activar o desactivar el modo pruebas

Stripe

En cuanto a Stripe, esto es lo que podemos gestionar:

• Live Publishable Key: la clave pública para cobrar

• Live Secret Key: la clave secreta para cobrar

• Test Publishable Key: la clave pública para realizar pruebas

• Test Secret Key: la clave secreta para realizar pruebas

• Sandbox Mode: para activar o desactivar el modo pruebas

• Default text Payment Successful: mensaje predefinido que se mostrará cuando el pago se haya realizado

• Default text Payment Failed: mensaje predefinido que se mostrará cuando el pago falle

Otros ajustes

Estas son las opciones que tenemos:

• PayPal Cancel URL: la url a la que se redirige al usuario si cancela el pago en PayPal

• PayPal Return URL: la url a la que se redirige al usuario una vez ha realizado el pago en PayPal

• Stripe Return URL: la url a la que se redirige al usuario una vez ha realizado el pago en Stripe

• Redirect Method: el método de cómo se realizará la redirección

• Temporary Storage Method: el método como se guardarán los datos de forma temporal

Formularios

Ya tenemos todo configurado, es hora de añadir las opciones de pago a nuestros formularios. Si vamos a nuestros formularios, veremos que ahora tenemos una nueva pestaña disponible «PayPal & Stripe».

En esta pestaña encontramos las siguientes opciones:

• Enable PayPal on this form: nos permite activar la conexión con PayPal en este formulario.

• Enable Stripe on this form: nos permite activar la conexión con Stripe en este formulario.

• Getaway Code: es necesario si vamos a utilizar las dos pasarelas de pago a la vez en este formulario. Para ello tenemos que crear un campo de tipo «menú desplegable» y configurarlo de la siguiente forma (el nombre del campo puede ser el que tú quieras). Después, pondrás el nombre del campo en este campo de Gateway:

[select metodo-pago "Pagar con PayPal|paypal" "Pagar con Stripe|stripe"]

• Email Code (opcional): es el email que le pasarás a Stripe para que cree el cliente.

• Item Description (opcional): descripción del producto/servicio.

• Item Price: PayPal permite que sea «0.00» para que así el usuario pueda poner el precio que quiera. Stripe no lo permite y requiere poner un precio.

• Item ID / SKU (opcional): este sería la «ID» del producto/servicio, es opcional.

PRO

Este plugin cuenta con unos plugins pro que hacen que puedas sacar más provecho a esta funcionalidad:

• Pro: te permite funcionalidades avanzadas como cobrar impuestos, gastos de envío, etc.

• Recurring Payments Pro: te permite crear pagos recurrentes

• Redirect & Thank You Page Pro: te permite redirigir después del pago. Recuerda que puedes utilizar un plugin gratuito para esto.

Tener formularios está muy bien… pero poder analizar envíos, errores, etc. está mejor. Para poder hacer esto, podemos utilizar el plugin: Controls for Contact Form 7 (Analytics & Tracking)

Configuración

Una vez instalado y activado el plugin, nos añadirá una pestaña de configuración en nuestros formularios. No tiene sección de ajustes generales, directamente se configura en cada formulario.

Estos son los ajustes que podemos encontrar:

• Store Form Entries: es un plugin de pago que nos recomienda instalar si queremos guardar los formularios enviados. Podemos hacer esto de forma gratuita con Flamingo.

• AJAX Submissions: desactivar el AJAX en este formulario. Importante, marcar esto haría que, cualquier otro formulario en esta misma página, tampoco tuviera el AJAX activado.

• Default CSS: si queremos desactivar el css que trae por defecto Contact Form 7.

• Automatic Formatting: si queremos quitar el formato automático de los párrafos.

• HTML5 input types: para quitar los campos con HTML5, o para forzar que los navegadores no compatibles con HTML5 puedan ser compatibles con HTML5 (requiere que el AJAX esté activado).

• Redirigir a URL: podemos definir a qué URL tiene que redirigir al usuario una vez ha completado el formulario de forma exitosa.

• Google Recatcha Language: si estamos utilizando Google reCAPTCHA, podemos definirle el idioma.

• Analytics Tracking: si queremos analizar el formulario con Google Analytics, Matomo y Facebook Pixel, generará un evento cuando se envíe el formulario.

Si queremos permitir que el usuario pueda firmar el formulario (lo que implica el documento final que se genera), entonces podemos utilizar Contact Form 7 para ello.

En este caso, utilizaremos el plugin: Contact Forms 7 Signature Addon

Configuración

Una vez hemos instalado y activado el plugin, lo único que tenemos que hacer es dirigirnos a nuestro formulario y añadir el campo de firma.

Es importante que no se te olvide añadir ese campo en la sección del email, para así poder recibirla. En el email que recibes, la firma es un enlace a un archivo.png alojado en tu WordPress.

Si el campo de la firma no se ve en tu formulario, no dudes en darle un fondo (y otros estilos):

.wpcf7-form-control-signature-wrap {

  background-color: #ffffff;

}

Zapier es una de las herramientas más conocidas para la automatización e integración de herramientas. En esta clase vemos cómo podemos conectar nuestro formulario con Zapier.

Para hacer esto, utilizaremos el plugin: CF7 to Webhook

Configuración

Es importante destacar que algo bueno que tiene este plugin es que no se conecta directamente con Zapier. Lo que hace es enviar información a un Webhook (una url). Estos webhooks pueden crearse en Zapier, o en otras muchas herramientas, por lo que no solo es útil para Zapier.

La configuración se hace a nivel de formulario:

Las opciones que tenemos son las siguientes:

• Integrate: si queremos activar la integración con un Webhook

• Webhook url: la url del webhook al que enviaremos la información. Esta url es la que nos da Zapier.

• Send email: si queremos que el email de Contact Form 7 se envíe (no solo el webhook)

• Special Mail Tags: podemos añadir «etiquetas de email» al webhook.

• Data sent to Webhook: los datos que enviamos al webhook, este no se puede editar, simplemente nos muestra lo que se enviará.

Zapier

En Zapier tenemos que crear un zap donde el gatillo es un Webhook:

A partir de ahí, podemos crear tantos gatillos como necesitemos.

¿Quieres enviar los datos del formulario en un PDF? pues estás de suerte, ya que podemos hacerlo en el formulario Contact Form 7.

Para esto, podemos usar el plugin: Send PDF for Contact Form 7

Configuración

Una vez tenemos el plugin instalado y activado, tenemos que dirigirnos a la página de ajustes del plugin. Eso lo podemos encontrar en el menú de Contacto » Send PDF with CF7.

Ajustes generales

• ¿Desactivar la generación del PDF? para que podamos activar o desactivar el envío del PDF

• ¿Quién envía el archivo PDF? no está bien traducido, aquí escogemos a quién se le envía el PDF

• ¿Desactivar el envío de datos en una base de datos? desactivar que se guarde en la base de datos

• ¿Desactivar la generación del archivo CSV? para que podamos activar o desactivar el envío del CSV

• ¿Quién envía el archivo CSV? no está bien traducido, aquí escogemos a quién se le envía el CSV

• Cambiar el separador del CSV

• Introduce un nombre para tu PDF por defecto, el nombre del archivo será «document-pdf»

• ¿Cambiar la carpeta de subidas? por defecto, el nombre de la carpeta de subidas está en /wp-content/uploads/AÑO/MES/

• ¿Eliminar todos los archivos dentro de esta carpeta de subidas? por si queremos que siempre esté vacía y solo con un único PDF

• ¿Eliminar cada archivo PDF después de enviar el correo electrónico? por si es una carpeta con más contenidos y solo queremos eliminar el PDF creado

• ¿Otros archivos adjuntos? por si queremos adjuntar más archivos, compartimos su url

• ¿Quién envía el archivo adjunto? no está bien traducido, aquí escogemos a quién se le envía el archivo adjunto

• Selecciona una página a mostrar después de enviar el formulario opcional

• ¿Enviar un correo electrónico sin adjuntos? por si queremos enviárselo a un tercero

• ¿Redirigir directamente al PDF después de enviar el formulario?

• ¿Enviar un archivo ZIP en lugar de un PDF?

• Selecciona un formato de fecha y hora

• ¿Desactivar los saltos de línea automáticos?

• ¿Desactivar el completar automáticamente el formulario?

• ¿Activar la visualización de datos de casilla de verificación o botón de selección única de tu archivo PDF?

• ¿Activar formularios PDF rellenables?

• ¿Proteger tu archivo PDF? Usa la etiqueta [pdf-password] en tus correos electrónicos

• ¿Generar y usar una contraseña aleatoria?

• ¿Número máximo de caracteres para la contraseña? por defecto 12

Diseño del PDF

• Diseño del PDF: podemos añadir nuestro logo y una imagen de fondo. Podemos configurarlo para que aparezca solo en la página principal o en todas.

• CSS personalizado: para que podamos editar el estilo a nuestro gusto

• Pie de página: para añadir información en el pie de cada página

• Personaliza tu PDF: podemos personalizar el tamaño de la hoja, la fuente y su tamaño, ajustar los márgenes, y el contenido que llevará el PDf.

Una vez tengamos todo listo, los PDF se enviarán de la forma que lo hayamos configurado.

Para publicar un nuevo post, tenemos que acceder al wp-admin y crear el post. Pero, pudiera ser, que necesitemos poder publicar posts desde el frontend. Recuerda que un post no es solo un artículo, podrían ser diferentes tipos de post, como alertas, novedades, noticias, etc.

Para poder hacer esto, utilizaremos el plugin: Post My CF7 Form

Configuración

Una vez instalado y activado el plugin, si nos dirigimos a los formularios de contacto, veremos que han aparecido un par de columnas nuevas:

• Shortcode: ahora cuenta con una «cf7key». Esto permite que el formulario siempre tenga el mismo «nombre» y que no solo sea identificable por ID. ¿Por qué es esto útil? porque si, por ejemplo, desarrollas en local, es probable que la ID del formulario sea diferente a la ID del formulario en el servidor.

• Form key: es «el nombre» del formulario

• Formulario al Entrada: la traducción no está muy bien, pero es donde podemos definir dónde se publicará el post que creemos a través del formulario.

Crear el formulario

Probablemente no queramos publicar los mensajes que nos envían al formulario de contacto como tal. Es por ello que deberíamos crear un formulario solo para la función de publicar nuevas entradas.

Los campos que creemos, tienen que estar pensados para ser los campos del post que creemos.

Establecer los campos

Una vez tenemos los campos creados, tenemos que sincronizar los campos del formulario con los campos del post.

En este caso, los campos son los siguientes:

• Título de la entrada = post-title

• Slug de la entrada = post-slug

• Autor de la entrada = ninguno = el autor será el usuario logueado que envía el formulario

• Contenido de la entrada = post-content

• Extracto de la entrada = post-excerpt

Es importante destacar que estos campos son los que nosotros hemos creado, vosotros tendréis otros campos u otros nombres.

Campos personalizados y categorías

Podemos crear campos personalizados para los posts, al igual que podemos crear un campo para que se puedan añadir categorías al post.

Lo único que tenemos que hacer es hacer clic en el icono «+» y asignar dichos campos.

Crear o utilizar CPT

El último ajuste que tenemos que hacer es el decidir si crearemos un Custom Post Type personalizado para ese formulario, o si utilizaremos uno que ya existe.

Si escogemos «Nueva entrada», podremos establecer los ajustes básicos de un CPT. Si por el contrario, escogemos «Entrada existente», podremos escoger de unos de los CPT existentes (por ejemplo, Post o Página).

Publicar formulario

Una vez lo tenemos todo listo, lo único que tenemos que hacer es publicar el formulario en la página que vayamos a utilizar.