Withdrawal button

Hi @sheilanana

i think it’s impossible because the mail was already delivered to another server where you have no privileges.

Hi Erik,

Thanks for quick response.

Not even if it is within a few seconds?

– Sheila

in this case yes!

it should be enough that you prevent the default when you click the submit button and then after a certain timeout make form.submit happen (if you don’t click the button again).

some js is needed for this, if you need I can write it for you!

hope this fits your needs, I tried to make it configurable and I commented it, if there is something that is not clear I will update it

var delay = 2000; // set the preferred delay before send email
var interval = null; // don't touch this

jQuery(function ($) {

  // displays the button in active state
  function sendDisplayON(btn) {
    btn.val('Abort?');
    btn.addClass('submitting');
    $(btn).siblings('.ajax-loader').css('visibility','visible');
  }

  // displays the button in normal state
  function sendDisplayOFF(btn) {
    btn.val('Send');
    btn.removeClass('submitting');
    $(btn).siblings('.ajax-loader').css('visibility','hidden');
  }

  // on submit
  $('.wpcf7 input[type="submit"]').on('click', function (e) {

    e.preventDefault(); // prevent form submit
    
    var btn = $(this); // store this button into a variable

    if (btn.hasClass('submitting')) {

      clearInterval(interval); // reset the timeout
      sendDisplayOFF(btn);

    } else {

      sendDisplayON(btn);

      interval = setInterval(function () { // waits delay var value then will trigger this function

        clearInterval(interval); // reset the timeout
        sendDisplayOFF(btn);

        wpcf7.submit(btn.closest("form")[0]); // non ajax forms -> btn.closest("form")[0].submit;

      }, delay);
    }

  });
});

https://gist.github.com/erikyo/a93e2a22392a13659029da0181a496a7

Hi Erik,

Thank you so much!

I tried placing the code in my functions.php, but it came with an error. Please see: “syntax error, unexpected ‘var’ (T_VAR), expecting end of file”.

Should I place it somewhere else?

Thank you so much!

ciao @sheilanana

because this is javascript code and can’t work in the php context.

You can add this code at the end of cf7 form template (to be used into a single form but you need to remove empty lines) or into script.js of your parent (or child) theme or even better, some themes have a field where place the js (usually next to the custom css).

it is possible that you have a place to write javascript, in this case I will prepare an action to put in function.php. let me know!

Hi Erik,

I have tried to place it under the single contactform under “additional settings”
and I don’t see a script.js.

I also tried “Google Analytics Tracking Code”, seen in my themes (Enfold) documentation.

Is it maybe possible for you to access my site and tell me where to place it?

Thanks in advance!
– Sheila ??

• This reply was modified 3 years, 5 months ago by sheilanana.

No, absolutely no, it’s against the rules! i can show you how to use that code, that is better!

In your case the easy/faster way is to add that code in the functions.php, but before you need to wrap it into:

function my_scripts() { ?>
	<script>
      var delay = 2000; // set the preferred delay before send email
      var interval = null; // don't touch this

      jQuery(function ($) {

        // displays the button in active state
        function sendDisplayON(btn) {
          btn.val('Abort?');
          btn.addClass('submitting');
          $(btn).siblings('.ajax-loader').css('visibility','visible');
        }

        // displays the button in normal state
        function sendDisplayOFF(btn) {
          btn.val('Send');
          btn.removeClass('submitting');
          $(btn).siblings('.ajax-loader').css('visibility','hidden');
        }

        // on submit
        $('.wpcf7 input[type="submit"]').on('click', function (e) {

          e.preventDefault(); // prevent form submit

          var btn = $(this); // store this button into a variable

          if (btn.hasClass('submitting')) {

            clearInterval(interval); // reset the timeout
            sendDisplayOFF(btn);

          } else {

            sendDisplayON(btn);

            interval = setInterval(function () { // waits delay var value then will trigger this function

              clearInterval(interval); // reset the timeout
              sendDisplayOFF(btn);

              wpcf7.submit(btn.closest("form")[0]); // non ajax forms -> btn.closest("form")[0].submit;

            }, delay);
          }

        });
      });
	</script>
<?php }
add_action('wp_enqueue_scripts', 'my_scripts', 99);

(untested let me know if has worked)

Hi Erik,

I tried and it came up with this agiain: “syntax error, unexpected end of file”

this happens usually because the quotes changes (sometimes while copy and paste) or if you have not copied all the code inside the gray box, try again and add it at the end of functions.php (remove “?>” at the end if there is)

Super it worked!

Now what do I place in the forms to make it show?

nothing, the scripts hooks directly to each submit button inside contact form 7.

eventually you can hack the settings:

var delay = 2000; // set the preferred delay before send email

displays the button in active state

function sendDisplayON(btn) {
  btn.val('Abort?'); // withdraw text
  btn.addClass('submitting'); // you can change the class
  $(btn).siblings('.ajax-loader').css('visibility','visible'); // style the loader?
}

displays the button in normal state

function sendDisplayOFF(btn) {
  btn.val('Send'); // original text, my bad i can store this value... this script need to be refined!
  btn.removeClass('submitting'); // you can change the class but need to be the same 
  $(btn).siblings('.ajax-loader').css('visibility','hidden');
}

Okay thank you Erik – but when I press “Send”, there is no “abort/withdrawal button” appearing?
Has I misunderstood something.

yep sorry @sheilanana i said it wasn’t tested and it’s true!

you need to change the last line with
add_action('wp_footer', 'my_scripts', 10);

at the place of
add_action('wp_enqueue_scripts', 'my_scripts', 99);

try this form if works as expected:
https://modul-r.codekraft.it/test-form/

• This reply was modified 3 years, 5 months ago by Erik.

Hi Erik,

It works perfectly!!! Thank you so much!

Have a wonderful day!