Contact Form 7 upload field with image preview

Contact Form 7 allows us to create custom fields that can be used in our form.

Let’s create an upload field that will display the image that the user selected before actually uploading it. The technique to do this can be found here: https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded


    Here’s the form code:

    [file my-img id:my-img filetypes:gif|png|jpg|jpeg]
    <img id="my-img-preview" />
    
    [submit "Submit"]
    
    <script>
      jQuery('#my-img').on('change', function(event) {
        var output = document.getElementById('my-img-preview');
        output.src = URL.createObjectURL(event.target.files[0]);
        output.onload = function() {
          URL.revokeObjectURL(output.src) // free memory
        }
      });
    </script>

    Next step: create custom control

    That’s quite a lot of code. Wouldn’t it be nice to have our own custom control, called image-upload or something, that you can just install as a plugin?

    Might add the code later. For now: I think this would be a good exercise for someone willing to create a CF7 extension. Start here: https://contactform7.com/2015/01/10/adding-a-custom-form-tag/