Contact Form 7: how to target only one submit button

Question

I have a contact form 7 form which upon submission should redirect the user to the applicable page. I have three submit buttons and each should redirect to different pages. I can't figure out how to set up different redirections for the submit buttons. Anyone can help with that?

Here is my form:

 <div class="popup-form" style="text-align:center; margin-bottom:0.5rem;">To be able to see the packages, please fill in the below form.</div>

<div class="popup-form">
<label> Name: <span class="required">*</span>
    [text* your-name class:with-border]</label></div>

<div class="popup-form">
<label> Email: <span class="required">*</span>
    [email* your-email class:with-border] </label></div>

<div class="popup-form">
<label> Company: <span class="required">*</span>
    [text* Company class:with-border] </label></div>

<div class="popup-form">
<label> Phone: <span class="required">*</span>
    [tel* Phone class:with-border] </label></div>

[acceptance GDPR class:popup-form] I understand and accept the privacy policy [/acceptance]
<p class="submit-button popup-form"><span class="english">[submit class:english-submit "English"]</span> [submit "Italian"][submit "Spanish"]</p>

And this is the redirection code in my header.php. At the moment it redirects no matter which submit button I click on.

document.addEventListener( 'wpcf7submit', function( event ) {

        if ( '352' == event.detail.contactFormId ) 
        {
            location = 'http://example1.com';
        }
    }, false );

Thank you!

score 0 · Answer 1 · answered Mar 12 '19 at 08:09

0

How about you try and give different class names to your initial labels? This will allow you to manipulate the buttons using their ID or Class name. At the moment, you are using the same class name for all your labels.

answered Mar 12 '19 at 08:09

Pulane

63
6

For the English submit button I have a separate class “english-submit”. I tried “.english-submit wpcf7submit” but didn’t work. – melit13 Mar 12 '19 at 09:18
Your answer might be here https://stackoverflow.com/questions/24031423/is-it-possible-to-have-two-submit-buttons-in-one-form-with-differents-redirects. – Pulane Mar 13 '19 at 10:06

score 0 · Answer 2 · answered Mar 13 '19 at 06:36

0

You can't. wpcf7submit event is an event that is called when form gets submitted. It can be caused by pushing a button, but also by pressing enter key.

So this event is not directly attached to any button so you can't access that button.

One way to solve this is to add custom event handlers for button clicks and set make them set value of some hidden input inside the form. This way that value will be sent with the form data.

answered Mar 13 '19 at 06:36

Krzysiek Dróżdż

426
4
14

How can I set value of hidden input? – melit13 Mar 15 '19 at 15:50

score 0 · Answer 3 · answered Mar 16 '19 at 07:34

Thank you very much for your help guys. Unfortunately none of the above worked for me. However I managed to find a way to make it work, I added this in header.php:

<script>
window.onload=function(){
    var englishSubmit = document.getElementsByClassName("english-submit");
    englishSubmit[0].addEventListener("click", function()
        { 
            window.location.href = "/packages-en/";
        });
    var italianSubmit = document.getElementsByClassName("italian-submit");
    italianSubmit[0].addEventListener("click", function()
        { 
            window.location.href = "/packages-it/";
        });
    var spanishSubmit = document.getElementsByClassName("spanish-submit ");
    spanishSubmit[0].addEventListener("click", function()
        { 
            window.location.href = "/packages-sp/";
        });
}
</script>

Contact Form 7: how to target only one submit button

3 Answers3