Double Opt-In not working

When I try to add a member to the newsletter using the Hustle embed form, the double opt-in email isn't sent. When I try to send a newsletter, it isn't sent either. Other e-mails are sent.
Last week or something, it worked fine.

  • Greg

    Dear Ash,

    I did as you requested.
    I thought that "Hustle local list" was the same as "eNewsletter".

    Now, I've enabled it on all three optins.
    I also disabled the Hustle local list, since I won't be needing it.

    I ran another test, subscribing from the homepage : https://devblog.defi-ecologique.com/
    (the embed form in the hero shot).

    1) It takes a huge amount of time to submit the form. Once I click the button, I wait between 5 to 10 seconds before something happens
    2) I do not receive the double opt-in email. Only the welcome e-mail, that's supposed to be send only once the inscription is confirmed.
    3) I re-enabled the Hustle local list, to see if it was responsible from this missing double opt-in e-mail, but it isn't.

    Could you please help me get the sequence right ?

  • Ash

    Hello Greg

    I have just checked the optin on your site again. Here is my observation:

    1) If it takes 5 seconds, that is not very slow. When I tested, it took 6 seconds. Please note, when you submit the button, it creates a completely new connection between your browser and server, sends the data, saves the data, sends the email, sends back the response to the browser and then it redirects.
    2) After my testing, I got the opt-in email, here is the screenshot:

    It reached at my inbox, but would you please check your spam box toor?
    3) When I tested, local Hustle list was disabled. It not even required to work with e-newsletter integration :slight_smile:

    So, would you please check one more time and at the same time, would you please make a video screencast so that I can see too?

    Have a nice day!

    Cheers,
    Ash

  • Ash

    Hello Greg

    I found the confusion between us. I was working on the hustle popup form, where you were checking on the homepage. That's a different one.

    Now, I have checked that one too, it's Hustle embed and you had double optin disabled. I have enabled for now, please check and let me know :slight_smile:

    About the loading icon, please try the following code:

    add_action( 'wp_head', function() {
    ?>
    <script>
        jQuery(function($){
            var loader = '<div class="custom_loader" style="width:100%; height:100%; background: url(https://www.defi-ecologique.com/wp-content/uploads/loader.gif) 50% 50% no-repeat #fff; position: absolute; top: 0; left: 0; z-index: 999; opacity: 0.7">';
            $('.module_id_4').css( 'position', 'relative' );
            $(document).on('click', '.module_id_4 .hustle-modal-optin_button', function(){
                $('.module_id_4 .hustle-modal-body').prepend(loader);
            });
    
            setInterval( function(){
                if( $('.wpoi-submit-failure').length )
                {
                    $( '.custom_loader' ).remove();
                }
            }, 500);
        });
    </script>
    <?php
    } );

    You can use this code in your child theme's functions.php if the theme is not changed. Otherwise mu-plugin is the best option. To create a mu-plugin, go to wp-content/mu-plugins folder. If there is no mu-plugins folder then, create one. Now, inside the mu-plugins folder create file with name anything.php (make sure file extension is .php). Now start with a <?php tag and then put the above code.

    Hope it helps! Please feel free to ask more questions if you have any.

    Have a nice day!

    Cheers,
    Ash

  • Greg

    Dear Ash,

    Thank you for your help.
    I'm sorry for the delay in my answer, but I've had to work hard for another project lately.

    1) thank you for the loader icon code, it works like a charm.
    However, it only works on one of the forms (the embed one, the slide-in and the pop-up don't have loading icons)

    2) I don't understand how double opt-in could be disabled for a hustle form, since it is an e-newsletter parameter...
    Anyways, now it works fine on all three forms.

    3) When people subscribe, they are redirected to a thank you page, explaining that they still need to confirm their address as well as inviting them to add our address to their contact book.
    Anyways, in this page I added a "return to previous post" button, since most people will end-up there while reading a post.

    However, this page doesn't redirect to the previous page, but the one before.
    For instance, if I am on the index and click on a post to read it, and subscribe to the pop-up form of this post, then I am redirected to the "thank you page". There, if I click on the "go back to previous page" button, I am sent back to the index instead of the post I was reading.

    <p><a class="cta cta_accent" href="javascript://" onclick="history.back();"><< Page précédente</a></p>

    4) After runing my tests, the opt-in on the homepage isn't visible anymore.
    How may I make sure that the embed form is always visible ? The pop-up form should also always be available, no matter how the visitor interacted with it before.

  • Ash

    Hi there

    1) thank you for the loader icon code, it works like a charm.
    However, it only works on one of the forms (the embed one, the slide-in and the pop-up don't have loading icons)

    Please send me a link of the slide in and popup again and I will try to modify.

    #3 and #4 are related. Let's give the following a try:

    add_shortcode( 'referral_page', function() {
    	$url = false;
    
    	if( isset( $_SERVER['HTTP_REFERER'] ) && $_SERVER['HTTP_REFERER'] )
    	{
    		$url = $_SERVER['HTTP_REFERER'];
    
    		return '<p><a class="cta cta_accent" href="' . $url . '"><<&nbsp;Page précédente</a></p>';
    	}
    
    	return $url;
    } );

    Now instead of the following button code:

    <p><a class="cta cta_accent" href="javascript://" onclick="history.back();"><<&nbsp;Page précédente</a></p>

    try this shortcode:

    [referral_page]

    Let me know if it works. Have a nice day!

    Cheers,
    Ash

  • Greg

    Dear Ash,

    Thank you for your answer.
    1) You may find the pop-up on any post (for instance : https://devblog.defi-ecologique.com/reseaux-mycorhiziens/ ), in the right sidebar (click on the "Télécharger" button).

    The slide-in will appear on the bottom right corner after you scroll down any post (I think it's 30% or 50%). It's displayed only twice, so you may need to flush your cache to see it again.

    3) Thank you , this shortcode works perfectly !

    4) So far, the form is visible again, I'll update this ticket if it disappears again.

  • Ash

    Hello Greg

    Instead of my previous code, please try the following:

    add_action( 'wp_head', function() {
    	?>
    	<script>
    
    		jQuery(function($){
    			var loader = '<div class="custom_loader" style="width:100%; height:100%; background: url(https://www.defi-ecologique.com/wp-content/themes/defi-ecologique-staging-child-blog/images/loader.gif) 50% 50% no-repeat #fff; position: absolute; top: 0; left: 0; z-index: 999; opacity: 0.7">';
    
    			$('.hustle-modal-body').css( 'position', 'relative' );
    			$(document).on('click', '.hustle-modal-optin_button', function(){
    				$(this).closest('.hustle-modal-body').prepend(loader);
    			});
    
    			setInterval( function(){
    				if( $('.wpoi-submit-failure').length )
    				{
    					$( '.custom_loader' ).remove();
    				}
    			}, 500);
    		});
    	</script>
    	<?php
    } );

    Hope it helps! Have a nice day!

    Cheers,
    Ash

  • Ash

    Hi there

    Sure, please follow the steps:
    1. Download the attached zip file
    2. Unzip and get the extra.js file
    3. Upload the file in your child theme's js folder
    4. Now add the following code to your child theme's functions.php file:

    function custom_theme_name_scripts() {
        wp_enqueue_script( 'extra-custom-js', get_stylesheet_directory_uri() . '/js/extra.js', array( 'jquery' ), '1.0.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'custom_theme_name_scripts' );

    Here get_stylesheet_directory_uri() . '/js/extra.js' is basically URL to the extra.js file.

    Hope it helps! Have a nice day :slight_smile:

    Cheers,
    Ash

  • Greg

    Dear Ash,
    Thank you for this code.
    Here is what I'm using :

    $pages_exclues = array(
    		4964 , //Ecrire sur le blog
    		5362 , // Mentions légales
    		5365 , // Ressources exclusives
    		5368, // Bientôt fini
    		5370 , // Bienvenue sur la e-gazette
    		5372 , // Désinscription
    	);
    	if( !in_array( get_the_ID() , $pages_exclues ) )
    		wp_enqueue_script( 'hustle_form_loader_icon', get_stylesheet_directory_uri() . '/js/hustle_form_loader_icon.js', array( 'jquery' ), '1.0.0', true );

    This is supposed to load the script only on pages that contain a form (most pages).

    However, if I go on the page ID 5362 ( https://devblog.defi-ecologique.com/mentions-legales/), then this is what I see in the source code :

    <script type='text/javascript' src='https://devblog.defi-ecologique.com/wp-content/themes/defi-ecologique-staging-child-blog/js/hustle_form_loader_icon.js'></script>

    Which means that the script is loaded even on an excluded page.

    Could you please help me resolve this ?