I'm trying to use some CF7 hooks, but they seem to break something in the workflow after the submit.
I tried for example to add the following snippet to print something in the console:
function debug_to_console($cf7) {
echo '<div display="none"><script type="text/javascript">console.log("console log message");</script></div>';
//return $cf7;
}
add_action( 'wpcf7_before_send_mail', 'debug_to_console' );
When I enable it, nothing gets printed in the console and the [response](the notification after submitting the form) stops working.
The email instead gets delivered.
Any idea?
Thanks!
Use javascript events for frontend. https://contactform7.com/dom-events/
If you want fire action before ajax call use:
$('.wpcf7-form').submit(function() {
// action
});
We can not echo the result to front end from the wordpress hooks.
Try DOM Events from Contact form 7
document.addEventListener( 'wpcf7submit', function( event ) {
var entry = event.detail.inputs.find(element => element.name == 'entry_id');
switch(event.detail.contactFormId){
case "220": case "222":
alert(event.detail);
break;
default : console.log("Error");break;
}
Related
I am offering customers a repurchase on the order confirmed page. If they click the link they are sended directly to the checkout page. However, the form is then prefilled with the previous data. I would like to clear it, because the idea is one product(ticket) per person.
So far i have the following (and in the page source i can see the script is loaded):
function print_script() {
if (isset($_GET['extrapersoon']) && is_page(21560)){
echo '<script>
window.addEventListener("load", function(){myFunction()};
function myFunction() {
document.getElementsByClassName("woocommerce-checkout").reset();
}
</script>';
}
}
add_action('wp_print_scripts', 'print_script');
I tried other triggers too, such as window.load but no result yet.
Anyone?
You should put the script in the footer using add_action( 'wp_footer', 'print_script' ); to make sure the form gets cleared after the data was loaded into it.
Wordpress has jQuery on default, so I'm using it to look for all the forms in the document and clear them. The function is automatically called on page load, therefore no need for a event listener.
<?php
function print_script() {
if (isset($_GET['extrapersoon']) && is_page(21560)) { ?>
<script type="text/javascript">
( function( $ ) {
$('form').each(function() { this.reset() });
}( jQuery ) );
</script>
<?php }
}
add_action( 'wp_footer', 'print_script' ); ?>
How do I get the current page of a multi page form in Gravity Forms? I've got two solutions that sort of work but neither fully work.
function gf_get_current_page() {
return rgpost( 'gform_source_page_number_' . $_POST['gform_submit'] ) ? rgpost( 'gform_target_page_number_' . $_POST['gform_submit'] ) : 1;
}
This solution works until someone doesn't fill out a required field before hitting the next button. Then it says the user is on page 3 even though they're still on page 2 and need to fix validation errors.
add_action( 'gform_post_paging', 'get_current_page_num_gf', 10, 3 );
function get_current_page_num_gf( $form, $source_page_number, $current_page_number ) {
echo '<script type="text/javascript">console.log(\'' . $current_page_number . '\');</script>';
}
This works well until the validation errors again. In this scenario, instead of changing the page number, it just outputs nothing.
I'd like to know what page the user is on at all times. If they miss a required question on step 2, then I'd like to know that they're still on step 2.
In the end, I'm hoping to send all this information back to Google Analytics and getting accurate information as to what step the user is on is not working well.
Sounds like you're looking for:
GFFormDisplay::get_current_page( $form_id );
For the JS approach use:
<script type="text/javascript">
jQuery(document).on('gform_post_render', function(event, form_id, current_page){
// code to trigger on form or form page render
});
</script>
https://docs.gravityforms.com/gform_post_render/
I have a contact form in my Wordpress website. In that I have three fields Name, Email and Mobile, and a button called Submit. When the user fills all the fields and click on Submit button an email should send which can possible with Contact From 7 plugin.
But challenge here is I need to make the user download a PDF also, when he clicks on Submit button upon filling all the fields.'
How can I achieve this in Wordpress?
You can use the wpcf7_mail_sent hook provided by Contact form 7 like this:
add_action('wpcf7_mail_sent', function ($cf) {
// Run code after the email has been sent
});
This link: https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/ also describes another way:
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer()
{ ?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event )
{
//Write a javascript code to download the file.
} , false );
</script>
<?php
}
Since the on_sent_ok has been deprecated, here is an example you could use as inspiration.
I had the similar 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 );
} );
I'm using contact form 7 and I'm trying to redirect to another page after a successful contact form submission.
I've tried using Contact Form 7 – Success Page Redirects (https://nl-be.wordpress.org/plugins/contact-form-7-success-page-redirects/) but the plugin isn't compatible with the theme and gives some errors.
Is there another way to redirect without using that plugin?
I've found this https://contactform7.com/redirecting-to-another-url-after-submissions/ too, but I'm not able to implement it. The redirection is also only necessary for one contact form on the site, not all of them.
Thank you!
J.
I've seen quite a few answers with the same responses. The major question comes when you have 10 forms and 10 different thank you pages and this solution won't work.
I have a workaround for this.
Step 1: Create a hidden field in your form and add the thank you page URL in that.
[hidden thankyouURL id:thankyouURL default:http://example.com/thank-you/ "http://example.com/thank-you/"]
Step 2: In the DOM event, get the thank you URL from the field and redirect the user.
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
var thankyouURL = document.getElementById("thankyouURL").value;
location = thankyouURL;
}, false );
</script>
That's it.
Add below code in functions.php (located in themes -> themeName Folder)
add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( e ) {
var str = window.location.href;
if( str.includes("flp") ){
window.location.href = "http://www.YourWebsite.com/facebook-thank-you";
} else if( str.includes("glp") ){
window.location.href = "http://www.YourWebsite.com/google-thank-you";
}
}, false );
</script>
<?php
}
I'm trying to do the same thing but yet no success. the on_sent_ok is about to be no longer recommended. Check this page DOM EVENTS on the end of the page you can find the code for a specific form.
What do you do if you have multiple forms on the same page? Using the current answers, this could be a problem (For example, IDs must be unique, or the redirect ID is on the page but the user submits a different form).
The code below attempts to fix these potential issues. This answer uses hidden form fields in CF7, but allows you to have a unique redirect URL for each form without having to edit your JS code every time you create a new form (just use a consistent name, such as "url_redirect" as shown in the code below):
Contact Form 7:
[hidden url_redirect "http://customurl.com?customvar=1"]
Javascript:
document.addEventListener( 'wpcf7mailsent', function( e ) {
var url_redirect = '';
var inputs = e.detail.inputs;
for ( var i = 0; i < inputs.length; i++ ) {
if( 'url_redirect' == inputs[i].name ) {//used for misc forms
url_redirect = inputs[i].value;//set the redirect value from current submitted form
}
}
//Check for redirect
if( url_redirect ){
location = url_redirect;
}
}, false );
****EASY SOLUTION****
The options of using the EventListener script didn't work for me, but I found a super simple solution. Just add the Wordpress plugin called "Redirection for Contact Form 7". (Look at screenshot below).
After installing the plugin, a new tab called "Redirect Settings" will appear when you go inside any of your created Contact Forms ( Look at the 2nd screenshot). Here you have the option of either setting one of your already existing custom pages of the project as redirection url, or setting an external url for the purpose. You also have other options like setting a delay in redirection etc.
I have a "Products" custom post type. Normally, this custom post type have an "Add New" button. I want to add another button call "Update from Provider".
Currently, I have modify the Wordpress code (in "wordpress\wp-admin\includes\class-wp-list-table.php") to add that button. In this case, when I update Wordpress, my modified code will be deleted. Therefore, I need to move that button to my plug-in code.
In this case, please help me how to move that button to my plug-in code.
Well, if you opened the core file you saw that there's no action in it where we can hook.
Only a couple of filters. We can use the following:
add_filter( 'views_edit-movies', 'so_13813805_add_button_to_views' );
function so_13813805_add_button_to_views( $views )
{
$views['my-button'] = '<button id="update-from-provider" type="button" title="Update from Provider" style="margin:5px">Update from Provider</button>';
return $views;
}
It produces this:
To put it in an approximate position from where you'd like, use the following:
add_action( 'admin_head-edit.php', 'so_13813805_move_custom_button' );
function so_13813805_move_custom_button( )
{
global $current_screen;
// Not our post type, exit earlier
if( 'movies' != $current_screen->post_type )
return;
?>
<script type="text/javascript">
jQuery(document).ready( function($)
{
$('#update-from-provider').prependTo('span.displaying-num');
});
</script>
<?php
}
Which results in this: