signature field clear_on_hide?

Seems like these plugins are either abandoned or have very few installs. I have installed the Contact Form 7 Signature Addon on my demo website. Could you create a small form (as a proof of concept) that uses the signature tag in the form tester https://conditional-fields-cf7.bdwm.be/form-tester/ and send me the updated link? Please explain to me what you would like to happen, and I’ll see if I can make it work.

I’ll also check with the author if they plan on updating the plugin, cause I think the signature field is a nice addition but it’s a shame that there seems to be no well maintained plugin right now.

Apologies for the delay. I will try to get that done tonight.

Here are the test forms, with details following:

Form #1

Form #2 (with Signature_Drawn rule parameter)

Form #3 (without Signature_Drawn rule parameter)

What I need is for everything in the non-selected method section to be erased when the user switches from one method to the other, every time a switch is made.
If the user chooses to draw a signature, everything in Signature_File should be erased, and vice-versa.

Ideally, when the user is in the Signature_Drawn method section, the Submit button should be revealed as soon as the field has a value (e.g., when the user first lifts/releases stylus/finger/mouse), and the Submit button should be hidden when the user clicks the Clear button.

Currently, the Drawn image is not being cleared/erased when switching to File method, with all 3 signature plugins I’ve tried. Reloading the page or submitting the form does clear the sig field with all 3 plugins I’ve tried.

Currently, the File image preview is not being erased when switching to Drawn method. It doesn’t get removed after form submission, but does get removed on page reload (in my browsers anyway; I’m not deleting cookies or caches during tests). It is temporarily hidden after form submission, but if you switch to Drawn and then back to File, there it is. There may be a better way of doing the preview. Feel free to play around with that, as I’m not committed to any particular code.
Of course, failure to clear the file preview won’t result in it being sent, since the file selection itself is cleared, so this is more a matter of aesthetics than functionality.

Specific results with the 3 signature plugins follow.

Contact Form 7 Signature Addon:

1. Clear button must be clicked after initial page load or page must be reloaded in order to see/use the drawing box.
2. First click of Submit results in error prompt. Second Submit click results in successful send.
3. Email:
a.) When switching to File upload and clicking Submit for the first time, the Drawn signature is not sent; the File is sent normally.
b.) When switched from File to Drawn after having selected a file, then clicking Submit twice, the Drawn signature is sent; the File is not sent, since the selection is properly cleared (though the preview isn’t).
c.) When sig field is not empty and Submit is clicked once, then switch to File and attach a file, then Submit is clicked there (second total click), both signatures are sent.
d.) When sig field is empty, only the File is sent on the second Submit click.
So, at least it isn’t sending a blank Drawn attachment.

The above tests (Form #1) were without the Submit button being in a group.
Form #2 and Form #3 are after I put Submit in its own group.

4. Submit button will not show while in the Drawn method section when Signature_Drawn is one of the rules – i.e., the plugin doesn’t detect when the signature box has a value. I added an Accept checkbox to show the Submit button (must remove the Signature_Drawn parameter).

So, Form #2 prevents the Submit button from showing.
Form #3 does show Submit (obviously, even when sig field has no value and clicking Clear does not hide it; no joy).

The other 2 plugins yield identical results among themselves, except where noted*.
Signature Field For Contact Form 7 – CF7Sign

Digital Signature For Contact Form 7

1. Unlike the first plugin, the form is sent on first Submit button click.
2. Same as #3 above, except only one Submit click is required.
3. Oddly, when Signature_Drawn has value, clicking a different field (focus) shows the Submit button, effectively turning any field into an “Accept” checkbox. If the Submit button can be made to show as soon as the sig field has value, then there will be no need for the Accept checkbox workaround.
4. Unlike with the first plugin, clicking the Clear button hides the Submit button, as it should.
*5. The Digital Signature For Contact Form 7 email file attachment isn’t working – but, putting the tag in the message body instead provides a URL to view the image in browser.

I will be glad to create additional test forms for the other 2 signature plugins to show their behavior, if you want to install those.

I know this is a lengthy post, but I wanted to be detailed to aid in troubleshooting. Thank you for looking into this. Signature attachment is a great feature to have and I’m sure many of your users will appreciate it.

Hi, I managed to get it to work with this code:

<script>
jQuery('#signature-file').on('change', function(event) {
  var output = document.getElementById('sig-preview');
  if (event.target.files[0]) {
	output.src = URL.createObjectURL(event.target.files[0]);
	output.onload = function() {
		URL.revokeObjectURL(output.src) // free memory
	}
  } else {
    output.src='';
  }
});
jQuery('form').on('wpcf7cf_hide_group', function(e) {
  jQuery('canvas', jQuery(e.target)).each(function() {
    // clear canvas on hide
    const canvas = this;
    const context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
  });
});
</script>

So what I basically did is hook into the wpcf7cf_hide_group event. When the group gets hidden, the canvas is cleared.
Additionally, I expanded the code so that when the file field is empty, the image preview is cleared.

See https://conditional-fields-cf7.bdwm.be/form-tester/?hash=efc21ea81556e366050958c0cfed541a

Thanks! They do clear now, but your plugin doesn’t recognize when the signature canvas acquires a value, which means I still have to use the Accept CTA.
Also, my Submit button isn’t being hidden when Clear is used (with that particular signature plugin), but worse than that, the button now isn’t showing when Accept is checked, either. <gasp!>

I removed your new code and it still won’t show. The conditionals are set the same as with Form #3 above.
In fact, it no longer works with the old test form I had set up prior to uploading to your form tester (where it DOES work). I haven’t added plugins since it was working. Theme is the same. Very strange. It’s like something suddenly got borked site-wide, but it’s only affecting this one thing, across all forms previous and new. Mind blown.

Is there a way I can have your plugin recognize when the canvas has value so that the Submit button will appear immediately after the user begins drawing?

I saw this:

Wpcf7cfForm.prototype.updateEventListeners = function () {
   var form = this; // monitor input changes, and call displayFields() if something has changed
   form.get('input, select, textarea, button').not('.wpcf7cf_add, .wpcf7cf_remove').off(wpcf7cf_change_events).on(wpcf7cf_change_events, form, function (e) {
      var form = e.data;
      clearTimeout(wpcf7cf_timeout);
      wpcf7cf_timeout = setTimeout(function () {
         window.wpcf7cf.updateMultistepState(form.multistep);
         form.updateSimpleDom();
         form.displayFields();
      }, wpcf7cf_change_time_ms);
   });

Would adding “canvas” to the form.get do anything (besides possibly borking the function or other functions down the line)?
I realize directly editing the files makes it not update-friendly, but this site has to be operational in the next few days, and this is one of only a couple things that aren’t working.

Seems like the signature addon is not compatible with recent versions of Contact Form 7. I contacted the author to ask if they are interested in transferring the plugin to me, but they are not, although they are too busy to currently update their plugin themselves.

Someone else created a fork that seems to work fine, please give this one a try: https://github.com/mifist/Contact-Form-7-Signature-Addon

I tried the fork. It does solve the issue of having to click Submit twice, however CF7 still thinks the field has data.

Check your test form again and you’ll see what I mean.

If you clear the sig field using its Clear button, validation prevents send. Click Submit repeatedly and no send.

But, if you clear the canvas by switching to File and back to Drawn, it passes validation (have to hit Submit twice unless you use the Git update). When you open the attachment, you’ll see that a blank one was sent.

That’s really the only thing that needs fixing.
I don’t mind leaving the submit button visible, since the form cannot be sent when the CF7 validator recognizes the field as empty. The problem is, CF7 doesn’t think it’s empty after switching back to Drawn from File, even though the canvas display is blank.