SIGN UP

Using a Barcode Font in a Read Only Field

By: Dominic Potts | Asked: 05/29/2024
Forums › Category: General questions › Using a Barcode Font in a Read Only Field
0 Vote Up Vote Down
Dominic PottsDominic Potts asked 7 months ago
Hi! I want to display a Barcode in a Form.
  • The field is read-only and automagically generated
  • The field ID is 143
  • I've used the following CSS in Global CSS to set this particular field to a specific Bar Code Font.
    • CSS: #frm_field_143_container input {
      font-family: "Libre Barcode 39 Text", system-ui !important;
      font-weight: 400;
      font-style: normal
      }
  • When viewing the form, the text is only shown.  I know that the CSS works, as when I used a different Font, it displays that field in a different font.
I've tried multiple options, including "importing" the field (even though my theme builder - Divi includes this font. Any guidance would be much appreciated. Many thanks in advance    Dominic  
2 Answers
0 Vote Up Vote Down
Victor Font answered 7 months ago
First, I wouldn't assign the CSS to the container. I would just use the HTML input ID. Second, please post a link to the form so we can see if there are any errors in the console.
Dominic PottsDominic Potts replied 7 months ago

Victor,

Thanks, as always for your super quick response.

I'm not sure exactly what you mean by not assigning the CSS to the container, just use the HTML input ID. Is there a tutorial on this, because I followed the instrucitons on FF website.

Here's the link to the form.

https://wellnessmedicallaboratory.com/wp-admin/admin-ajax.php?action=frm_forms_preview&form=blood-test-request

Strangely, the Form is now showing a Bar Code (a tiny version!)...

Only thing I've done different was to add some CSS into my Divi Settings.

Curiously, my view isn't showing a bar code...

https://wellnessmedicallaboratory.com/frm_display/blood-test-overview/

Brain Blown.

Dominic

Rob LeVineRob LeVine replied 7 months ago

The link to the form can only be accessed by an admin and the other link gives a 404 error (likely for the same reason). What @Victor meant by putting it on the container is instead of "#frm_field_143_container input" do something like "#frm_field_143" or whatever the equivalent is for the actual HTML input element.

0 Vote Up Vote Down
Dominic PottsDominic Potts answered 7 months ago
Thank you Victor and Rob!  With your guidance, I've got it working!  

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right