Displaying Attached file names with contact form 7

[Jim]

Jim

March 21, 2018 at 8:22 pm

Hello,

I have been doing some style changes to my contact form 7. In this styling change I have removed the default file upload button and replaced it with a “better looking” version. I am running into a problem as I want to display the names of the files below the button and having a hard time figuring this out. In my research I have come across some good information but unable to integrate this to my site. I was wondering if you can give me some guidance with this.

Current page of Contact form 7: *Login to see link

Some of the articles:
*Login to see link
*Login to see link

Here is my contact form 7 setup:
[text* your-name id:main placeholder "Your Name"]
<div class = "layoutContactTop">
<div id="left">
[email* your-email id:main placeholder "Your Email"]
</div>
<div id="right">
[tel Phone-Number id:main placeholder "Your Number"]
</div>
</div/>

[text* your-subject id:main placeholder "Subject"]

[textarea* your-message id:main placeholder "Your Message"]

<div class = "layoutContactBot">
<div id="sentbtn">
[submit id:Send "Send"]
</div>
<div id="fileUpload">
[multifile your-file limit: 6MB filetypes:doc|docx|jpg|jpeg|png|pdf|pdf id:your-file class:inputfile]
<label for="your-file">Upload file</label>
</div>
</div/>

The majority of the problems are coming with integrating the jQuery into the site as I am a little be confused to where this should go.

Thanks
Jim