How to prevent redirect to a certain URL after submission of Contact Form 7 without input required fields
My goal is to redirect to an external URL after submission of the Contact Form 7 but only if all required fields are filled in. Instead of this I get a redirect every time, even if all fields are blank.
Fields without input are being marked as invalid but it is not preventing redirection.
<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" onclick="window.location.href='https://example.com'" />
javascript html wordpress contact-form-7
asked Jan 3 at 12:49
YuriYuri
207
add a comment |
My goal is to redirect to an external URL after submission of the Contact Form 7 but only if all required fields are filled in. Instead of this I get a redirect every time, even if all fields are blank.
Fields without input are being marked as invalid but it is not preventing redirection.
<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" onclick="window.location.href='https://example.com'" />
javascript html wordpress contact-form-7
asked Jan 3 at 12:49
YuriYuri
207
you can define a function on click to check whether all fields are filled properly. then you may redirect.
– Ashish
Jan 3 at 12:55
Thank you Ashish. Do you have any idea how to create this function?
– Yuri
Jan 3 at 13:30
add a comment |
My goal is to redirect to an external URL after submission of the Contact Form 7 but only if all required fields are filled in. Instead of this I get a redirect every time, even if all fields are blank.
Fields without input are being marked as invalid but it is not preventing redirection.
<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" onclick="window.location.href='https://example.com'" />
javascript html wordpress contact-form-7
asked Jan 3 at 12:49
YuriYuri
207
My goal is to redirect to an external URL after submission of the Contact Form 7 but only if all required fields are filled in. Instead of this I get a redirect every time, even if all fields are blank.
Fields without input are being marked as invalid but it is not preventing redirection.
<input type="submit" value="Send" class="wpcf7-form-control wpcf7-submit" onclick="window.location.href='https://example.com'" />
javascript html wordpress contact-form-7
javascript html wordpress contact-form-7
asked Jan 3 at 12:49
YuriYuri
207
asked Jan 3 at 12:49
YuriYuri
207
asked Jan 3 at 12:49
YuriYuri
207
asked Jan 3 at 12:49
YuriYuri
207
asked Jan 3 at 12:49
YuriYuri
207
207
you can define a function on click to check whether all fields are filled properly. then you may redirect.
– Ashish
Jan 3 at 12:55
Thank you Ashish. Do you have any idea how to create this function?
– Yuri
Jan 3 at 13:30
add a comment |
you can define a function on click to check whether all fields are filled properly. then you may redirect.
– Ashish
Jan 3 at 12:55
Thank you Ashish. Do you have any idea how to create this function?
– Yuri
Jan 3 at 13:30
you can define a function on click to check whether all fields are filled properly. then you may redirect.
– Ashish
Jan 3 at 12:55
you can define a function on click to check whether all fields are filled properly. then you may redirect.
– Ashish
Jan 3 at 12:55
Thank you Ashish. Do you have any idea how to create this function?
– Yuri
Jan 3 at 13:30
Thank you Ashish. Do you have any idea how to create this function?
– Yuri
Jan 3 at 13:30
add a comment |
1 Answer
1
active
oldest
votes
There are some events which will help you to achieve your scenario. In your case event should be called once email sent so you can use wpcf7mailsent for this.
At the footer add following code.
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.location.href='https://example.com'
}, false );
</script>
answered Jan 3 at 13:03
dipmaladipmala
1,64411217
Thank you Dipmala. I tried to use DOM event but there is a one feature in my project. I use conditional fields which open certain Submit buttons when certain condition is chosen and each submit button has its own redirect page. I tried to add ID-s to each Submit button to identify them:document.addEventListener( 'wpcf7submit', function( event ) { if ( 'submitbutton_id' == event.detail.contactFormId ) { location = 'http://example.com/'; } }, false );But problem is that event.detail.contactFormId is the ID of the whole contact form, not the current Submit button only.
– Yuri
Jan 3 at 13:28
Then you can check in this way when you add the condition also some fields are there and its value will be added so add the condition for that field. and add redirection based on that.
– dipmala
Jan 3 at 13:54
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54022647%2fhow-to-prevent-redirect-to-a-certain-url-after-submission-of-contact-form-7-with%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
There are some events which will help you to achieve your scenario. In your case event should be called once email sent so you can use wpcf7mailsent for this.
At the footer add following code.
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.location.href='https://example.com'
}, false );
</script>
answered Jan 3 at 13:03
dipmaladipmala
1,64411217
Thank you Dipmala. I tried to use DOM event but there is a one feature in my project. I use conditional fields which open certain Submit buttons when certain condition is chosen and each submit button has its own redirect page. I tried to add ID-s to each Submit button to identify them:document.addEventListener( 'wpcf7submit', function( event ) { if ( 'submitbutton_id' == event.detail.contactFormId ) { location = 'http://example.com/'; } }, false );But problem is that event.detail.contactFormId is the ID of the whole contact form, not the current Submit button only.
– Yuri
Jan 3 at 13:28
Then you can check in this way when you add the condition also some fields are there and its value will be added so add the condition for that field. and add redirection based on that.
– dipmala
Jan 3 at 13:54
add a comment |
There are some events which will help you to achieve your scenario. In your case event should be called once email sent so you can use wpcf7mailsent for this.
At the footer add following code.
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.location.href='https://example.com'
}, false );
</script>
answered Jan 3 at 13:03
dipmaladipmala
1,64411217
Thank you Dipmala. I tried to use DOM event but there is a one feature in my project. I use conditional fields which open certain Submit buttons when certain condition is chosen and each submit button has its own redirect page. I tried to add ID-s to each Submit button to identify them:document.addEventListener( 'wpcf7submit', function( event ) { if ( 'submitbutton_id' == event.detail.contactFormId ) { location = 'http://example.com/'; } }, false );But problem is that event.detail.contactFormId is the ID of the whole contact form, not the current Submit button only.
– Yuri
Jan 3 at 13:28
Then you can check in this way when you add the condition also some fields are there and its value will be added so add the condition for that field. and add redirection based on that.
– dipmala
Jan 3 at 13:54
add a comment |
There are some events which will help you to achieve your scenario. In your case event should be called once email sent so you can use wpcf7mailsent for this.
At the footer add following code.
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.location.href='https://example.com'
}, false );
</script>
answered Jan 3 at 13:03
dipmaladipmala
1,64411217
There are some events which will help you to achieve your scenario. In your case event should be called once email sent so you can use wpcf7mailsent for this.
At the footer add following code.
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.location.href='https://example.com'
}, false );
</script>
answered Jan 3 at 13:03
dipmaladipmala
1,64411217
answered Jan 3 at 13:03
dipmaladipmala
1,64411217
answered Jan 3 at 13:03
dipmaladipmala
1,64411217
answered Jan 3 at 13:03
dipmaladipmala
1,64411217
1,64411217
Thank you Dipmala. I tried to use DOM event but there is a one feature in my project. I use conditional fields which open certain Submit buttons when certain condition is chosen and each submit button has its own redirect page. I tried to add ID-s to each Submit button to identify them:document.addEventListener( 'wpcf7submit', function( event ) { if ( 'submitbutton_id' == event.detail.contactFormId ) { location = 'http://example.com/'; } }, false );But problem is that event.detail.contactFormId is the ID of the whole contact form, not the current Submit button only.
– Yuri
Jan 3 at 13:28
Then you can check in this way when you add the condition also some fields are there and its value will be added so add the condition for that field. and add redirection based on that.
– dipmala
Jan 3 at 13:54
add a comment |
Thank you Dipmala. I tried to use DOM event but there is a one feature in my project. I use conditional fields which open certain Submit buttons when certain condition is chosen and each submit button has its own redirect page. I tried to add ID-s to each Submit button to identify them:document.addEventListener( 'wpcf7submit', function( event ) { if ( 'submitbutton_id' == event.detail.contactFormId ) { location = 'http://example.com/'; } }, false );But problem is that event.detail.contactFormId is the ID of the whole contact form, not the current Submit button only.
– Yuri
Jan 3 at 13:28
Then you can check in this way when you add the condition also some fields are there and its value will be added so add the condition for that field. and add redirection based on that.
– dipmala
Jan 3 at 13:54
Thank you Dipmala. I tried to use DOM event but there is a one feature in my project. I use conditional fields which open certain Submit buttons when certain condition is chosen and each submit button has its own redirect page. I tried to add ID-s to each Submit button to identify them:
document.addEventListener( 'wpcf7submit', function( event ) { if ( 'submitbutton_id' == event.detail.contactFormId ) { location = 'http://example.com/'; } }, false ); But problem is that event.detail.contactFormId is the ID of the whole contact form, not the current Submit button only.– Yuri
Jan 3 at 13:28
Thank you Dipmala. I tried to use DOM event but there is a one feature in my project. I use conditional fields which open certain Submit buttons when certain condition is chosen and each submit button has its own redirect page. I tried to add ID-s to each Submit button to identify them:
document.addEventListener( 'wpcf7submit', function( event ) { if ( 'submitbutton_id' == event.detail.contactFormId ) { location = 'http://example.com/'; } }, false ); But problem is that event.detail.contactFormId is the ID of the whole contact form, not the current Submit button only.– Yuri
Jan 3 at 13:28
Then you can check in this way when you add the condition also some fields are there and its value will be added so add the condition for that field. and add redirection based on that.
– dipmala
Jan 3 at 13:54
Then you can check in this way when you add the condition also some fields are there and its value will be added so add the condition for that field. and add redirection based on that.
– dipmala
Jan 3 at 13:54
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54022647%2fhow-to-prevent-redirect-to-a-certain-url-after-submission-of-contact-form-7-with%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you can define a function on click to check whether all fields are filled properly. then you may redirect.
– Ashish
Jan 3 at 12:55
Thank you Ashish. Do you have any idea how to create this function?
– Yuri
Jan 3 at 13:30