Contact Form 7
How to add progress bar in file upload on submit form. (13 posts)

  1. monika11
    Posted 3 years ago #

    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 !!!!


  2. Chris Reynolds
    Posted 3 years ago #

    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.

  3. monika11
    Posted 3 years ago #

    Yes CF7 supports file uploads.

  4. Schnitzelweck
    Posted 3 years ago #

    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.

  5. Chris Reynolds
    Posted 3 years ago #

    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).

  6. mrarm
    Posted 3 years ago #

    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;
    border-radius: 3px;
    margin: 10px;
    #progressbar {
    border-radius: 3px;
    background-color: #20bbfb;
    #statustxt {
    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



  7. mrarm
    Posted 3 years ago #

    Sorry, my scripts.js - http://ideone.com/t15lID

  8. Usermaniac
    Posted 3 years ago #

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

  9. davepyro
    Posted 3 years ago #

    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


  10. Michael Aronoff
    Posted 3 years ago #

    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.

  11. thibotus01
    Posted 2 years ago #

    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.

  12. thibotus01
    Posted 2 years ago #

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

  13. sreekrish
    Posted 2 years ago #

    Hi guys,

    Thanks mrarm,It works perfectly :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic