Personalizar el estilo de los PDF al imprimir una entrada

¿Le gustaría personalizar la apariencia de sus entradas al imprimirlas? WPForms incluye estilos básicos para la vista previa de las entradas del formulario. Sin embargo, con un pequeño fragmento de PHP y algunas reglas CSS, puede agregar fácilmente sus propios estilos antes de imprimir.

En este tutorial, le guiaremos sobre cómo personalizar la vista previa de las entradas PDF de WPForms.

Creación del formulario

Primero, necesitará crear un formulario nuevo o editar uno existente para acceder al creador de formularios. En el creador de formularios, agregue los campos necesarios a su formulario.

Nuestro formulario es un formulario de registro de clases que aceptará solicitudes para inscribirse en clases particulares, por lo que tenemos los campos de formulario Nombre, Correo electrónico, Menú desplegable (para seleccionar la clase), Números (para cuántas personas se inscriben en la clase), Fecha / Hora (para seleccionar la fecha solicitada de la clase) y Párrafo.

Creación y carga de la hoja de estilos

A continuación, crearemos una hoja de estilos dedicada y agregaremos nuestros estilos personalizados a este archivo .css.

Una vez que haya creado las reglas CSS, es hora de cargarlas usando FTP o un plugin tipo FTP en el directorio de temas de su sitio.

Usaremos CSS para cambiar las etiquetas, lo que el usuario ingresó en el campo, el título, el borde de la entrada y el color de fondo del cuerpo.

body {
    background-color: #e1f5fe;
}

#print .page-title h1 {
    color: #01579b;
}

#print .fields {
    border: 15px solid #eee;
}

#print p.field-name {
    color: #01579b;
}

#print p.field-value {
    color: #0277bd;
}

Una vez que el archivo CSS se haya cargado, deberá copiar la URL de este archivo, ya que la necesitaremos para el siguiente paso.

Añadir el código para personalizar la impresión de una entrada

Ahora, el paso final es agregar el fragmento de código que apuntará a nuestra hoja de estilos. Si necesita ayuda para agregar fragmentos de código, consulte este tutorial.

/*
 * Change the styles when printing an entry
 *
 * @link  https://wpforms.com/developers/how-to-customize-printing-an-entry/ 
 */
 
function print_page_additional_styles() {
     
   // Change this link to your stylesheet   
   $link = 'http://yoursite.com/print-wpforms-entry-stylesheet.css';
     
   //You can also echo your own custom styles by adding them inline to the top of the page
   echo '<style> body { background-color: #e1f5fe;} </style>';
     
   printf( '<link rel="stylesheet" href="%s">', $link ); 
     
}
add_action( 'wpforms_pro_admin_entries_printpreview_print_html_head', 'print_page_additional_styles', 10 );

Ahora, cuando imprima sus entradas, verá sus nuevos estilos personalizados.

Preguntas frecuentes

A continuación, hemos respondido a algunas de las preguntas más frecuentes sobre la personalización de la vista previa de impresión de entradas de WPForms.

¿Cómo puedo proporcionar más espacio en la vista de impresión?

Puede agregar relleno, márgenes y anchos a cualquier elemento en la vista de impresión simplemente usando este fragmento.

/*
 * Customize the print view with margins, padding, and widths
 *
 * @link  https://wpforms.com/developers/how-to-customize-printing-an-entry/ 
 */
 
function wpf_customize_print_entry_styles() {
  echo '<style>
  #print.wpforms-preview-mode-compact .print-item-title{
    width: 200px;
    min-width: 400px;
  }
  #print.wpforms-preview-mode-compact .print-item-title, #print.wpforms-preview-mode-compact .print-item-value{
       padding-top: 4px;
       padding-bottom: 4px;
  }
  #print .print-body{
       margin-right: 20px;
       margin-left: 20px;
  }
  </style>';
}
 
add_action('wpforms_pro_admin_entries_printpreview_print_html_head', 'wpf_customize_print_entry_styles', 10);

¡Eso es todo! Ahora sabe cómo personalizar la vista previa de impresión de WPForms antes de imprimir sus entradas.

A continuación, ¿le gustaría también personalizar los estilos en el complemento Conversational Forms ? Eche un vistazo a nuestro tutorial sobre cómo incluir una hoja de estilos para Conversational Forms.