Skip to main content
Version: v6

Using Barcodes and QR Codes in PDFs

Introduction​

A large array of barcodes (and QR Codes) are supported right out of the box using the special <barcode> HTML tag.

At its most basic, you include the <barcode> HTML markup in your PDF template or a HTML field in the Form Editor:

<barcode code="Your message here" type="QR" />

Gravity Forms merge tags are supported in the code attribute. You will need to keep in mind that each barcode require a specific format to be used otherwise it won't be generated.

Barcodes and QR Codes using HTML​

If you enjoy video tutorials, watch this 7-minute video with Gravity PDF’s lead developer as he takes you through to adding barcodes and QR codes in Gravity PDF Core and Universal PDF templates.

Supported CSS​

The following CSS can be set on the <barcode> element:

  • vertical-align
  • border
  • margin
  • padding
  • color
  • background-color

Examples​

<!-- Basic Barcode Usage -->
<barcode code="A34698735B" type="CODABAR" />
<barcode code="54321068" type="I25" />
<barcode code="978-0-9542246-0" type="ISBN" height="0.66" text="1" />
<barcode code="01234567094987654321-01234567891" type="IMB" />

<!-- QR Code Usage -->
<barcode code="Your message here" type="QR" />
<barcode code="http://test.com" type="QR" size="0.8" error="M" />
<barcode code="tel:+61 2 600 000" type="QR" disableborder="1" />

<!-- You can use the \n and \r characters and they will be converted to new line (LF) and tab (CRLF) characters -->
<barcode code="Your message\ngoes here" type="QR" class="barcode" size="0.8" error="M" />

<!-- Using a barcode with custom styles -->
<style>
.barcode {
    padding: 1.5mm;
    margin: 0;
    vertical-align: top;
    color: #000044;
}
.barcodecell {
    text-align: center;
    vertical-align: middle;
}
</style>

<div class="barcodecell"><barcode code="54321068" type="I25" class="barcode" /></div>
Last updated on