Cómo incluir una firma digital en formularios de Contact Form 7
Cada vez es más habitual querer integrar un formulario en nuestra web que los clientes puedan rellenar y firmar. Si alguna vez has tenido la necesidad de realizar esta acción y no has sabido cómo hacerlo, sigue leyendo. Y es que en este post, te voy a explicar exactamente eso, cómo incluir una firma digital en imagen en tus formularios de Contact Form 7.
¡Vamos a meternos en faena!
Antes de nada, te pongo un ejemplo basado en un caso real para que lo entiendas mejor: Miguel es un cliente que tiene un negocio deportivo, y me llamó para comentarme un problema. Cada vez que alguien quiere alquilar alguna de sus pistas de pádel para padres e hijos, debe firmar un documento de normas y uso de las instalaciones. Hasta ahora, este trámite se realizaba en el punto de acceso, pero se quiere evitar debido a las colas que se generan.
Después de analizar la situación, decidí proponerle a Miguel la opción de llevar a digital el documento de esas normas, permitiendo que sus clientes optimizar ese tiempo y facilitar el acceso. A continuación te comento los pasos para realizarlo.
Paso 1: Instala el plugin de firma digital para formularios CF7
Asumiendo que ya tenemos un formulario con los datos de las normas y las etiquetas habituales (como nombre, DNI, edad, teléfono), vamos a complementarlo con la firma digital en imagen. Lo primero que necesitamos es instalar el plugin Contact Form 7 Signature Addon. Su configuración es muy sencilla y te permitirá integrar este campo sin complicaciones.
Te explico cómo hacerlo:
- Accede a tu panel de WordPress y dirígete a la sección de Plugins.
- En la opción de añadir nuevo, busca Contact Form 7 Signature Addon.
- Instala el plugin y no olvides activarlo.
Paso 2: Añade el campo de firma digital a tu formulario
Ahora que ya tienes el plugin, es hora de añadir el campo de firma digital a tu formulario. Así es cómo se hace:
- Desde el menú de WordPress, ve a Contact Form 7.
- Selecciona el formulario que quieres modificar. Aquí puedes incluir las normas del documento y los campos que debe rellenar el cliente, asegurándose de que la versión offline no difiera mucho de la online.
- En el cuadre del formulario, verás un nuevo botón llamado Digital Signature. Haz clic en él, edita el nombre si lo deseas y ajusta el tamaño del cuadro de la firma según tu diseño o preferencias.
- Luego, haz clic en Insertar etiqueta.
Verás una nueva etiqueta en el formulario. Si la revisas, notarás que «signature-739» es el nombre de la etiqueta, y el resto corresponde a la configuración de diseño que hemos definido.
Paso 3: Incluye la nueva etiqueta en la pestaña Correo
Para poder recibir la información del cliente de forma adecuada, debes incluir la etiqueta que hemos creado, en el cuerpo del mensaje que encontrarás en la pestaña de Correo. Puedes darle un toque personal, como poner la descripción en negrita. Si decides hacerlo, asegúrate de activar la opción «Usar contenido de tipo HTML».
Paso 4: Prueba tu formulario
¡Y casi estamos terminando, pero ya puedes decir que has aprendido a cómo añadir una firma digital en un formulario de Contact Form 7!
Paso 5: Muestra la firma en el correo electrónico
Un último paso importante: si no ajustamos la configuración, cuando recibas el correo, la firma digital en imagen aparecerá como una URL de la imagen guardada en tu galería de medios. Aquí te muestro cómo se vería si no hacemos la modificación.
Para solucionarlo, edita el campo en la pestaña de «Correo» con el siguiente código:
<b>Firma:</b>
<img src=»[signature-739]»></code>
<b>Firma:</b>
<img src="[signature-739]"></code>
Así, recibirás la imagen de la firma visible en el cuerpo del correo en lugar de una URL. Y de paso vemos que con un poco de diseño queda mucho mejor el correo.
Paso 6: Localiza la información de tus clientes
Es bien fácil. En el momento que un usuario rellena el formulario, tu recibes toda esa información vía correo electrónico en la dirección que hayas configurado en CF7.
Por último me queda recomendarte algunos post que son complementarios a estetema, como son el uso de Flamingo para guardar todos estos datos que recibimos en CF7, y cómo configurar un autorespondedor en Contact Form 7 para informar al cliente que has recibido la información e informarle de ofertas y similar.
Pues eso, ahora ya sabes de forma completa cómo incluir una firma digital en imagen en tus formularios de Contact Form 7. En un próximo post, te contaré cómo recibir esta información en formato PDF automáticamente con un nombre de archivo personalizado.
Espero que esta guía te haya sido útil y que puedas aplicarlo sin problemas. Si tienes alguna duda o necesitas más información, ¡no dudes en decírmelo!
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!