How to add progress bar in file upload on submit form.

You’d need to add an AJAX progress bar that hooked into the upload process.
https://stackoverflow.com/questions/2714507/jquery-ajax-upload-with-progress-bar-no-flash

Does CF7 support file uploads? If not, you’d have to fork the plugin to add that.

Yes CF7 supports file uploads.

Have you found a solution to add a progressbar to contactform 7? Iam really interested in that because on bigger filesizes you just see the spinning wheel and as a user you have no status about the sending progress (is it hanging or is it stil loading).

I dont get the AJAX Progressbar link from you Chris. I dont no where to hook into Contactform7.

Thanks for your answers.

@schnitzelweck
There are some suggestions/tutorials in the top voted answer: https://stackoverflow.com/a/2714755

You’d need to either hack the CF7 plugin or create your own plugin using any CF7 hooks. Or wait until it becomes a built-in feature of the plugin (if it does).

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=”https://malsup.github.com/jquery.form.js”></script&gt;

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.. https://ideone.com/t15lID

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

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

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

___
Regards,

Jan

Sorry, my scripts.js – https://ideone.com/t15lID

mrarm does you solution still work?
I tryed it.. but if i upload a file the bar does not apear..

mrarm, that worked perfect for me thanks for putting the info up there.
I noticed one thing though which I had to correct:
on line 47 of your script file you have: /end
it should be: //end

thanks
Dave

These instructions work quite well.
Note the fix offered by davepyro on line 47.

I also found an easier way to embed the script in step 2.
Simply past the code from that step at the bottom of you Contact Form 7 screen for the form you are using.

Then the script only gets loaded when that for is called instead of on every page of your site.

I also have never been able to get Contact Form 7 to take files larger than 10MB or so. But that is unrelated to this hack.

I confirm. This hack still works. Thanks a lot ! Don’t forget to fix the bug on line 47 in script.js

I also found a much easier way for step 2.

– Simply replace jquery.form.js in the includes/js/ folder of the plugin.

Since 3.5.3 replacing jquery.form.js isn’t necessary. Last version is now used.

Hi guys,

Thanks mrarm,It works perfectly ??