Personnalisation du style PDF lors de l'impression d'une entrée

Souhaitez-vous personnaliser l'apparence de vos entrées lors de leur impression ? WPForms inclut un style de base pour l'aperçu des entrées de formulaire. Cependant, avec un petit extrait PHP et quelques règles CSS, vous pouvez facilement ajouter votre propre style avant d'imprimer.

Dans ce tutoriel, nous vous expliquerons comment personnaliser l'aperçu des entrées PDF de WPForms.

Création du formulaire

Tout d'abord, vous devrez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au constructeur de formulaires. Dans le constructeur de formulaires, ajoutez les champs nécessaires à votre formulaire.

Notre formulaire est un formulaire d'inscription de cours qui acceptera les demandes d'inscription à des cours particuliers. Nous avons donc les champs de formulaire Nom, E-mail, Liste déroulante (pour sélectionner le cours), Nombres (pour le nombre de personnes s'inscrivant au cours), Date / Heure (pour sélectionner la date demandée du cours) et Texte de paragraphe.

Création et téléchargement de la feuille de style

Ensuite, nous allons créer une feuille de style dédiée et ajouter nos styles personnalisés à ce fichier .css.

Une fois que vous avez créé les règles CSS, il est temps de les télécharger à l'aide de FTP ou d'un plugin de type FTP dans le répertoire de thèmes de votre site.

Nous utiliserons du CSS pour modifier les étiquettes, ce que l'utilisateur a saisi dans le champ, le titre, la bordure de l'entrée et la couleur d'arrière-plan du corps.

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

Une fois le fichier CSS téléchargé, vous devrez copier l'URL de ce fichier, car nous en aurons besoin pour l'étape suivante.

Ajout du code pour personnaliser l'impression d'une entrée

Maintenant, la dernière étape consiste à ajouter l'extrait de code qui pointera vers notre feuille de style. Si vous avez besoin d'aide pour ajouter des extraits de code, veuillez consulter ce tutoriel.

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

Maintenant, lorsque vous imprimerez vos entrées, vous verrez votre nouveau style personnalisé.

Questions fréquemment posées

Ci-dessous, nous avons répondu à certaines des questions les plus fréquentes sur la personnalisation de l'aperçu d'impression des entrées WPForms.

Comment puis-je ajouter plus d'espacement dans la vue d'impression ?

Vous pouvez ajouter du rembourrage, des marges et des largeurs à n'importe quel élément de la vue d'impression en utilisant simplement cet extrait.

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

C'est tout ! Vous savez maintenant comment personnaliser l'aperçu d'impression de WPForms avant d'imprimer vos entrées.

Ensuite, souhaitez-vous également personnaliser les styles de l'extension Conversational Forms ? Consultez notre tutoriel sur comment mettre en file d'attente une feuille de style pour Conversational Forms.