Bit Forms CSS Class Names Explained

If you have ever opened your browser’s developer tools while viewing a Bit Forms form, you may have noticed something surprising: the form fields have very long, mysterious class names like bu bv bAb bAe bAj bAi bAk bAg bAc… instead of simple names like contact-form-input.

This is because Bit Forms uses Atomic CSS classes – and this is completely intentional.

This can look confusing at first, but don’t worry. It is actually a sign of a well-engineered plugin. This guide will explain what these classes are, why they exist, and most importantly, how to customize your form’s appearance safely.

Why Bit Forms Uses Atomic CSS Classes

Bit Forms uses a technique called Atomic CSS (also called utility-first CSS). Here’s what that means:

Instead of writing one big CSS rule for each element, atomic CSS gives every tiny style property its own tiny class. These micro classes get reused across every form element, so if 100 elements all need border-width: 1px, they all share the same tiny class instead of each repeating it.

Traditional approach – one big rule per element:

/* Traditional approach */ .my-form-input {   border-width: 1px;   border-style: solid;   border-color: #ababab;   font-size: 14px; }

The benefits of the atomic approach include:

• Smaller CSS file size, less code for your browser to download, faster page loads
• Consistent styling across all form elements without repetition
• Better performance on pages with multiple forms

In short, these unusual class names are actually making your website faster and more efficient behind the scenes.

Why You Should Not Override These Classes Directly

You might be tempted to copy one of those class names and write your own CSS to override it. We strongly recommend against this for a few important reasons:

• They can change with updates.  Atomic class names are generated automatically. After a plugin update, the same element might have completely different class names, and your custom CSS would silently stop working.
• They affect many elements at once.  Because these are shared micro classes, overriding one might unexpectedly change the appearance of many other unrelated elements.
• They’re hard to maintain.  Class names like bAi, bAg are not human-readable, making it very hard to remember what you changed and why.

How to Apply Custom Styling Properly

The good news is – at the end of the long list of atomic classes on each element, Bit Forms includes a readable, stable, static class name. This is the class name you should use for your custom CSS.

You will find two kinds of static classes on each element:

• bf-fld — common class, shared by all fields. Targeting this will apply your style to every field in the form.
• b1-4-fld — specific class, unique to that one field only. Targeting this will apply your style to only that particular field.

The same pattern applies to other elements too:

• For labels: bf-lbl targets all labels, b4-3-lbl targets a specific label only.
• For buttons: bf-btn targets all buttons, b4-1-btn targets a specific button only.

To find the stable class name for any element:

1. Right-click the form element and select Inspect
2. Look at the full list of class names on the element
3. Find the last classes — you will see a common one like bf-fld and a specific one like b1-4-fld
4. Use whichever suits your need in your custom CSS
   

/* Targets ALL fields in the form */ .bf-fld {   border-color: #0066cc;   border-radius: 8px; } /* Targets ONLY this specific field */ .b1-4-fld {   font-weight: bold;   color: #333333; }

Adding Your Own Custom CSS Classes

The safest and most flexible way to style your forms is to add your own CSS class directly from inside Bit Form.

Once you add a custom class to a field, you fully own it. It will never be changed or removed by plugin updates. You can then write any CSS you want targeting that class in your theme’s custom CSS area or in a custom stylesheet.

/* Step 1: Add class “my-name-field” to the Name input in Bit Forms */ /* Step 2: Add this CSS to your theme */ .my-name-field {   background-color: #f9f9f9;   border: 2px solid #0066cc;   padding: 12px 16px;   font-size: 16px; }

You can also manage your custom classes and write your CSS directly from inside Bit Forms’ Style Editor, no need to touch your theme at all.

• To add a custom class name to an element: go to Styles → Elements & Layers → select your element → Custom Classes → name it.

• To add your custom CSS inside Bit Forms: go to Styles → ⚙️Builder Settings (Not form setting) → Custom Code → CSS → add your styles, and click Save.

Following this way, your custom classes are stable, readable, and fully under your control.