How to Style JetForm Builder File Upload Fields for a Modern Look

JetForm Builder is a fantastic WordPress form plugin, but its default styling can be a little… well, plain.
If you want your forms to feel more polished and user-friendly, customizing the file upload field with CSS is a quick win.

Here’s a breakdown of a modern styling approach you can use.

The Goal

We want:

• A flexible layout for better alignment.

• Rounded corners for a softer, modern look.

• A dashed border to indicate drag-and-drop capability.

• A consistent button size that blends with your site’s design.

  
  

The CSS Code

.jet-form-builder__field-wrap {
    display: flex;
}

.jet-form-builder .field-type-media-field {
    gap: 5px;
}

.jet-form-builder-file-upload__file {
    border-radius: 10px;
    overflow: hidden;
}

.jet-form-builder-file-upload__fields {
    width: 100px;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    order: 0;
}

.jet-form-builder-file-upload__message {
    order: 1;
    display: none;
}

.jet-form-builder-file-upload__content {
    flex-grow: 3;
    order: 2;
}

.jet-form-builder-file-upload__fields input[type=file]::file-selector-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    background: #F6FAFF;
    color: #2145E6;
    border: 1px dashed #406ACB;
    border-radius: 10px;
    cursor: pointer;
}

How This Works

1. Flex Layout – Makes the upload area and file list align side-by-side neatly.

2. Gap & Margins – Improves spacing between elements.

3. Rounded Corners – Adds a modern touch to uploaded file previews.

4. Hidden Message – Removes unnecessary “No file chosen” text.

5. Custom Button Style – Uses a dashed border and soft background color to make the button stand out.

Before & After

With this CSS, your JetForm Builder file upload field will go from standard browser styling to a clean, clickable, modern upload box that matches your branding.

💡 Pro Tip: You can change #2145E6 (blue) and #F6FAFF (light background) to your brand colors for a perfect fit.