Cómo crear un formulario de inscripción con pagos

Cada vez es más frecuente que los trámites administrativos de cualquier tipo se hagan online. La tecnología ha progresado a tal nivel que no hace falta ser un banco o la administración pública para poder gestionar trámites online de forma sencilla, tanto para el que necesita gestionar los trámites como para el que luego los usa.

Uno de los trámites más frecuentes es el alta o inscripción en cualquiera de sus formas. Ya se una inscripción en un curso, la inscripción en un evento, comprar las entradas para unas sesiones, vender entradas para un congreso, o el alta en una asociación… cualquier tipo de formulario de inscripción puede hacerse de forma muy sencilla, si dispones de un WordPress.

Además añadimos algo que es de interés en la mayoría de los casos, la necesidad de pagar para formalizar la inscripción. Por ejemplo, si no se paga el curso, no te puedes inscribir él.

Separaremos este manual en dos partes diferenciadas, la primera indicando cómo podéis realizar lo que es el formulario, que envía la información. La segunda, indicando cómo se puede hacer el pago asociado a dicho formulario, es decir, cómo se gestiona el pago que formaliza la inscripción.

Cómo crear un formulario de inscripción

Lo primero que necesitas tener es un WordPress autoalojado. Es decir, un sistema gestor de contenidos WordPress que esté instalado en un servidor. Sé que en WordPress.com también hay planes que permiten instalar plugins a voluntad. En tal caso también os valdría pero básicamente lo que necesitamos es:

  • Una instalación de WordPress
  • La posibilidad de instalar plugins

WordPress es un sistema gestor de contenidos extremadamente popular, pero que no incluye en su núcleo, en su instalación básica, ningún mecanismo para crear formularios. A muchos les parecerá algo necesario en cualquier tipo de web (¿quién no tiene un formulario de contacto?) pero no se incluye por dos motivos:

  • Porque hay webs que no necesitan ningún tipo de formulario y el núcleo de WordPress tiene que satisfacer solamente las necesidades comunes a todos los usuarios (para el resto ya están los plugins)
  • Porque los formularios tienen una casuística tal que la solución que aportarían no resolvería todas las necesidades y sin embargo en el mercado de plugins hay tal cantidad, variedad y calidad de plugins que sí las resuelven

El plugin elegido es Contact Form 7. No es el plugin más bonito pero es completo, es el más usado (por algo lo será) y no necesitaréis ninguna versión premium de este para poder recibir pagos. Otras opciones interesantes como WPForms a pesar de ser populares requieren de versión de pago para poder recibir pagos.

Instalar Contact Form 7

Esta parte podréis ignorarla muchos y seguir al resto porque probablemente muchos lo tengáis ya instalado y activado en vuestro sitio. Por si acaso no es así, os digo los pasos a seguir:

  1. Dentro del administrador de WordPress, del escritoro, con un rol que pueda instalar plugins (como el administrador)
  2. Os dirigís a Plugins
  3. Le dais a “Añadir nuevo”
  4. Buscáis “contact form” y os aparecerá “Contact Form 7”
  5. Le dáis a instalar y luego a activar y listo

Crear el formulario de inscripción de un curso

Llegados a este paso, una vez instalado y activado si os fijáis en el panel del escritorio de tu WordPress, aparece una opción nueva: “Contacto” con un icono con un sobre. Haciendo clic en él veremos los formularios de contacto que tengamos en nuestro sistema.

Nada más instalar, tendréis uno que tendrá lo básico: nombre, email, asunto, mensaje y el botón para enviar. Vamos a usar ese como base para generar uno más completo donde simularemos la inscripción en un curso de idiomas, pudiendo el usuario indicar sus datos y el curso en el que quiere inscribirse (inglés, francés, italiano o alemán).

Voy a copiaros y pegaros el contenido del formulario, que deberéis situar en la caja bajo el título. Es el que vamos a usar de ejemplo. Es muy sencillo pero es completo para lo que queremos mostrar. Si queréis añadir más campos al formulario y no tenéis claro como funciona cada uno de ellos podéis buscar en Google que hay mucha documentación sobre el tema y es algo que se nos escapa del objetivo de este tutorial.

<label> Tu nombre
    [text* your-name] </label>

<label> Tu correo electrónico
    [email* your-email] </label>

<label> En qué curso vas a inscribirte
    [select curso "Inglés" "Francés" "Italiano" "Alemán"] </label>

[submit "Enviar"]

El resultado será básicamente algo así:

Ahora os preguntaréis, qué cómo podéis insertarlo en una página o entrada de vuestra web, puedes depende:

  • Siempre podréis usar el shortcode que se genera bajo el título, que es algo así:
    [contact-form-7 404 "No encontrado"]
  • Si usáis Gutenberg, el editor de bloques de WordPress, hay un bloque para Contact Form 7
  • En otros maquetadores visuales estilo Divi, Elementor o WP Bakery suele existir un widget para poder colocar el formulario

Introducís el formulario, publicáis la página (o entrada) y lo tendréis listo.

Correo enviado por Contact Form 7

Siempre que usáis CF7 además de cómo se ve el formulario y de los datos que tiene, tenéis una pestaña “Correo” donde configuramos los correos que se envían.

En este caso podríamos dejarlo como os muestro en el pantallazo, para hacerlo coherente con el resto de esta explicación:

Añadiendo el plugin de pagos al formulario de inscripción

Ahora toca la parte del pago, la idea es la siguiente:

  1. El alumno rellena sus datos
  2. Se le dirige al banco donde puede pagar

¿Cómo podemos hacer eso? Pues lo primero que necesitaremos es una pasarela de pago. Puede ser de cualquiera de las dos pasarelas que se manejan en España, RedSys y Ceca.

Una vez tengáis el plugin tenéis que instalarlo y activarlo. En este caso al ser plugins premium el protocolo es ligeramente diferente:

Configurar los datos de la pasarela en Contact Form 7

  1. Una vez comprado el plugin, obtendremos un fichero comprimido
  2. Nos dirigimos a “Plugins”, “Añadir nuevo” y en lugar de buscar en el buscador, le damos a “Subir plugin”
  3. Elegimos el fichero recién descargado, lo subimos, y luego activamos
  4. Al comprarlo se nos habrá generado una licencia, la copiamos y la pegamos en el recuadro que aparece dentro de la página a la que nos lleva el enlace que hay en la parte superior que dice “Gestionar licencia del plugin”

Dependiendo de si habéis elegido RedSys o Ceca, dentro del menú “Contacto” os habrá aparecido una opción nueva que dirá “Opciones RedSys” u “Opciones Ceca”. Si sois usuarios de RedSys también tendréis “Opciones Bizum” si vuestra pasarela soporta el pago por Bizum.

¿Qué debéis rellenar ahí? Los datos propios de de la pasarela, igual que los rellenaríais si estuvierais configurando RedSys o Ceca en WooCommerce, es decir: FUC, clave de encriptación, número de terminal, etc. si usáis RedSys y código de entidad, código de comercio, terminal, clave, etc. si usáis Ceca.

Estos datos os los ofrece el banco y os los proporciona cuando contratáis un TPV electrónico.

Añadiendo el pago a la inscripción

El resto del artículo lo seguiremos basándonos en el plugin de RedSys y Bizum para Contact Form 7. El plugin de Ceca es equivalente en casi todo, así que la explicación os valdrá. Cuando digo casi todo me refiero a que no tiene tantas opciones disponibles (ahora mismo), aunque sí las que necesitaréis para hacer un pago de una inscripción como esta.

Si os fijáis, al editar el formulario aparecerá una pestaña nueva llamada RedSys. Para editar el formulario recordad que tenéis que ir a “Contacto” dentro del escritorio de WordPress y en el listado de formularios que aparecen, elegir el que estamos usando.

Os enseño cómo sería una configuración básica para recibir pagos en ese formulario, no paso a explicar el detalle de cada campo porque lo creo bastante auto explicativo aunque si tenéis dudas podéis escribirnos a los comentarios:

¿Esto qué provocará? Pues que al enviar el formulario, nos lleve al banco a pagarlo, con los datos que hemos proporcionado:

Pero bueno, esto no termina aquí, una vez termina el pago el usuario (o no) tendremos en la opción “Pagos – RedSys CF7” dentro del escritorio de WordPress. ¿Qué aparece ahí?

  • Un listado de todos los pagos enviados
  • Donde aparte de los datos propios del pago: si se ha pagado o no, el ID de transacción en RedSys, el momento del pago
  • Aparecerán el resto de datos que se han enviado en el formulario

Veremos las tres partes al ver el detalle del pago:

Datos económicos del pago
Email y nombre del pagador aparte del concepto enviado al banco
Datos del formulario enviado con el pago

Diferentes precios para cada curso u opción

Si queréis que cada curso tenga un precio diferente y que no sea siempre el mismo, solo tendréis que hacer lo siguiente:

<label> En qué curso vas a inscribirte
    [select curso clave-valor "Inglés (100€)|100" "Francés (150€)|150" "Italiano (200€)|200" "Alemán (300€)|300"] </label>

Los clientes verán así ahora el campo:

Y dentro de la configuración del pago en vez de poner la cantidad, poner la variable:

Si os fijáis, ahora al poner lo de clave-valor, partimos cada opción en dos cosas:

  • [curso] que tiene la cantidad, el número, por ejemplo 150
  • [curso_text] que tiene el texto que ve el usuario en el formulario, por ejemplo “Francés (150€)”

Posibilidad de pagar con Bizum

También podemos ofrecer la posibilidad de pagar con Bizum si tu pasarela lo soporta, que suele ser lo más normal si usas RedSys. Lo primero es rellenar los datos de “Opciones Bizum” con los mismos que hemos puesto en “Opciones RedSys”

Dentro del formulario añadimos un campo para que puedan elegir:

<label> ¿Cómo quieres pagar?
    [radio perfil clave-valor "Tarjeta de crédito o débito|Primero" "Bizum|Bizum"] </label>

Que en el formulario se verá así:

Y dentro de la configuración del pago en el formulario, en donde aparecía “Perfil” que los dejábamos vacío, ahora pondremos [perfil] en vez de dejarlo vacío y al pagar si se elige Bizum te llevará al pago en esta plataforma:

Como veis, las posibilidades que se nos abren son enormes. Montar un WooCommerce o incluso un Easy Digital Downloads para multitud de propósitos no tiene mucho sentido porque son comercios orientados más a un proceso completo de compra:

  • Con un catálogo
  • Con envíos
  • Con búsquedas, descuentos, regalos, etc.

Y muchas veces, lo que queremos es simplemente:

  • Recoger unos datos
  • Procesar un pago

Y a problemas más sencillos, debemos aplicar soluciones más sencillas que faciliten la vida no solo al que crea la solución, sino también al usuario, que ve como envía unos datos y paga sin necesidad de andar añadiendo cosas a un carrito y pasando por una serie de pasos que no corresponden al proceso que él espera ver.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

Almacenamos las IPs desde la que se envían las valoraciones para evitar fraudes

Carrito