Contact Form 7 not submitting using Ajax - wordpress

I have a form that's inserted into a template using shortcode
<?php echo do_shortcode('[contact-form-7 id="370" title="Contact form 1"]') ?>
I'm trying to setup an event so that when the form is submitted I can redirect the user to another page. I'm using the following;
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://example.com/';
}, false );
</script>
The problem is, when you submit the form, the whole page is reloaded so the event is never triggered because the form isn't submitted via an ajax call.
This is the first time I'm trying to integrate a form into Wordpress, so I think I may have missed something. There are no errors in the developer console in Chrome.

Somewhere in your theme (check functions.php) or your wp-config.php file, you need to look for and remove the following:
functions.php
add_filter( 'wpcf7_load_js', '__return_false' );
config.php
define( 'WPCF7_LOAD_JS', false );
These lines would prevent the default behavior of CF7.

My theme was missing;
Adding that solved the issue.

Related

Refreshing mini-cart when following the link to checkout/order-received

Auto-updating the cart on the site using this action works well:
add_action( 'wp_footer', 'cart_update_qty_script' );
function cart_update_qty_script() {
if (is_cart()) :
?>
<script>
jQuery('div.woocommerce').on('change', '.qty', function(){
jQuery("[name='update_cart']").removeAttr("disabled").trigger("click");
});
</script>
<?php
endif;
}
The cart and the ordering page have been united into one (just "cart")
When switching from the "cart" page to the "checkout/order-received" page, the mini-cart does not become zero. Only updating manually makes the mini-basket null. (Basically, you have already finished with the order, getting thanked for your order, yet the miniature is still not refreshed.)
Is there any way to fix it? I use WooCommerce 6.5.1. Payment is disabled on the site.

Using do_shortcode() with contact form 7 and form tag is missing

I’m trying to use the contact form in my template using do_shortcode and popup (Request availability button on a page). But I’ve noticed that form generated only inputs without <form> tag as usual so it failed to submit.
That’s how I’m implementing it in functions.php
function wc_shop_popup() {
$reqform = '[contact-form-7 id="987" title="Request availability"]';
echo '<a class="button button_full_width button_left req_button popup-link" href="#popup-availability" rel="lightbox" data-type="inline"><span class="button_icon"><i class="icon-layout"></i></span><span class="button_label">Request Availability</span></a>
<div id="popup-availability" class="popup-content mfp-hide"><div class="popup-inner" style="padding:20px;">'.do_shortcode($reqform).'</div></div>';
}
add_action( 'woocommerce_after_add_to_cart_button', 'wc_shop_popup' );
This is the page - Request availability button. Any suggestions?
The problem was that contact form has been generated inside of add to cart form. I used another woocommerce hook called "woocommerce_after_single_product_summary" instead of "woocommerce_after_add_to_cart_button" and it's working!

Contact form 7 redirecting issue

After submission, my contact form redirects to a URL followed by an unfamiliar code like #wpcf7-f1258-o1. but i used on_sent_ok: "my_redirect();" on additional heading.
Please help!
The on_sent_ok method has been removed from Contact Form 7.
See: https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/
Try using a hook on the page where the contact form is located:
add_action('wp_head', 'cf7_redirect_script');
function cf7_redirect_script(){
if(is_page('page-slug') { ?> // slug of the page which your contact form is on (can also be an ID)
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
// put the desired redirect URL below
location = 'http://yourdomain.com/thank-you';
}, false );
</script>
<?php }
}

Send an Email and Download a PDF on click of Contact Form 7 Submit button

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 );
} );

Hide page for logged in Users

I wanna do the following:
If a user is logged out, he can view the page id=10, if a user is logged in and view page id=10 he will be redirected to page id=5. I tried adding the below code into my header, but it didn't work.
add_action( 'init', 'check_redirect_page' );
function check_redirect_page() {
if ( is_user_logged_in() && is_page( 10 ) ) {
wp_redirect( get_permalink( 5 ) );
exit;
}
}
Try using the wp hook rather than init; WordPress won't have got far enough at init to know whether it's dealing with a particular page or not.
add_action( 'wp', 'check_redirect_page' );
From the Conditional Tags documentation:
Warning: You can only use conditional query tags after the
posts_selection action hook in WordPress (the wp action hook is the
first one through which you can use these conditionals). For themes,
this means the conditional tag will never work properly if you are
using it in the body of functions.php, i.e. outside of a function.

Resources