mrarm on "[Plugin: Contact Form 7] How to add progress bar in file upload on submit form."

Hi, I've succesfully added jQuery form (it allows to create progress bar) to Contact Form 7.

1. add to /wp-content/plugins/contact-form-7/includes/classes.php after $form .= '</form>';

$form .= '<div id="progressbox"><div id="progressbar"></div ><div id="statustxt">0%</div ></div>
<div id="output2"></div>';

2. Add this right after </body> in your footer.php from template:
<script src="http://malsup.github.com/jquery.form.js"></script>

3. Add style to you stylesheet (that's unstyled, you must style it on your own):

/* progress bar */

#progressbox {
border: 1px solid #ccc;
padding: 1px;
position:relative;
width:400px;
border-radius: 3px;
margin: 10px;
display:none;
text-align:left;
}
#progressbar {
height:40px;
border-radius: 3px;
background-color: #20bbfb;
width:1%;
}
#statustxt {
top:3px;
left:50%;
position:absolute;
display:inline-block;
color: #000000;
}

#output2 {
display: none;
width: 400px;
height: 20px;
}

4. Replace your scripts.js (located in /wp-content/plugins/contact-form-7/includes/js/scripts.js):
Here i'm posting my whole scripts.js - you should edit it, there are 3 parts marked as "added by Jan" :) - Sorry. I haven't realised that I can edit here.. http://ideone.com/t15lID

And that's all, here you have working contact form7 with progress bar.

That's the jQuery form plugin:
- http://malsup.github.io/jquery.form.js
(mentioned here: http://stackoverflow.com/questions/11224402/jquery-form-uploadprogress-never-called)

working example of progress bar:
more examples here: http://jquery.malsup.com/form/#ajaxForm

___
Regards,

Jan