Step1:
1. Install "Contact From 7" WordPress pluginStep2:
1. Create a from Dashboard - > Contact from 7 - > Add New
2. Copy the Short-code example:
[contact-form-7 id="658" title="Contact Form"]
Note: Change the short-code with yours
Step3:
1. Add Short-code to your page where you wanted to display your Contact from.
2. Inspect your page and you can find an div with id above the from which looks like
<div role="form" class="wpcf7" id="wpcf7-f656-o1" lang="en-US" dir="ltr">
Step4:
1. Save the ID , we will use it as jQuery selector.
Now here comes the script
Before adding this script check weather you have included the jQuery Library before your script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
// Ignore this if you have included the library.
<script>
$(document).ready(function() {
$downloadurl = "http://www.webiste.com/download.pdf";
// File to be downloaded
// you can add this url dynimcally if you have multiple forms in different pages using ACF plugin
$('#wpcf7-f656-o1').find('.wpcf7-submit').on("click", function(){
// on Click of Submit button
// #wpcf7-f656-o1 is my form id which we copied earlier, use your id here
setTimeout(function()
{
if($('.wpcf7-response-output').hasClass('wpcf7-mail-sent-ok'))
{
$('.wpcf7-form').prepend("<a href="+$downloadurl+" class='download_link' target='_blank'>Download Pdf</a>");
$('.download_link').on("click", function(){
// To reload the page after downlading the file to reset the from for next download.
location.reload(true);
});
}
},2000)
// Timeout for 2 seconds
});
});
</script>