I want to add file uploading progress bar in contact form 7 .so that it show a progress bar while uploading a file on form submit.
can any one tell me how to do this task.
Please help me !!!!
You’d need to add an AJAX progress bar that hooked into the upload process.
Does CF7 support file uploads? If not, you’d have to fork the plugin to add that.
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.
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>
2. Add this right after </body> in your footer.php from template:
3. Add style to you stylesheet (that’s unstyled, you must style it on your own):
/* progress bar */
border: 1px solid #ccc;
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:
(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
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
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.
- The topic ‘How to add progress bar in file upload on submit form.’ is closed to new replies.