Birdhouse Websites and Designs

Moving Your Business ONLINE?

Contact Us Today!

The Goal:
Create a custom UPLOAD button that retain the file information and makes it visible after upload.

There are many blogs out there regarding how to customize the file upload button which require you to hide the original button, and consequentially the file indicator that shows which file you uploaded. This example shows how to customize the button in addition to creating a container to display the file you uploaded, which can be moved anywhere you like.


  • HTML & CSS
  • jQuery
  • Contact Form 7 & File Uploading/Attachments (Reference)



Contact Form 7 Markup

This is the code you should use within your form.

<div class="form-wrap upload-wrapper">
    <div class="form-row proj-type">
        <div class="upload-image-wrap">
            <label><h3>Upload Your Image or Inspiration Photo</h3></label>
            <span class="cv">[file* UploadanImage filetypes:png|jpg|gif]</span>

<div class="form-wrap uploaded-file">
    <div class="form-row">
        Your File: <span class="the-file"></span>

<div class="form-wrap">
    <div class="form-row">
        <div class="right">
            <span class="contact-terms">[acceptance your-consent] I consent to the <a href="/terms-and-conditions/">terms &amp; conditions</a>. [/acceptance]</span>
            <a class="btn primary-btn">[submit "Send"]</a>

CSS Styles

Add this to your stylesheet.

/* Style upload button */ {
    margin-left: -40px;
} {
    content: "Upload file";
    position: absolute;
    left: 0;
    background: #00ffde;
    color: #333;  
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    padding: 30px;
    font-size: 36px;
} {
    background: #000;
    cursor: pointer;
    color: white!important;
} input {
    height: 100px;

/* Styles for Form */
.UploadanImage {
    margin-bottom: 25px;
.UploadanImage input {
    height: 40px;
    margin-bottom: 25px;
.upload-wrapper {
    margin-bottom: 20px;
.upload-image-wrap {
    background: #333;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    display: block;
    margin-top: 20px;
    border: 1px solid #00ffde;
.upload-image-wrap h3 {
    color: #808285!important;
    font-size: 24px!important;
    line-height: 100%;
.uploaded-file {
    margin-bottom: 50px;
    background: #333;
    padding: 20px;
    border: 1px solid #333;
    color: #00ffde;
.uploaded-file .form-row {
    text-align: center;


Add this to your custom scripts. Make sure you have ” target=”_blank”>jQuery installed.



        var fileName =[0].name;

        $(".the-file").html("<b>" + fileName + "</b>");        


%d bloggers like this: