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) {
const output = document.getElementById('my-img-preview');
if (event.target.files[0]) {
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
URL.revokeObjectURL(output.src) // free memory
}
} else {
output.src='';
}
});
</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/