How to Add a Barcode to Fluent Forms Using Libre Barcode Font

The Theory Behind Adding a Barcode to a Fluent Form in WordPress (With Code)

Barcodes are no longer exclusive to retail. From event check-ins to user ID cards, barcodes make it easy to digitize workflows. In WordPress, using Fluent Forms combined with a barcode font allows you to dynamically display a barcode based on user input — with zero backend generation needed.

Why Use a Font-Based Barcode?

Instead of generating a barcode image, which can require external APIs or heavy JavaScript libraries, you can simply use a Google Font that renders text as a barcode. One popular choice is Libre Barcode 39, which is fast, lightweight, and easy to implement.

Step-by-Step: How It Works

🔹 1. Load the Barcode Font in Your Site

Add the Google Font to your site’s <head> using a plugin like Code Snippets, a child theme, or via Fluent Forms’ custom HTML field (advanced tab):

&lt;link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+39&amp;display=swap" rel="stylesheet"&gt;
&lt;style&gt;
.barcode-output {
    font-family: 'Libre Barcode 39', cursive;
    font-size: 48px;
    letter-spacing: 3px;
    margin-top: 15px;
    display: block;
}
&lt;/style&gt;

🔹 2. Add the Input Field in Fluent Forms

In your Fluent Form, add a Text Input field. In the Advanced Options, set the CSS Class Name to:

barcode-source

🔹 3. Add a Barcode Display Field (HTML Field)

Add an HTML field in the form where you want the barcode to show. In the HTML content box, enter:

&lt;div id="barcode-output" class="barcode-output"&gt;&lt;/div&gt;

🔹 4. Add JavaScript to Generate the Barcode

In Fluent Forms, go to Settings > Custom CSS/JS, and insert the following JavaScript in the Custom JavaScript section:

&lt;script&gt;
document.addEventListener('DOMContentLoaded', function () {
    const sourceInput = document.querySelector('.barcode-source input');
    const barcodeOutput = document.getElementById('barcode-output');

    if (sourceInput &amp;&amp; barcodeOutput) {
        sourceInput.addEventListener('input', function () {
            const val = sourceInput.value.trim();
            barcodeOutput.textContent = val ? `*${val}*` : '';
        });
    }
});
&lt;/script&gt;

✅ Note: The asterisks * are required in Libre Barcode 39 to mark the start and end of the barcode.

Example in Action

Imagine a user types ABC123. The system will wrap that with asterisks and visually display:

*ABC123*

Styled with the Libre Barcode 39 font, this will now appear as a scannable barcode.

Bonus Tips

Print Friendly: This method is ideal for printable forms or confirmations.
QR Code Alternative: For more complex needs, you can use Fluent Forms add-ons or custom JS libraries like qrcode.js for QR generation.
Other Barcode Fonts: You can swap Libre Barcode 39 with others like Libre Barcode 128, but formatting rules differ.

Use Cases

Event Check-ins
Membership & ID Cards
Order Confirmation Emails
Inventory Tracking
Visitor Passes

Conclusion

The power of combining Fluent Forms with a font-based barcode lies in its simplicity. With no need for image generation or third-party APIs, you can dynamically create scannable codes using nothing more than fonts and a touch of JavaScript. Whether you’re handling tickets, registrations, or asset tracking — barcodes can add a sleek, professional touch to your forms with minimal effort.

Author: WP Scriptly

Hey, I’m Scot, the guy behind WpScriptly. I create simple, no-fluff WordPress plugins and tools to make your site easier to manage and more powerful. Everything I build is tested on my own projects first — if it’s here, it’s because it works. Thanks for checking out the site. Hope you find something useful at Wp Scriptly.

Recent Articles:

*These scripts and plugins are provided as is with no guarantees or warranties. If you need assistance or run into issues, feel free to reach out via the contact page.