Disabled the Button to Prevent Duplicate Submissions Conflict

  • Resolved xellagm

    (@xellagm)


    1 year ago

    Hello,

    I use your great plugin on a website since a moment, but I’ve updated recently my core and plugins, and since then I have a strange thing that is related to this functionnality : “Disabled the Button to Prevent Duplicate Submissions”.

    I’ve studied your code, and I see that you disabled the submit button of the form when we are uploading files (which is a great idea), but my problem is that you remove disable attribute only if user has checked all acceptances buttons, or if acceptances buttons are optionals, or if the form has this class ‘wpcf7-acceptance-as-validation’.

    But in my case, I don’t have the class on my form, all my acceptances buttons are required, so the problem is that when I add files on the field, I can’t submit my form if i did not check acceptances buttons, because the button stay disabled (but my acceptances buttons are after the upload input).

    I think it would be great to remove disabled attribute after an upload even if acceptances buttons are not checked, this verification will be done by CF7 when we try to submit the form if theses fields are required.

    Thank you in advance !

    • This topic was modified 1 year ago by xellagm.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Glen Don Mongaya

    (@glenwpcoder)

    Hi @xellagm,

    Can you please share your Contact Form 7 form code?

    Thanks.

    Thread Starter xellagm

    (@xellagm)

    Hello,

    Here is an exemple of code : 

    <div class="form">
<div class="form-input form-column">
    <div class="form-row"><label for="last_name" class="label required">Last Name</label>[text* nom id:nom]</div>
   <div class="form-row"><label for="first_name" class="label required">First Name</label>[text* prenom id:prenom]</div>
</div>
<div class="form-input form-column is-70-30">
  <div class="form-row"><label for="email" class="label required">Email</label>[email* email id:email]<div class="error-msg">Please fill your email.</div></div>
  <div class="form-row"><label for="telephone" class="label required">Phone</label><div>[text* telephone id:telephone]</div><div class="error-msg">Please fill a valid number.</div></div>
</div>
<div class="form-sectitle">Message*</div>
<div class="form-input form-column">
  <label for="message" class="label sr-only">Your message</label>[textarea* message id:message x6 placeholder ]<div class="error-msg">Please write a text.</div>
</div>
<div class="form-input form-column uploads">
    <span class="infosuploads">11 Mo maximum.</span>
    [mfile pieces_jointes limit:10485760 filetypes:jpg|jpeg|png|pdf|zip|gif max-file:6 id:pieces_jointes]
     <div class="error-msg">You cannot transfer more than 11MB of file. Please delete or compress files.</div>
</div>
<div class="form-input form-column sr-only">
     [honeypot email-pot id:email-pot]
     [hidden url_redir id:url_redir default:shortcode_attr]
     [hidden lang id:lang default:shortcode_attr]
</div>
<div class="form-input form-column rpgd-column">
[acceptance cgu id:cgu class:cgu]<span>I accept terms and conditions.[/acceptance]<div class="error-msg">Please accept this condition to send your message.</div>
</div>
<div class="form-input form-column rpgd-column">
[acceptance rgpd id:rgpd]<span>I consent to the collection and processing of my personal health data.*</span>[/acceptance]<div class="error-msg">Please accept this condition to send your message.</div>
</div>
<div class="form-input form-column">
    [button_submit]
</div>
</div>
    Plugin Author Glen Don Mongaya

    (@glenwpcoder)

    Thanks @xellagm.

    Sorry I forgot to ask may I know if you are using free or pro version?

    And what is the current version of the plugin.

    Plugin Author Glen Don Mongaya

    (@glenwpcoder)

    Also, just to give you an overview of what our plugin does.

    If user upload the file it will disabled the submit button to prevent the submission while the upload is in progress.

    We only remove the disabled attribute if acceptance is optional, checked or form has wpcf7-acceptance-as-validation class.

    When you create an acceptance field in Contact Form 7, the submit button will be disabled by default, as you can see here: https://contactform7.com/acceptance-checkbox/. Enabling it after the upload defeats the purpose of CF7, which disables it initially.

    I decided not to enabled the submit button (if not meet on condition above) once the upload is complete so it doesn’t override the default functionality of cf7.

    You can try and deactivate our plugin then go to your form, you will not able to click the button if you didn’t check the acceptance field.

    This feature or functionality, ‘Disable the Button to Prevent Duplicate Submissions’ is not related to the upload process. It serves as a preventative measure when a user has already submitted the form. Upon submission, the form is checked to see if it’s currently submitted. If true, the [submit_button] is disabled. This precaution is taken because some users may click the submit button multiple times, resulting in duplicate entries being received in your email.

    I hope this will help let me know if you have any question.

    Glen

    Thread Starter xellagm

    (@xellagm)

    Hello Glen,

    Thanks for your answer, my problem came from the fact that I use custom code, and I don’t use [submit] element for my submit button, and this is why when I check the acceptance checkbox it’s not unlocked my submit button.

    I didn’t see the cf7 demo of acceptance button, but now I understund why you did this, thanks for sharing the link. Thank you for your answer, I’ll keep my solution to add ‘wpcf7-acceptance-as-validation’ to the form so It’s working, or I will use classical checkbox instead of acceptance shortcode.

    Thank you for your time, you can close this ticket.

    • This reply was modified 11 months, 4 weeks ago by xellagm.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Disabled the Button to Prevent Duplicate Submissions Conflict’ is closed to new replies.