Celebrate WordCamp Asia 2024 with 30% OFF! Use coupon WC30 - Terms

PDFPRO

This knowledge base article relates to the WS Form PDF add-on. Included with the Agency edition or buy separately for other editions.

The PDF add-on allows you to attach a PDF file to emails, as well as export PDFs from the submissions page.

Note: The PDF add-on uses Published forms. Please ensure your form has been published before using the PDF add-on.

Installation

The WS Form PDF plugin is installed in the same way as installing the WS Form PRO plugin.

Once installed you will need to activate the license for the plugin. When you purchase the PDF plugin, you will be given a license key. If you have lost your license key(s), click here.

To activate your license key:

  1. Click WS Form in the WordPress administration menu.
  2. Click Settings.
  3. Click the ‘PDF’ tab at the top of the page.
  4. Enter your license key.
  5. Click the Activate button.

If your license key fails to activate, please ensure you are using the correct license key and not your WS Form PRO license key.

PDF Settings

Page size, page orientation, and font settings can be changed in the PDF settings tab. To access the settings:

  1. Click WS Form in the WordPress administration menu.
  2. Click Settings.
  3. Click the ‘PDF’ tab at the top of the page.
  4. Adjust the settings to suit your preferences.
  5. Click Save.

Attaching a PDF to a Send Email Action

To attach a PDF to a Send Email action:

  1. When editing your form, click the Actions icon at the top of the page. The Actions sidebar will open on the right-hand side of the page.
  2. Click the Add  icon to add a new action (or select an existing ‘Send Email’ action).
  3. Scroll down the settings until you see the ‘Attach PDF’ checkbox.
  4. Check the ‘Attach PDF’ checkbox.
  5. If you want to specify the filename of the PDF, enter it in the ‘Custom PDF filename’ setting. You can use WS Form variables in this setting. (Optional)
  6. If you want to specify a custom template to use for the PDF, enter the template filename in this setting. For example: my-custom-template.html (See Creating Custom PDF Templates below)
  7. Click the Save button at the bottom.

Now when the email is sent, a PDF attachment of your submitted data will be included with the email.

Export Submission PDFs

To create a PDF of a submission:

  1. View the submissions of a form.
  2. In the left-most column, click on ‘Export PDF’.

Adding Page Breaks

When you install the PDF add-on, a new field type will appear in the form editor field types called ‘Page Break’. Simply drag that onto your form, and a page break will appear in your PDF at that point. This is useful for formatting PDFs that are created from your form submissions. This field type does not have any settings.

Variables

The PDF add-on adds additional variables that you can use in actions such as messages, emails and in custom mapping.

Name / VariableAdditional Information
PDF Link (Download)
#pdf_link
Returns a 'Download PDF' link to the PDF.
PDF Link (View)
#pdf_link_view
Returns a 'View PDF' link to the PDF.
PDF URL (Download)
#pdf_url
Returns the URL to the PDF. URL downloads the PDF.
PDF URL (View)
#pdf_url_view
Returns the URL to the PDF. URL shows the PDF in the browser.

Creating Custom PDF Templates

The PDF add-on uses parsed HTML templates containing WS Form variables. These templates are then converted to PDF. By default, WS form will create the PDF using a template found at the following location:

<plugin root>/templates/standard.html

You can also create custom templates for each form or for each ‘Send Email’ action. We recommend copying the standard.html template to get started.

For tips on how to add fields to your HTML template, see Writing Custom HTML for Email Content and PDF Templates.

We are not able to provide HTML support for the development of custom templates using the PDF add-on.

Custom Templates By Form

To create a template that will be used by a specific form, the template should be saved to:

wp-content/uploads/ws-form/pdf/templates/<form_id>.html

So for example, for form ID 123 you would save your custom template to:

wp-content/uploads/ws-form/pdf/templates/123.html

You can find the form ID by clicking the ‘Form Settings‘  icon and looking at the top of the sidebar.

WS Form PRO - Form Settings - Form ID

Custom Templates By Send Email Action

If you want to specify a custom template for a specific Send Email action, that can be done by configuring the ‘Custom PDF Template’ setting in the Send Email action itself.

WS Form PRO - Send Email Action - Custom PDF Template

In the example above the template would be located at:

wp-content/uploads/ws-form/pdf/templates/my-template.html

Note that the ‘Export PDF’ link on the submissions page will always use the standard template or the form specific template.

How a PDF is Created

The add-on uses the popular dompdf converter to transform the parsed HTML template in a PDF document. Please refer to their online help for guidance on formatting a PDF document.

Standard Template

The standard template code is as follows:

<!DOCTYPE html>
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>#blog_name</title>

<style>

    body{

        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%
        -webkit-font-smoothing: antialiased;
        background-color: #ffffff;
        font-family: #pdf_default_font;
        font-size: #pdf_default_font_size;
        line-height: 1.4;
        margin: 0;
        padding: 0;
    }

    h1, h2, h3, h4 {

        font-weight: bold;
        margin: 0;
        margin-bottom: 10px;
    }

    h1 {

        font-size: 24px !important;
    }

    h2 {

        font-size: 22px !important;
    }

    h3 {

        font-size: 20px !important;
    }

    h4 {

        font-size: 18px !important;
    }

    div.wsf-field,p,li,td,span,a {

        font-weight: normal;
        margin: 0;
        margin-bottom: 10px;
    }

    svg, img {

        max-width: 100%;
    }

    img[data-type="signature"] {

        max-height: 100px;
    }

</style>

</head>

<body>

#email_submission

</body>

</html>