You’d need to add an AJAX progress bar that hooked into the upload process.
http://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: http://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=”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
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 🙂