Spread the love

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.

Requirements:

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

Before

After

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>
    </div>
</div>

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

<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>
        </div>
    </div>
</div>

CSS Styles

Add this to your stylesheet.

/* Style upload button */
span.cv {
  position:relative;
    margin-left: -40px;
}
span.cv::before {
    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;
}
span.cv:hover::before {
    background: #000;
    cursor: pointer;
    color: white!important;
}
span.cv input {
    visibility:hidden;
    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;
}