### [Cómo añadir un enlace de impresión a tus formularios](https://wpforms.com/developers/how-to-add-a-print-link-to-your-forms/)
**Publicado:** 14 de diciembre de 2021
**Autor:** Umair Majeed
**Extracto:** Este tutorial te mostrará cómo añadir un enlace de impresión a tus WPForms utilizando un campo de formulario HTML y un poco de HTML.
**Contenido:**
¿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ú predeterminado **Archivo**, 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](https://wpforms.com/docs/creating-first-form/).
## 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:
```
Imprimir esta página
```
Este código crea un simple enlace de texto 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, puedes ver que justo encima del botón **Enviar** hay un enlace para imprimir el formulario.
## Estilizar 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:
```
Imprimir esta página
```
Luego, añade este CSS a tu sitio. Si necesitas ayuda para añadir CSS personalizado, por favor revisa nuestra guía sobre [cómo añadir CSS personalizado](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/).
```
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;
}
```
## Imprimir 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 {
/* solo estilos de impresión aquí */
#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 formulario](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/#locating-the-field-id).
Para aplicar esto a todos los formularios, usa:
```
@media print {
/* solo estilos de impresión aquí */
.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](https://wpforms.com/developers/how-to-display-shortcodes-inside-the-html-field/ "Cómo mostrar shortcodes dentro del campo HTML").
**Categorías:** Extensión
**Etiquetas:** CSS, HTML
---