Cómo añadir un enlace de impresión a tus formularios

¿Quieres permitir que los usuarios impriman tus formularios para completarlos sin conexión? Aunque los navegadores ofrecen funcionalidad de impresión integrada a través del menú Archivo predeterminado, añadir un botón o enlace de impresión dedicado puede mejorar la experiencia del usuario.

Esta guía te mostrará cómo añadir una opción de impresión directamente a tus formularios utilizando código HTML sencillo.

Configuración de tu formulario

Primero, crea un formulario y añade los campos deseados. Si necesitas ayuda para crear tu formulario, por favor revisa nuestra guía sobre cómo crear tu primer formulario.

Añadir el enlace de impresión

A continuación, añade un campo HTML a tu formulario. Dentro de este campo, añade el siguiente código:

<a href="#" onClick="window.print()">Print this page</a>

Este código crea un enlace de texto sencillo que activa el cuadro de diálogo de impresión del navegador al hacer clic. El href="#" evita la redirección de página, mientras que onClick="window.print()" llama a la función de impresión del navegador.

Una vez que hayas guardado el formulario, podrás ver que justo encima del botón Enviar hay un enlace para imprimir el formulario.

Estilo de tu enlace de impresión (Opcional)

Para que tu enlace de impresión se parezca más a un botón, puedes añadir estilos personalizados. Primero, modifica tu HTML para incluir una clase CSS:

<a class="print_link" href="#" onClick="window.print()">Print this page</a>

Luego, añade este CSS a tu sitio. Si necesitas ayuda para añadir código personalizado, por favor revisa nuestra guía sobre cómo añadir código personalizado.

a.print_link {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: #B95D6A;
    color: #ffffff;
    border: 1px solid #b95d6a;
    transition: all 0.2s ease-in-out;
}

a.print_link:hover {
    background-color: #ffffff;
    color: #b95d6a;
}

Impresión de formularios de varias páginas

Si tu formulario utiliza saltos de página, necesitarás CSS adicional para asegurar que todas las páginas se impriman correctamente. Añade este CSS a tu tema:

@media print {
    /* print only styles here */
    #wpforms-form-1000 .wpforms-page {
        display: block !important;
    }
}

Recuerda reemplazar 1000 con el ID de tu formulario. Si necesitas ayuda para encontrar el ID de tu formulario, por favor consulta nuestra guía sobre cómo localizar IDs de formularios.

Para aplicar esto a todos los formularios, usa:

@media print {
    /* print only styles here */
    .wpforms-page {
        display: block !important;
    }
}

También puedes usar estos estilos de impresión para ocultar elementos como la barra lateral, el pie de página o la cabecera al imprimir.

¡Y eso es todo lo que necesitas! ¿Te gustaría saber cómo usar shortcodes dentro de estos campos de formulario HTML? Consulta nuestro tutorial sobre Cómo mostrar shortcodes dentro del campo HTML.