WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. monika11
    Member
    Posted 1 year 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 !!!!

    http://wordpress.org/extend/plugins/contact-form-7/

  2. Chris Reynolds
    Member
    Posted 1 year ago #

    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.

  3. monika11
    Member
    Posted 1 year ago #

    Yes CF7 supports file uploads.

  4. Schnitzelweck
    Member
    Posted 1 year 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
    Member
    Posted 1 year ago #

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

  6. mrarm
    Member
    Posted 1 year 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;
    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

  7. mrarm
    Member
    Posted 1 year ago #

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

  8. Usermaniac
    Member
    Posted 1 year ago #

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

  9. davepyro
    Member
    Posted 1 year 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

    thanks
    Dave

  10. Michael Aronoff
    Member
    Posted 1 year 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
    Member
    Posted 11 months 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
    Member
    Posted 10 months ago #

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

  13. sreekrish
    Member
    Posted 8 months ago #

    Hi guys,

    Thanks mrarm,It works perfectly :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic