• Jason Allen

    (@jasonabmw)


    I am unable to submit my form, it just keeps spinning.

    This is the error I’m seeing from the POST request:

    /wp-json/contact-form-7/v1/contact-forms/291/feedback?_locale=user

    {
      "code": "rest_cookie_invalid_nonce",
      "message": "Cookie nonce is invalid",
      "data": {
        "status": 403
      }
    }

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 15 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    What other plugins and theme do you use on the site?

    Thread Starter Jason Allen

    (@jasonabmw)

    +---------------------------------------------+----------+-----------+---------+
    | name                                        | status   | update    | version |
    +---------------------------------------------+----------+-----------+---------+
    | all-in-one-wp-migration                     | active   | none      | 7.37    |
    | all-in-one-wp-migration-unlimited-extension | active   | none      | 2.38    |
    | cf7-to-zapier                               | active   | none      | 2.2.2   |
    | contact-form-7                              | active   | available | 5.4.0   |
    | flamingo                                    | active   | none      | 2.2.1   |
    | litespeed-cache                             | active   | none      | 3.6.2   |
    | popup-builder                               | active   | none      | 3.76    |
    | raw-html                                    | active   | none      | 1.6.3   |
    | really-simple-ssl                           | active   | none      | 4.0.9   |
    | simple-history                              | active   | none      | 2.39.0  |
    | velvet-blues-update-urls                    | active   | none      | 3.2.10  |
    | wordfence                                   | active   | none      | 7.4.14  |
    | wp-rollback                                 | active   | none      | 1.7.1   |
    | ensure-plugins                              | must-use | none      |         |
    +---------------------------------------------+----------+-----------+---------+

    Note: This issue was on 5.4 but I have currently downgraded CF7 due to this issue being unable to send any form messages.

    Thread Starter Jason Allen

    (@jasonabmw)

    For the theme I use Divi:

    +-----------------+----------+--------+---------+
    | name            | status   | update | version |
    +-----------------+----------+--------+---------+
    | Divi-child      | active   | none   | 1.0     |
    | Divi            | parent   | none   | 4.9.0   |
    | twentytwentyone | inactive | none   | 1.1     |
    +-----------------+----------+--------+---------+
    Plugin Author Takayuki Miyoshi

    (@takayukister)

    What is the “ensure-plugins” plugin? What is this supposed to do? Where did you get it from?

    Thread Starter Jason Allen

    (@jasonabmw)

    Oh, that’s just a simple script I wrote to prevent people from disabling WordFence.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Can you be more specific about it, please? What does it actually do “to prevent people from disabling WordFence”? Why do you need to do so in the first place?

    Thread Starter Jason Allen

    (@jasonabmw)

    It just removes the deactivate button from the Plugins page to prevent it from getting disabled as easily.

    <?php
    
    /**
     * ensure-plugins Disable the deactivate feature on listed plugins
     */
    
    add_filter('plugin_action_links', 'disable_plugin_deactivation', 10, 4);
    function disable_plugin_deactivation($actions, $plugin_file, $plugin_data, $context) {
       if (array_key_exists('deactivate', $actions) && in_array($plugin_file, [
           'litespeed-cache/litespeed-cache.php',
           'wordfence/wordfence.php'
       ])) {
           unset($actions['deactivate']);
       }
       return $actions;
    }
    Plugin Author Takayuki Miyoshi

    (@takayukister)

    OK. The plugin seems to have nothing to do with this issue.

    See Editing form template

    What content do you have in the Form tab panel?

    Thread Starter Jason Allen

    (@jasonabmw)

    Form Tab:

    <div id="covid-form" class="covid-form">
    
      <div id="covid-form-step-1" class="contact_form covid-form-step" style="display: block;">
        <div class="single_field">
          <p>Active screening of all staff, essential visitors and anyone else entering the home for COVID-19 must occur twice
            daily and include symptom screening and temperature checks (i.e., at the beginning and end of shift for staff and
            when essential visitors enter/leave the home).</p>
        </div>
        <div class="flex_fields">
          <div class="single_field">
            <label>Date:
              [date* visit-date class:form-control]</label>
          </div>
          <div class="single_field">
            <label>Time:
              [text* visit-time class:form-control class:dtp-timepicker]</label>
          </div>
        </div>
        <div class="flex_fields">
          <div class="single_field">
            <label>Visitor Name:
              [text* visitor-name class:form-control]</label>
          </div>
          <div class="single_field">
            <label>Phone #:
              [tel* visitor-phone class:form-control]</label>
          </div>
        </div>
        <div class="single_field" style="margin-top: 16px;">
          <p>Hello. We are following the provincial guidelines for screening visitors at retirement homes.</p>
        </div>
        <div class="single_field inline-items" style="margin-top: 16px;">
          <p style="text-transform: uppercase;"><strong>Which direction are you heading?</strong></p>
          [radio visit-direction class:form-control use_label_element "Entering" "Exiting"]
        </div>
        <div class="single_field">
          <p style="text-transform: uppercase;"><strong>Can I confirm your reason for visiting the residence today…
            are you:</strong></p>
        </div>
        <div class="single_field">
          [radio visitor-type class:form-control use_label_element "Staff Member"]
          <ol class="alpha left-pad">
            <li>Staff Member at Bill McMurray</li>
            <li>Kinnect Workers</li>
            <li>Contract Employees</li>
          </ol>
        </div>
        <div class="single_field">
          [radio visitor-type class:form-control use_label_element "Essential Visitor"]
          <p>Essential visitor is:</p>
          <ol class="alpha left-pad spaced">
            <li>
              <strong>Support Worker</strong>
              <span>i.e. regulated health care professional, contract workers, LHIN care services, nursing care,
                physiotherapy, occupational therapy, social worker, maintenance workers, food delivery).</span>
              <strong>NOTE:</strong>
              <span style="color: red;">maximum of 2 caregivers per resident at a time where; the community has NOT been
                identified under Alert or High Alert status; the home is NOT in an outbreak; and the resident is NOT
                self-isolating or symptomatic. A maximum of 1 caregiver per resident may visit where: the community HAS been
                identified under Alert or High Alert status; the home is in an outbreak, or the resident is self-isolating or
                symptomatic.</span>
            </li>
            <li>
              <strong>Caregiver:</strong>
              <span>designated by the resident or substitute decision maker to provide direct care to the resident (personal
                hygiene, cognitive stimulation, communication, meaningful connection, relational continuity and assistance in
                decision making.</span>
              <strong>NOTE:</strong>
              <span style="color: red;">Maximum of 2 caregivers may be designated per resident. If not included, follow up
                with the Administrator for further direction. Maximum of 2 caregivers per resident at a time where; the
                community has NOT been identified under Alert or High Alert status; the home is NOT in an outbreak; and the
                resident is NOT self-isolating or symptomatic. A maximum of 1 caregiver per resident may visit where: the
                community HAS been identified under Alert or High Alert status; the home is in an outbreak, or the resident is
                self-isolating or symptomatic.</span>
            </li>
          </ol>
        </div>
        <div class="single_field">
          [radio visitor-type class:form-control use_label_element "General Visitor"]
          <p>General Visitor is not an Essential Visitor (as stated above) and provides non-essential services (may or may not
            be hired by the home or the resident and/or their substitute decision maker); or social reasons (family members or
            friends); and/or prospective resident touring the home.
            <strong>NOTE:</strong>
            <span style="color: red;">Maximum of 2 general visitors per resident at a time provided that (i) The resident is
              NOT self-isolating or symptomatic, (ii) home is not located in a community that has NOT been identified under
              Alert or High Alert Status and; the home is NOT in an outbreak. A maximum of 1 general visitor designated by the
              resident at a time may visit that resident in a designated area, if the home is located in a community that HAS
              been identified under Alert status.</span></p>
        </div>
        <div class="single_field">
          [radio visitor-type class:form-control use_label_element "Personal Care Service Provider"]
          <p>Personal Care Services Providers provide personal services to residents such as hair
            dressing and nail care.
            <strong>NOTE:</strong>
            <span style="color: red;">Personal care service providers are not permitted if the home is
              in an outbreak or if the home is in community identified under Alert or High Alert status or if the
              resident are self-isolating or symptomatic.</span></p>
        </div>
        <div class="single_field">
          <button class="form-nav-btn next-btn">Next</button>
        </div>
      </div>
    
      <div id="covid-form-step-2" class="contact_form covid-form-step">
        <div class="single_field">
          <h6>It is a requirement of Directive #3 (CMOH) effective October 13, 2020, that you attest that you have:</h6>
          <ol class="decimal">
            <li>Read our Visitors Policy</li>
            <li data-popup-id="264">Read the <a href="javascript:" class="sg-popup-id-264">Public Health Ontario Document</a> entitled; Recommended Steps; Putting on Personal Protective Equipment (PPE)</li>
            <li>Have watched the following Public Health Videos:
              <ol class="alpha">
                <li data-popup-id="300"><a href="javascript:" class="sg-popup-id-300">Putting on full Personal Protective Equipment</a></li>
                <li data-popup-id="298"><a href="javascript:" class="sg-popup-id-298">Taking off full Personal Protective Equipment and</a></li>
                <li data-popup-id="301"><a href="javascript:" class="sg-popup-id-301">How to Hand Wash</a></li>
              </ol>
            </li>
          </ol>
          <label>Do you attest that you have read/viewed the above material?</label>
          [radio covid-acknow class:form-control use_label_element "Yes" "No"]
        </div>
        <div class="single_field">
          <button class="form-nav-btn prev-btn">Previous</button>
          <button class="form-nav-btn next-btn">Next</button>
        </div>
      </div>
    
      <div id="covid-form-step-3" class="contact_form covid-form-step">
        <div class="single_field symptoms">
          <h6>Do you have any of the following symptoms?</h6>
          [checkbox covid-symptoms-check-all class:form-control class:bmw-checkbox use_label_element 'Check "No" to All']
          <div class="inline_field">
            <label>New or worsening cough</label>
            [radio covid-symptoms-cough class:form-control use_label_element "Yes" "No"]
          </div>
          <div class="inline_field">
            <label>Shortness of breath (Dyspnea)</label>
            [radio covid-symptoms-breath class:form-control use_label_element "Yes" "No"]
          </div>
          <div class="inline_field">
            <label>Sore throat</label>
            [radio covid-symptoms-throat class:form-control use_label_element "Yes" "No"]
          </div>
          <div class="inline_field">
            <label>Difficulty swallowing</label>
            [radio covid-symptoms-swallowing class:form-control use_label_element "Yes" "No"]
          </div>
          <div class="inline_field">
            <label>New smell or taste disorder</label>
            [radio covid-symptoms-smell class:form-control use_label_element "Yes" "No"]
          </div>
          <div class="inline_field">
            <label>Nausea/Vomiting, Diarrhea, Abdominal Pain</label>
            [radio covid-symptoms-pain class:form-control use_label_element "Yes" "No"]
          </div>
          <div class="inline_field">
            <label>Runny nose or nasal congestion (in absence of underlying reasons for symptoms such as seasonal allergies)</label>
            [radio covid-symptoms-congestion class:form-control use_label_element "Yes" "No"]
          </div>
          <div class="inline_field">
            <label>Chills</label>
            [radio covid-symptoms-chills class:form-control use_label_element "Yes" "No"]
          </div>
          <div class="inline_field">
            <label>Headache (new or persistent, unusual, unexplained, or long lasting not related to other known causes or condition)</label>
            [radio covid-symptoms-headache class:form-control use_label_element "Yes" "No"]
          </div>
          <div class="inline_field">
            <label>Conjunctivitis (pink eye)</label>
            [radio covid-symptoms-conjunctivitis class:form-control use_label_element "Yes" "No"]
          </div>
          <div class="inline_field">
            <label>Fatigue, lethargy or malaise (general feeling of unwell, lack of energy not related to other known causes or conditions)</label>
            [radio covid-symptoms-malaise class:form-control use_label_element "Yes" "No"]
          </div>
          <div class="inline_field">
            <label>Muscle aches and pains (unexplained, unusual or long Lasting not related to other known causes or conditions)</label>
            [radio covid-symptoms-muscle class:form-control use_label_element "Yes" "No"]
          </div>
        </div>
        <div class="single_field field_inline">
          <h6>Have you travelled or had close contact with anyone that has travelled outside of Canada in the past 14 days?</h6>
          [radio covid-symptoms-travelled class:form-control use_label_element "Yes" "No"]
        </div>
        <div class="single_field field_inline">
          <h6>Do you have a fever?</h6>
          [radio covid-symptoms-fever class:form-control use_label_element "Yes" "No"]
        </div>
        <div class="single_field">
          <button class="form-nav-btn prev-btn">Previous</button>
          <button class="form-nav-btn next-btn">Next</button>
        </div>
      </div>
    
      <div id="covid-form-step-4" class="contact_form covid-form-step">
        <div class="single_field field_inline">
          <h6>Have you had close contact with anyone with respiratory illness or a confirmed or probable of COVID-19 within the last 14 Days?</h6>
          [radio covid-symptoms-contact class:form-control use_label_element "Yes" "No"]
        </div>
        <div class="single_field">
          <button class="form-nav-btn prev-btn">Previous</button>
          <button class="form-nav-btn next-btn">Next</button>
        </div>
      </div>
    
      <div id="covid-form-step-5" class="contact_form covid-form-step">
        <div class="single_field field_inline">
          <h6>Did you wear the required and/or recommended PPE according to the type of duties you were performing (e.g., goggles, gloves, mask and gown or N95 with aerosol generating medical procedures (AGMPs)) when you had close contact with a suspected or confirmed case of COVID-19?</h6>
          [radio covid-symptoms-ppe class:form-control use_label_element "Yes" "No"]
        </div>
        <div class="single_field">
          <button class="form-nav-btn prev-btn">Previous</button>
          <button class="form-nav-btn next-btn">Next</button>
        </div>
      </div>
    
      <div id="covid-form-step-6" class="contact_form covid-form-step">
        <div class="single_field field_inline">
          <h6>As per Directive #3, staff of LTCHs and RHs are not able to work in multiple locations. Is Bill McMurray your only congregate living work location?</h6>
          [radio covid-symptoms-able-to-work class:form-control use_label_element "Yes" "No"]
        </div>
        <div class="single_field">
          <button class="form-nav-btn prev-btn">Previous</button>
          <button class="form-nav-btn next-btn">Next</button>
        </div>
      </div>
    
      <div id="covid-form-step-7" class="contact_form covid-form-step">
        <div class="single_field field_inline">
          <h6>Please ensure you are wearing a surgical mask and face shield and take your temperature. Once you are done, record the highest value received here:</h6>
          <label>Record Temperature (°C): [text* covid-symptoms-temperature class:form-control]</label>
        </div>
        <div class="single_field">
          <button class="form-nav-btn prev-btn">Previous</button>
          <button class="form-nav-btn next-btn">Next</button>
        </div>
      </div>
    
      <div id="covid-form-step-8" class="contact_form covid-form-step">
        <div class="single_field field_inline">
          <h6>Have you been vaccinated for COVID-19?</h6>
          [radio covid-vaccination class:form-control use_label_element "Yes" "No"]
        </div>
        <div class="single_field">
          <button class="form-nav-btn prev-btn">Previous</button>
          <button class="form-nav-btn next-btn">Next</button>
        </div>
      </div>
    
      <div id="covid-form-step-9" class="contact_form covid-form-step">
        <div class="single_field" style="text-align: center;">
          <span style="font-family: ETmodules; font-size: 90px; line-height: 1; color: #15a019;">R</span>
          <h2 style="color: #15a019;">Screening Passed</h2>
          <p>If you are entering our home, please wear a mask for the duration of your stay and self-monitor your symptoms, notifying administrators immediately if you show signs of symptoms. You will be required to re-screen when you are ready to leave our home.</p>
          <p>If the automatic form submission fails to send, click here to <a href="javascript:window.dynamicFormHandle.submitForm()">Resubmit Form</a>. (May result in duplicate submissions)</p>
        </div>
      </div>
    
      <div id="covid-form-step-10" class="contact_form covid-form-step">
        <div class="single_field" style="text-align: center;">
          <span style="font-family: ETmodules; font-size: 90px; line-height: 1; color: #e02b20;"></span>
          <h2 style="text-transform: uppercase; color: #e02b20;">Do not enter, go home and self-isolate immediately</h2>
          <p>If you are a staff member, please contact your manager / immediate supervisor.</p>
          <p>Please contact a primary care provider, local public health unit, or Telehealth Canada to discuss your symptoms and/or exposure for further advice on testing.</p>
          <p>If the automatic form submission fails to send, click here to <a href="javascript:window.dynamicFormHandle.submitForm()">Resubmit Form</a>. (May result in duplicate submissions)</p>
        </div>
      </div>
    
      <div id="covid-form-step-11" class="contact_form covid-form-step">
        <div class="single_field" style="text-align: center;">
          <span style="font-family: ETmodules; font-size: 90px; line-height: 1; color: #e02b20;">Q</span>
          <h2 style="text-transform: uppercase; color: #e02b20;">Please do not enter</h2>
          <p>Your Answers have indicated that as a staff member, Bill McMurray is not your only congregate living work location. Our administrations have already been informed, no further action is required from you. Please leave the premises immediately.</p>
          <p>If the automatic form submission fails to send, click here to <a href="javascript:window.dynamicFormHandle.submitForm()">Resubmit Form</a>. (May result in duplicate submissions)</p>
        </div>
      </div>
    
      <div id="covid-form-step-12" class="contact_form covid-form-step">
        <div class="single_field">
          <h6>Who are you visiting?</h6>
        </div>
        <div class="flex_fields">
          <div class="single_field">
            <label>Tenant Name:
              [text* tenant-name class:form-control]</label>
          </div>
          <div class="single_field">
            <label>Room #:
              [text* tenant-room class:form-control]</label>
          </div>
        </div>
        <div class="single_field">
          <button class="form-nav-btn next-btn">Next</button>
        </div>
      </div>
    
      <div class="single_field">
        [hidden submission-result "Unknown"]
        [submit id:submit-btn]
      </div>
    
    </div>

    Global site javascript for form:

    
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        'use strict';
    
        class DynamicForm {
    
          constructor(form) {
            this.form = form;
            this.stepHistory = [];
            this.currentStep = 1;
    
            this.submitBtn = document.querySelector('#submit-btn');
    
            this.steps = [,];
    
            for (let i = 1; i <= 12; i++) {
              this.steps[i] = form.querySelector(<code>#covid-form-step-${i}</code>);
    
              const prevBtn = this.steps[i].querySelector('.prev-btn');
              if (prevBtn) {
                prevBtn.addEventListener('click', (event) => {
                  event.preventDefault();
                  event.stopImmediatePropagation();
                  this.goToPreviousStep();
                });
              }
    
              this[<code>step${i}Controller</code>]();
            }
    
            form.addEventListener('keydown', (event) => {
              if (event.key === 'Enter' || event.keyCode === 13) {
                this.steps[this.currentStep].querySelector('.next-btn').click();
                event.preventDefault();
                return false;
              }
            });
    
            // Add required attribute to dynamically generated form elements
            const requiredControls = [...form.querySelectorAll('.form-control[aria-required="true"], .form-control input[type="radio"]')];
            requiredControls.forEach((el) => el.required = true);
    
            // Add phone number HTML5 validation
            const phoneInputs = [...form.querySelectorAll('input[type="tel"]')];
            const phonePattern = /^\+?\d?[\-\.\(\s]*\d{3}[\-\.\)\s]*\d{3}[\-\.\s]*\d{4}$/;
            phoneInputs.forEach((tel) => {
              tel.setAttribute('pattern', phonePattern.toString().slice(1, -1));
            });
    
            // Add prefilled values
            const fillDateTime = () => {
              form.elements['visit-date'].value = (new Date()).toLocaleDateString('en-CA');
              form.elements['visit-time'].value = (new Date()).toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit'});
            }
            form.addEventListener('wpcf7reset', fillDateTime);
            fillDateTime();
          }
    
          step1Controller() {
            this.addNextListener(1, () => {
              this.visitorType = this.form.elements['visitor-type'].value;
              if (this.visitorType === 'Staff Member') {
                this.goToStep(2);
              } else {
                this.goToStep(12);
              }
            });
          }
    
          step2Controller() {
            const checkValue = () => {
              const acknowledgement = form.elements['covid-acknow'];
              if (acknowledgement.value !== 'Yes') {
                alert(`
    
                  Please read and attest to the above declarations and policies before continuing.
                  You will not be permitted to enter the building until this has been completed.
                `.trim().replace(/\s{2,}/g, ' '));
                document.body.scrollIntoView();
                this.showError(acknowledgement[0]);
                return true;
              }
    
              this.goToStep(3);
            };
    
            this.addNextListener(2, checkValue, checkValue);
          }
    
          step3Controller() {
            this.addNextListener(3, () => {
              const noInputs = [...this.steps[3].querySelectorAll('input[value="No"]')]
              if (noInputs.every(el => el.checked)) {
                this.goToStep(4);
              } else {
                this.goToStep(10);
              }
            });
    
            const symptomsCheckAll = form.elements['covid-symptoms-check-all[]'];
            symptomsCheckAll.addEventListener('change', (event) => {
              if (symptomsCheckAll.checked) {
                const noInputs = [...this.steps[3].querySelectorAll('.symptoms input[type="radio"][value="No"]')];
                noInputs.forEach((input) => input.click());
              } else {
                const yesInputs = [...this.steps[3].querySelectorAll('.symptoms input[type="radio"][value="Yes"]')];
                yesInputs.forEach((input) => input.click());
              }
            });
          }
    
          step4Controller() {
            this.addNextListener(4, () => {
              const contact = this.form.elements['covid-symptoms-contact'].value;
              if (contact === 'Yes') {
                this.goToStep(5);
              } else {
                if (this.visitorType === 'Staff Member') {
                  this.goToStep(6);
                } else {
                  this.goToStep(7);
                }
              }
            });
          }
    
          step5Controller() {
            this.addNextListener(5, () => {
              const worePpe = this.form.elements['covid-symptoms-ppe'];
              if (worePpe.value === 'Yes') {
                if (this.visitorType === 'Staff Member') {
                  this.goToStep(6);
                } else {
                  this.goToStep(7);
                }
              } else {
                this.goToStep(10);
              }
            });
          }
    
          step6Controller() {
            this.addNextListener(6, () => {
              const ableToWork = this.form.elements['covid-symptoms-able-to-work'];
              if (ableToWork.value === 'Yes') {
                this.goToStep(7);
              } else {
                this.goToStep(11);
              }
            });
          }
    
          step7Controller() {
            this.addNextListener(7, () => {
              const temperature = this.form.elements['covid-symptoms-temperature'];
              if (parseFloat(temperature.value) < 37.8) {
                this.goToStep(8);
              } else {
                this.goToStep(10);
              }
            });
          }
    
          step8Controller() {
            this.addNextListener(8, () => {
              this.goToStep(9);
            });
          }
    
          step9Controller() {}
    
          step10Controller() {}
    
          step11Controller() {}
    
          step12Controller() {
            this.addNextListener(12, () => {
              this.goToStep(2);
            });
          }
    
          addNextListener(step, cbValid, cbInvalid) {
            const nextBtn = this.steps[step].querySelector('.next-btn');
            nextBtn.addEventListener('click', (event) => {
              event.preventDefault();
              event.stopImmediatePropagation();
    
              const validity = this.checkValidity(this.steps[step]);
              if (validity.isValid) {
                return cbValid();
              } else {
                // Exit before reporting validity if cbInvalid returns true
                if (cbInvalid && cbInvalid()) return;
    
                document.body.scrollIntoView();
                if (!validity.invalidInput.type === 'radio') {
                  validity.invalidInput.reportValidity();
                }
              }
            });
          }
    
          checkValidity(step) {
            let formValid = true;
            let firstInvalidInput = undefined;
            const els = [...step.querySelectorAll('.form-control:not(span), .form-control input[type="radio"]')];
            els.forEach(el => {
              const valid = el.checkValidity();
              formValid = formValid && valid;
              if (!valid) {
                firstInvalidInput = firstInvalidInput || el;
                this.showError(el);
              }
            });
            return {
              isValid: formValid,
              invalidInput: firstInvalidInput,
            };
          }
    
          showError(input) {
            if (input.errorNode) return;
            input.errorNode = document.createElement('span');
            input.errorNode.classList.add('wpcf7-not-valid-tip');
            input.errorNode.setAttribute('aria-hidden', 'true');
            input.errorNode.textContent =
              input.type === 'tel'
              ? 'Please enter a valid phone number.'
              : 'The field is required.';
    
            input.insertAdjacentElement('afterend', input.errorNode);
    
            if (input.type === 'radio') {
              input.addEventListener('change', (event) => {
                this.form.elements[input.name].forEach(input => {
                  if (input.errorNode) {
                    input.errorNode.remove();
                    delete input.errorNode;
                  }
                });
              }, {once: true});
            } else {
              input.addEventListener('input', (event) => {
                input.errorNode.remove();
                delete input.errorNode;
              }, {once: true});
            }
          }
    
          goToStep(step, saveHistory = true) {
            this.steps[this.currentStep].style.display = '';
            this.steps[step].style.display = 'block';
            if (saveHistory) {
              this.stepHistory.push(this.currentStep);
            }
            this.currentStep = step;
            document.body.scrollIntoView();
    
            if ([9, 10, 11].includes(step)) {
              this.submitForm();
            }
          }
    
          goToPreviousStep() {
            const lastStep = this.stepHistory.pop();
            lastStep && this.goToStep(lastStep, false);
          }
    
          submitForm() {
            const submissionResult = this.form.elements['submission-result'];
            if (this.currentStep === 9) {
              submissionResult.value = 'Pass';
            } else {
              submissionResult.value = 'Fail';
            }
    
            const symptomsCheckAll = form.elements['covid-symptoms-check-all[]'];
            symptomsCheckAll.value = 'N/A';
    
            this.stepHistory.push(0, this.currentStep);
            this.steps.forEach((step, i) => {
              if (this.stepHistory.includes(i)) return;
    
              [...step.querySelectorAll('input')].forEach(input => {
                input.value = 'N/A';
                input.checked = true;
              });
            });
    
            this.submitBtn.click();
          }
    
        }
    
        const form = document.querySelector('#covid-form').closest('form');
        if (form) window.dynamicFormHandle = new DynamicForm(form);
    
      });
    </script>
    

    TL;DR: The form is made to appear to be multiple pages, and the submit button is hidden, but once they get to the end, the original CF7 submit button is clicked using JavaScript to submit the form.

    • This reply was modified 4 years ago by Jason Allen. Reason: Attempt to fix code block
    Thread Starter Jason Allen

    (@jasonabmw)

    Note that this works fine with 5.3.2, but breaks under 5.4.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    Try deactivating that script.

    Thread Starter Jason Allen

    (@jasonabmw)

    I am unable to test this at the moment, but it’s just hiding the submit button with CSS then clicking it with document.querySelector(buttonString).click() so it shouldn’t be an issue, and since we’ve rolled back to 5.3.2 it’s currently working again on the old version.

    mrtvy.kenny

    (@mrtvykenny)

    Im having the same problem. I have form on the page and this happens on page startup.

    View post on imgur.com

    I can confirm this issue exists, but only happen when you had enabled page-caching because the nonce itself is cached inside the generated HTML cached page.

    Not fancy, but my current solution is to disable the cache on a page which have contact form 7. Hope this helps someone out there.

    This has recently started happening for us too. We also have page caching. Looks to be the issue.

    Unfortunately, we have a form at the bottom of every page. Sigh…

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Cookie nonce is invalid’ is closed to new replies.