Download PDF after CF7 form submission
-
21-04-2021 - |
문제
I'm working on a client's build, and I'd like to change as little as possible. I'm not too familiar with all this, my apologies - I'll try to show where I'm at.
The client wants a form submission to prompt a PDF download. There are two different PDFs, two instances of the same form. Fill out form instance 1, get PDF A - Form instance 2, PDF B.
Here's how those instances show up:
<div id="whitepaper" class="home_whitepaper_bg w-clearfix">
<?php $lpcnt=0; if(have_rows('whitepaper_list')): ?>
<?php while(have_rows('whitepaper_list')): the_row(); $lpcnt++; ?>
<!-- Making rows for content, looping through and counting loops = lpcnt -->
<!--
... Other content ...
-->
<?php
the_sub_field('whitepaper_download_form');
?>
<?php
$pdf=get_permalink().'?download='.get_sub_field('whitepaper_pdf');
?>
<a data-fancybox data-src="#whitepaper_popup_<?php echo $lpcnt; ?>" data-redirect="<?php echo $pdf; ?>" href="javascript:;" class="whitepaper_download_link w-inline-block w-clearfix">
<!-- Here's the buttons for fancybox popups. They use the loop count to build a specific url - this is info I want later! -->
And in the popup window:
<div id="whitepaper_popup_<?php echo $lpcnt; ?>" class="whitepaper_popup">
<!-- using that loop count to get a specific div id! -->
<div class="popup_whitepaper">
<div class="whitepaper_form">
<!--
I could put a <?php echo do_shortcode...> here, no?
Their current solution is to grab a javascript code from an ACF field.
I have had a lot of trouble figuring out how to put the CF7 form in that field.
-->
<?php the_sub_field('download_form'); ?>
<div class="w-clearfix"></div>
</div>
<button data-fancybox-close="" class="fancybox-close-small"></button>
<div class="w-clearfix"></div>
</div>
</div>
Right. So there's that. Then, using CF7's new DOM events, I should be able to setup a redirect or simliar?
in functions.php:
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( 'FORM ID' == event.detail.contactFormId ) {
location = <!-- specific url derived from $lpcnt? -->;
}
}, false );
</script>
<?php
}
I'm not sure if I'm on the right track or not - also, can't figure out exactly how I can get the right URL into my wpcf7mailsent event listener.
해결책
You don't need much code for it. just goto contact form > select contact form > additional setting, paste below code.
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'YOUR_PDF_URL';}, false );
다른 팁
I had the need to add a download CTA after the content of all case studies of a website, but "in exchange" of user's data for:
- display a CF7 form on your page, I had the same one on all case studies post type single which I hooked after the content
- find a way to get the wanted PDF url for people to download, as for me all case studies have a different PDF, I simply added an ACF field, filtered on PDF only, which returns the file url
- based on CF7 Dom events, choose the action you prefer to make the dowload happens, as I am not sending any confirmation email, I prefer working on the wpcf7submit event. Note that wpcf7submit event is fired only if the form has been validated
So the code looks like this:
<?php
// For simplicity, using an anonymous functions
add_action( 'wp_print_footer_scripts', function () {
// Check the wanted singular post type loading
if ( is_admin() || ! is_singular( 'case-study' ) ) {
return;
}
// Check if the ACF PDF field is not empty for use
$pdf_link = get_field( 'pdf' );
if ( empty( $pdf_link ) ) {
return;
}
// Hook on the "wpcf7submit" CF7 Dom event to force the download
printf( "<script>document.addEventListener( 'wpcf7submit', function( event ) { window.open('%s'); }, false );</script>", $pdf_link );
} );
Try this plugin:
- Download the plugin
- Install
- Set the form id and PDF attachment under CF7 file download settings.