Personalizzazione dello stile PDF durante la stampa di una voce

Ora, l'ultimo passaggio è aggiungere lo snippet di codice che punterà al nostro foglio di stile. Se hai bisogno di aiuto per aggiungere snippet di codice, consulta questo tutorial.

In questo tutorial, ti guideremo attraverso la personalizzazione dell'anteprima PDF delle voci di WPForms.

Creazione del modulo

Innanzitutto, dovrai creare un nuovo modulo o modificarne uno esistente per accedere al generatore di moduli. Nel generatore di moduli, procedi e aggiungi i campi necessari al tuo modulo.

Il nostro modulo è un modulo di registrazione corsi che accetterà richieste di iscrizione a corsi specifici, quindi abbiamo i campi modulo Nome, Email, Menu a tendina (per selezionare il corso), Numeri (per quante persone si iscrivono al corso), Data / Ora (per selezionare la data richiesta del corso) e Paragrafo di testo.

Creazione e caricamento del foglio di stile

Successivamente, creeremo un foglio di stile dedicato e aggiungeremo i nostri stili personalizzati a questo file .css.

Una volta create le regole CSS, è ora di caricarle utilizzando FTP o un plugin di tipo FTP nella directory del tema del tuo sito.

Useremo alcuni CSS per modificare le etichette, ciò che l'utente ha inserito nel campo, il titolo, il bordo della voce e il colore di sfondo del 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;
}

Una volta caricato il file CSS, dovrai copiare l'URL di questo file poiché ci servirà per il passaggio successivo.

Aggiunta del codice per personalizzare la stampa di una voce

Ora, il passo finale è aggiungere lo snippet di codice che punterà al nostro foglio di stile. Se hai bisogno di aiuto nell'aggiunta di snippet di codice, consulta questo 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 );

Ora, quando andrai a stampare le tue voci, vedrai il tuo nuovo stile personalizzato.

Domande frequenti

Di seguito, abbiamo risposto ad alcune delle domande più frequenti sulla personalizzazione dell'anteprima di stampa delle voci di WPForms.

Come posso fornire più spaziatura nella visualizzazione di stampa?

Puoi aggiungere padding, margini e larghezze a qualsiasi elemento nella visualizzazione di stampa semplicemente usando questo snippet.

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

Fatto! Ora sai come personalizzare l'anteprima di stampa di WPForms prima di stampare le tue voci.

Successivamente, desideri anche personalizzare gli stili nell'addon Conversational Forms? Dai un'occhiata al nostro tutorial su come accodare un foglio di stile per Conversational Forms.