Support » Plugin: Contact Form 7 » How to add progress bar in file upload on submit form.

Viewing 12 replies - 1 through 12 (of 12 total)
  • 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.

    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.

    There are some suggestions/tutorials in the top voted answer:

    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=””></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..

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

    That’s the jQuery form plugin:
    (mentioned here:

    working example of progress bar:
    more examples here:



    Sorry, my scripts.js –

    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.

    Hi guys,

    Thanks mrarm,It works perfectly 🙂

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How to add progress bar in file upload on submit form.’ is closed to new replies.