Question 191172 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Contact form 7 select dropdown submit download PDF

I have the following code in my theme file, but it doesnt seem to be working on submission of the form, I cant seem to work out why. Can anyone see the issue? :

add_action('wp_footer', 'redirect_page');

function redirect_page()
{
?>
<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function(event) {
    console.log(event.detail);
    if ('95' == event.detail.contactFormId) {
        console.log(event.detail.inputs['menu314']);
        var selectedValue = event.detail.inputs['menu314'];
        
        if (selectedValue == 'Download Guide for DFG teams') {
            window.location.href = 'url.pdf';
        } else if (selectedValue == 'Download Guide for Non-specialists') {
            window.location.href = 'url.pdf';
        } else if (selectedValue == 'Download Guide for Managers') {
            window.location.href = 'https://url.pdf';
        }
    }
}, false);
</script>
<?php
}

CF7 Form:

[contact-form-7 id="95" title="Subscribe download"]

<label class="uabb-cf7-col-1">[text* your-name placeholder "Name"]</label>
<label class="uabb-cf7-col-1">[tel tel-985 placeholder "Telephone"]</label>
<label class="uabb-cf7-col-1"> [email* your-email placeholder "Email"] </label>
[select* menu-312 id:menu314 "Select Guide" "Download Guide for DFG teams" "Download Guide for Non-specialists" "Download Guide for Managers"]
<label class="uabb-cf7-col-1">[submit "Download Guide"]</label>

console is showing no errors, form sends, but PDF is not redirected

Tags:

2

Answers


  1. 0

    I think you should use CF7 DOM events
    enter link description here

    for example:

    var wpcf7Elm = document.querySelector( '.wpcf7' );

wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
  alert( "Fire!" );
}, false );
    Login or Signup to reply.
  2. 0

    To get the value of input from the event.detail inputs is an object with the data in an array containing name and value. The array keys have nothing to do with the names or id’s of the fields, just an array.

    Also, the contactFormId is an integer, for whatever that’s worth.

    So if you did.

    document.addEventListener(
    'wpcf7mailsent',
    function(event) {
        if ( 95 === event.detail.contactFormId ) {
            // 4th input field is key '3'.
            let selectedValue = event.detail.inputs[3]['value'];
            if ('Download Guide for DFG teams' === selectedValue) {
                window.location.href = 'url.pdf';
            } else if ('Download Guide for Non-specialists' === selectedValue) {
                window.location.href = 'url.pdf';
            } else if ('Download Guide for Managers' === selectedValue) {
                window.location.href = 'https://url.pdf';
            }
        }
    },
    false
);

    where inputs[3] is the fourth field (which is your select), then you should get where you want to go. If you console.log(event.detail.inputs); and expand the array to see the data, you should see the key if it’s not [3]

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search