Change action in Contact Form 7 - wordpress

Would modify the action of Contact Form 7 once sent the mail.
I follow this post and woks fine. But my fom is in a Bootstrap Modal, and I wish they would keep open on submit.
My code is.
In function PHP
add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url'); function wpcf7_custom_form_action_url() { return 'http://saviacomunicacion.com.ar/test2014#sala-de-prensa'; }
And in the Aditional Settings field
add_filter('wpcf7_form_action_url', 'wpcf7_custom_form_action_url');
This redirect the URL, but it´s not sending the mail.
I wish i could send the mail and keep the modal open to show the response: Your mail was send correctly.
Thanks

According to the doc there is another way to accomplish the redirect. Just add some piece of code to the plugin dashboard.
Or you can do custom js function
in the plugin options
on_sent_ok: "customFunction();"
and somewhere in the code
<script>
function customFunction() {
// show your modal here
$('#myModal').modal();
}
</script>

I found my solution with this code. When form submit, the Modal closes after 1 second.
Instead of keeping Modal open, i wait 1 second after close, to show the response of the sending.
j(".form-horizontal").live("submit", function(){
j.post(this.action, j(this).serialize(), function(){
//this callback is executed upon success full form submission close modal here
}, "script");
//this is to wait 1 second until close
setTimeout(function() {j('.modal').modal('hide');}, 1000);
return false;
});

Related

How to e.preventDefault() when clicking on Update in Gutenberg, WordPress

How to e.preventDefault() when clicking on Update in Gutenberg, WordPress?
What I'm trying to do is check something and if there is any error, I will prevent the update process and show the error.
My code:
$(document).on('click', '#editor .editor-post-publish-button', function (e) {
e.preventDefault();
// Show Errors...
});
However, the e.preventDefault() is not preventing the process and the post is getting updated.
With JavaScript, you can use the core WordPress Block API to issue error notices if your own validation logic detects any issues and prevent the post from saving if errors are present, eg:
JavaScript
// Create error notice
wp.data.dispatch('core/notices').createErrorNotice(
'A value is required', // Message displayed to User
{
id: 'my-field', // Used to remove notice and check if notice is present
isDismissible: false,
}
);
// Remove notice
wp.data.dispatch('core/notices').removeNotice('my-field'); // unique id 'my-field'
// Prevent post from saving
wp.data.dispatch( 'core/editor' ).lockPostSaving( 'my-field' );
// Enable post saving
wp.data.dispatch( 'core/editor' ).unlockPostSaving( 'my-field' );
By using native WordPress API, displaying and styling of the notices is taken care of and keeps the UX consistent. The Documentation also has an example of preventing a post from publishing which may be helpful as well.

Track GA4 custom event

I am sending a custom event ("ebook") with a parameter ("titolo") to GA4. After that, I have set the parameter as a Custom Dimension in GA UI.
I am sending the event from my website with this code:
function ebooksGA4new(title) {
gtag('event', 'ebooks', {
'titolo': title
});
}
Then I have set an Exploration on the custom dimension, but after 3 days it still reports "not_set. If I fire the event, I can see it in the real-time report.
Here are 2 ways to find out why
Modify the code a bit, make sure it won't trigger the event if it doesn't have title parameter.
But please make sure this is what you want. You need to decide it is ok or not to receive the event without title parameter.
function ebooksGA4new(title) {
if(!title || title=="")
return false;
gtag('event', 'ebooks', {
'titolo': title
});
}
Open the chrome devtool or something similar with it. Here is the screenshot about how to check it. This should appear on your GA4 real time report as well.

How to prevent Contact Form 7 from clearing form on successfull submission

I need to prevent Contact Form 7 WordPress plugin from clearing form on successful submission. I want user to be able to keep editing the form (and possibly to resubmit it again).
Thanks.
I actually found a solution. You can just attach an event handler to reset event and then do e.preventDefault().
setTimeout( function(){
$( '.my-form form' ).on( 'reset', function(e) {
e.preventDefault();
});
},500)
It didn't work without the timeout, but this should be safe enough. Not many users can fill a form in under 0.5 second :-)
Maybe not a perfect solution but it works for my case.
EDIT: Here is a new version without the setTimeout (thanks to #Jan Myszkier)
$(document).on('reset', '.my-form form', function(e) {
e.preventDefault();
});
In JS wp-content/plugins/contact-form-7/includes/js/scripts.js around line 300 there's ajaxSuccess function described with the following piece:
if ( 'mail_sent' == data.status ) {
$form.each( function() {
this.reset();
} );
wpcf7.toggleSubmit( $form );
}
which might be just what you're looking for because this.reset(); resets the field one by one within the form after successful status.
EDIT: Following your information you want to modify the behaviour but not change the plugin, you can use the events that come with CF7.
https://contactform7.com/dom-events/
add wpcf7submit watcher to store the data in the localstorage and add another watcher (wpcf7mailsent this time ) to write the data back to the form.

Wordpress MailChimp using button click instead of pop-up failing with 404 error

I have never used MailChimp Easy Forms before. I'm trying to make the pop-up apear when a user pressing a button instead of the pop-up to just showing when the user gets to the website.
My js code:
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup- forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script>
function showMailingPopUp() {
alert('inside the button click');
require(["mojo/signup-forms/Loader"], function (L) {
L.start({
"baseUrl": "mc.us1.list-manage.com", "uuid": "81016de6debaf524b31df317af5480b1-us17",
"lid": "8517f84634"
})
})
document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
}
</script>
And the HTML:
<button id="open-popup" onclick ="showMailingPopUp();">Email signing</button>
In the inspection tool I get this error:
This is how it looks in MailChimp:
Currently i'm using the listid from MailChimp as "lid" and my API-key as "uuid" and I think it's the uuid that break, but what is the uuid? If it's not the id's thats wrong what is it then?
Thanks in advance :-)
Install Easy Forms for MailChimp WordPress Plugin and set the mailchimp API key and it will fetch all of your list now create new form and assign list with it then save it one shortcode will generate.
Now open one pop up using jquery and in content paste the shortcode then it will work.
https://wordpress.org/plugins/yikes-inc-easy-mailchimp-extender/

WordPress External Link Disclaimer Page

I am currently using this script to warn the user they are leaving the current webiste when clicking on an external link on a WordPress website:
<script>
jQuery(function() {
function leave_now(event) {
var choice = window.confirm( 'Leave page?' );
return choice;
}
var select_external = 'a[href*="//"]:not([href*="yourdomain.com"])';
jQuery(document).on( 'click', select_external, leave_now )
});
</script>
It works great, but I actually need to modify this so it takes them to a warning PAGE instead of having a popup window appear. After the warning page is loaded, it waits 5 seconds, then loads the URL that was clicked on.
Any suggestions would be appreciated.
Set the location.href which will navigate you to the url you specify
location.href='http://www.your-url.com'
So, on click, you could have that function run and set that location instead of do a warning

Resources