Personalizando o Estilo do PDF ao Imprimir uma Entrada

Gostaria de personalizar a aparência das suas entradas ao imprimi-las? O WPForms inclui estilos básicos para a visualização de entradas de formulário. No entanto, com um pequeno trecho de PHP e algumas regras CSS, você pode facilmente adicionar seus próprios estilos antes de imprimir.

Neste tutorial, vamos guiá-lo sobre como personalizar a visualização de PDF de entradas do WPForms.

Criação do Formulário

Primeiro, você precisará criar um novo formulário ou editar um existente para acessar o construtor de formulários. No construtor de formulários, prossiga e adicione os campos necessários ao seu formulário.

Nosso formulário é um formulário de registro de classe que aceitará solicitações para inscrição em aulas específicas, então temos os campos de formulário Nome, Email, Dropdown (para selecionar a classe), Números (para quantas pessoas estão se inscrevendo na classe), Data / Hora (para selecionar a data solicitada da classe) e Parágrafo.

Criação e Upload da Planilha de Estilos

Em seguida, criaremos uma planilha dedicada e adicionaremos nossos estilos personalizados a este arquivo .css.

Depois de criar as regras CSS, é hora de enviá-las usando FTP ou um plugin do tipo FTP para o diretório de temas do seu site.

Usaremos CSS para alterar os rótulos, o que o usuário inseriu no campo, o título, a borda da entrada e a cor de fundo do corpo.

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;
}

Depois que o arquivo CSS for enviado, você precisará copiar o URL para este arquivo, pois precisaremos dele para a próxima etapa.

Adicionando o Código para Personalizar a Impressão de uma Entrada

Agora, a etapa final é adicionar o trecho de código que apontará para nossa planilha de estilos. Se precisar de ajuda para adicionar trechos de código, por favor, veja 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 );

Agora, quando você for imprimir suas entradas, verá sua nova estilização personalizada.

Perguntas Frequentes

Abaixo, respondemos a algumas das principais perguntas sobre a personalização da visualização de impressão de entradas do WPForms.

Como posso fornecer mais espaçamento na visualização de impressão?

Você pode adicionar preenchimento, margens e larguras a qualquer coisa na visualização de impressão apenas usando este trecho.

/*
 * 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);

É isso! Agora você sabe como personalizar a visualização de impressão do WPForms antes de imprimir suas entradas.

Em seguida, você também gostaria de personalizar os estilos no add-on de Formulários Conversacionais? Dê uma olhada em nosso tutorial sobre como enfileirar uma planilha de estilos para Formulários Conversacionais.