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>