Personalizar o Estilo 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 pré-visualização de entradas de formulário. No entanto, com um pequeno trecho de PHP e algumas regras CSS, pode facilmente adicionar os seus próprios estilos antes de imprimir.

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

Criação do Formulário

Primeiro, terá de criar um novo formulário ou editar um existente para aceder ao construtor de formulários. No construtor de formulários, prossiga e adicione os campos necessários ao seu formulário.

O nosso formulário é um formulário de registo de aulas que aceitará pedidos de inscrição em aulas específicas, pelo que temos os campos de formulário Nome, Email, Dropdown (para selecionar a aula), Números (para quantas pessoas se estão a inscrever na aula), Data / Hora (para selecionar a data solicitada da aula) e Texto de Parágrafo.

Criação e Carregamento da Folha de Estilos

Em seguida, criaremos uma folha de estilos dedicada e adicionaremos os nossos estilos personalizados a este ficheiro .css.

Assim que tiver criado as regras CSS, é hora de as carregar usando FTP ou um plugin do tipo FTP para o diretório de temas do seu site.

Usaremos algum CSS para alterar os rótulos, o que o utilizador introduziu 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 de o ficheiro CSS ter sido carregado, terá de copiar o URL para este ficheiro, pois precisaremos dele para o próximo passo.

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

Agora, o passo final é adicionar o trecho de código que apontará para a nossa folha de estilos. Se precisar de alguma 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 for imprimir as suas entradas, verá o seu novo estilo personalizado.

Perguntas Frequentes

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

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

Pode adicionar preenchimento, margens e larguras a qualquer coisa na vista 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 sabe como personalizar a pré-visualização de impressão do WPForms antes de imprimir as suas entradas.

Em seguida, gostaria de também personalizar os estilos no addon Conversational Forms? Dê uma vista de olhos ao nosso tutorial sobre como enfileirar uma folha de estilos para Formulários Conversacionais.