HTML/CSS Templates

In addition to uploading an existing PDF, you can create a new template using HTML and CSS.

Liquid

HTML templates use the Liquid markup language. This allows you to insert field values into your HTML. You can also add advanced logic, such as conditions and loops.

Learn more about Liquid.

SASS

FormAPI uses a CSS extension called SASS. SASS comes in two flavors, but we use the one that is compatible with standard CSS (SCSS).

This means that you can paste in any CSS, and it will Just Work™. SCSS also supports some powerful features, including variables and nested rules. Take a look at the SASS Guide to learn more.

Referencing Fields

Use the {{ }} syntax to insert a field value in your template.

If you have a field called "name", you can render that value in your template like this:

<h2>{{ name }}</h2>

Use a dot to access nested fields, and square brackets for arrays:

<h2>{{ person.name }}</h2>
<h2>{{ names[2] }}</h2>

Filters

When you upload an existing PDF, our template editor includes features such as date formatting, and an "uppercase" checkbox. These have been removed from our HTML template editor, because Liquid supports these features via "filters".

You can use the date filter to format a date field:

<h2>{{ date | date: "%B %-d, %Y" }}</h2>

You can use the upcase filter to convert text to uppercase:

<h2>{{ full_name | upcase }}</h2>

See some of the other filters that Liquid supports.

Images

You can upload static images under the "Images" tab. Use the template_image_url tag to get the image URL:

<img src="{% template_image_url IMAGE_ID %}" />

To include an image or signature field (i.e. submitted in an API request), you can simply use the {{ }} syntax with the field name. The value of this field will be an internal URL for the image.

<img src="{{ photograph }}" />

If you have an optional image field, you should use a condition in case the image was not provided:

{% if photograph %} <img src="{{ photograph }}" /> {% endif %}

Page Breaks

You can force content to start on a new page by using the page-break-before CSS property.

CSS:

.new-page {
  page-break-before: always;
}

HTML:

<p class="new-page">This paragraph will start on a new page.</p>

View documentation for the page-break-before, page-break-after, and page-break-inside properties.

Headers and Footers

You can add a header or footer to each page in the "Header HTML" and "Footer HTML" tabs. CSS from the SCSS tab applies to headers and footers.

You can use JavaScript to show the current page number. The following example shows how to add a footer with page numbers (e.g. Page 1 of 3):

<!DOCTYPE html>
<html>
  <head>
    <script>
      function subst() {
        var vars = {};
        var x = window.location.search.substring(1).split("&");
        for (var i in x) {
          var z = x[i].split("=", 2);
          vars[z[0]] = unescape(z[1]);
        }
        var x = [
          "frompage",
          "topage",
          "page",
          "webpage",
          "section",
          "subsection",
          "subsubsection"
        ];
        for (var i in x) {
          var y = document.getElementsByClassName(x[i]);
          for (var j = 0; j < y.length; ++j) y[j].textContent = vars[x[i]];
        }
      }
    </script>
    <style>
      #footer {
        border-top: 1px solid black;
        text-align: right;
        padding-bottom: 20px;
      }
    </style>
  </head>
  <body onload="subst()">
    <footer id="footer">
      Page <span class="page"></span> of <span class="topage"></span>
    </footer>
  </body>
</html>

Generating PDFs

Once you've set up your template and added your fields, you can generate a PDF by either filling out the online form, or making an API request.

results matching ""

    No results matching ""