Birdhouse Websites and Designs

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.

[cc lang=”html”]

Your File:
[acceptance your-consent] I consent to the terms & conditions. [/acceptance]
[submit “Send”]

[/cc]

CSS Styles

Add this to your stylesheet.

[cc lang=”css”]
/* 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;
}
[/cc]

jQuery

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

[cc lang=”javascript”]
jQuery(document).ready(function(){

jQuery(‘input[type=”file”]’).change(function(e){

var fileName = e.target.files[0].name;

$(“.the-file”).html(“” + fileName + ““);

});

});
[/cc]

Share This