PDF-Styling beim Drucken eines Eintrags anpassen

Möchten Sie das Erscheinungsbild Ihrer Einträge beim Drucken anpassen? WPForms bietet grundlegende Stile für die Vorschau von Formulareinträgen. Mit einem kleinen PHP-Snippet und einigen CSS-Regeln können Sie jedoch ganz einfach Ihre eigenen Stile vor dem Drucken hinzufügen.

In diesem Tutorial führen wir Sie durch die Anpassung der PDF-Vorschau von WPForms-Einträgen.

Erstellen des Formulars

Zuerst müssen Sie ein neues Formular erstellen oder ein vorhandenes bearbeiten, um auf den Formular-Generator zuzugreifen. Gehen Sie im Formular-Generator die notwendigen Felder zu Ihrem Formular hinzu.

Unser Formular ist ein Klassenanmeldeformular, das Anfragen zur Anmeldung für bestimmte Klassen entgegennimmt. Daher haben wir die Formularfelder Name, E-Mail, Dropdown (zur Auswahl der Klasse), Zahlen (für die Anzahl der Personen, die sich für die Klasse anmelden), Datum / Uhrzeit (zur Auswahl des angeforderten Datums der Klasse) und Absatztext.

Erstellen und Hochladen des Stylesheets

Als Nächstes erstellen wir ein dediziertes Stylesheet und fügen unsere benutzerdefinierten Stile zu dieser .css-Datei hinzu.

Sobald Sie die CSS-Regeln erstellt haben, ist es an der Zeit, sie mit FTP oder einem FTP-Plugin in das Theme-Verzeichnis Ihrer Website hochzuladen.

Wir verwenden CSS, um die Labels, die vom Benutzer eingegebenen Werte, den Titel, den Rahmen des Eintrags und die Hintergrundfarbe des Körpers zu ändern.

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

Nachdem die CSS-Datei hochgeladen wurde, müssen Sie die URL zu dieser Datei kopieren, da wir diese für den nächsten Schritt benötigen.

Hinzufügen des Codes zur Anpassung des Druckens eines Eintrags

Nun ist der letzte Schritt das Hinzufügen des Code-Snippets, das auf unser Stylesheet verweist. Wenn Sie Hilfe beim Hinzufügen von Code-Snippets benötigen, sehen Sie sich bitte dieses Tutorial an.

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

Wenn Sie nun Ihre Einträge drucken, sehen Sie Ihr neues benutzerdefiniertes Styling.

Häufig gestellte Fragen

Unten haben wir einige der häufigsten Fragen zur Anpassung der Druckvorschau von WPForms-Einträgen beantwortet.

Wie kann ich mehr Abstand in der Druckansicht schaffen?

Sie können Abstände, Ränder und Breiten für alles in der Druckansicht hinzufügen, indem Sie einfach diesen Ausschnitt verwenden.

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

Das war's! Jetzt wissen Sie, wie Sie die Druckvorschau von WPForms anpassen, bevor Sie Ihre Einträge drucken.

Möchten Sie als Nächstes auch die Stile im Add-on  Conversational Forms  anpassen? Schauen Sie sich unser Tutorial an, wie Sie ein Stylesheet für Conversational Forms einbinden.