wpcf7-validation-errors alert-warning

  • agreenstreet

    (@agreenstreet)


    5 years, 7 months ago

    Hi There,

    Thank you for a wonderful plugin. I would like to report what I think is a coding issue for you to consider.

    CF7 v5.1.9 – works fine
    CF7 v5.2 – incorrect [response] code generated on page render BEFORE form submission

    FIRST PAGE RENDER
    When the contact form page is first rendered, here is the [response] code generated:

    <div class=”wpcf7-response-output alert alert-warning“></div>

    CODE ISSUE
    The “alert-warning” class causes CF7 CSS render (in my case due to CSS customization) a red box without any text. Normally default CF7 CSS would show a 1px border.

    When you click on the form SUBMIT button, (without filling in field values) here is the code generated:

    <div class=”wpcf7-response-output alert style>One or more fields have an error. Please check and try again.</div>

    The “alert” class causes the CF7 plugin CSS to hide the alert box border as transparent, this CSS code has not been customized by myself.

    REVERSE BEHAVIOUR?
    The alert and alert-warning behavior seems to be REVERSED from normal operation.

    Shouldn’t the alert box be hidden when the page first renders and then when there is a submission problem show the alert-warning CSS?

    Thank you for your consideration of the issue.

    Aly

    • This topic was modified 5 years, 7 months ago by agreenstreet.

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

Viewing 10 replies - 1 through 10 (of 10 total)
  • edebe2

    (@edebe2)

    5 years, 7 months ago

    I have same issue – just updated cf7 to ver. 5.2 and the alert box appears with red rule below form.

    Anonymous User 17185533

    (@anonymized-17185533)

    5 years, 7 months ago

    I have same issue, just updated cf7 to ver. 5.2 and the alert box appears with red rule below form.

    Anonymous User 17185533

    (@anonymized-17185533)

    5 years, 7 months ago

    FIRST PAGE RENDER
    In my case, when the contact form page is first rendered, show a “alert-warning” in a box empty without any text, with a 1px red border.
    How can it be solved?

    • This reply was modified 5 years, 7 months ago by Anonymous User 17185533.
    Thread Starter agreenstreet

    (@agreenstreet)

    5 years, 7 months ago

    @wporgspix

    We have two choices, see if our friendly plugin developer recognizes this as a coding fault and fixes or if not (this being the new intended plugin behavior).

    Then… reverse our customized CSS rules to do the opposite of what they currently do.

    That is show the “alert-warning” as a transparent 1px border, hiding everything on first page render and show the “alert” as the “alert-warning” CSS code with the 1px red border (or in my case a filled in red box – custom CSS styling).

    I’m holding off and hoping this will be recognized as a bug and the code behavior will be returned to version 5.1.9.

    The third option is to modify the PHP code ourselves with a PHP customization to put 5.2 back to how 5.1.9 worked, at least temporarily.

    Aly

    • This reply was modified 5 years, 7 months ago by agreenstreet.
    Anonymous User 17185533

    (@anonymized-17185533)

    5 years, 7 months ago

    @agreenstreet
    @takayukister

    We hope that the legendary developer will solve it soon!

    Thread Starter agreenstreet

    (@agreenstreet)

    5 years, 7 months ago

    @wporgspix
    @edebe2

    Interesting on another very recently created development site with the same CF7 5.2 version plugin, I am seeing different code presented and the form working correctly.

    The working website shows the following code on first page render:

    HTML
    <div class=”wpcf7-response-output” role=”alert” aria-hidden=”true”></div>

    Associated (default) CSS
    .wpcf7 form.init .wpcf7-response-output {
    display: none;
    }

    Then shows on form submission fault:

    HTML
    <div class=”wpcf7-response-output” role=”alert” aria-hidden=”true”>One or more fields have an error. Please check and try again.</div>

    Associated (default) CSS
    .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {
    border-color: #ffb900;
    }

    This is different HTML than is being rendered on the older CF7 version 5.2 plugin website, where the alert-warning is first shown on page render.

    HTML
    <div class=”wpcf7-response-output alert alert-warning“></div>

    Could it be that older CF7 plugin installs are having a problem with a plugin code upgrade that more recent installs do not? Just speculation, I would need to uninstall the plugin, delete the database tables then do a fresh install to find out on the older website to be sure.

    Aly

    Thread Starter agreenstreet

    (@agreenstreet)

    5 years, 7 months ago

    @wporgspix
    @edebe2

    OK the older site has a different CF7 table structure and the newer site does not contain these tables holding CF7 submission data.

    wp_cf7dbplugin_st
    wp_cf7dbplugin_submits

    Do your problem sites contain these tables?

    Aly

    Thread Starter agreenstreet

    (@agreenstreet)

    5 years, 7 months ago

    @wporgspix
    @edebe2

    OK have found the answer, at least for one of our installs.

    Plugin conflict with Bootstrap for Contact Form 7 causes the issue.

    This plugin hasn’t been updated for a while and I’m guessing won’t be so I will have to replicate the changes it is making manually using the style.css sheet and see if I can avoid the code conflict.

    On my other site that doesn’t use Bootstrap I haven’t yet figured things out.

    Hope this helps you both or at least gives you a clue.

    Aly

    edebe2

    (@edebe2)

    5 years, 6 months ago

    CF7 Issue seems to be resolved with latest theme (Avada) update.

    Thread Starter agreenstreet

    (@agreenstreet)

    5 years, 6 months ago

    @edebe2

    Glad it got fixed for you.

    Aly 🙂

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘wpcf7-validation-errors alert-warning’ is closed to new replies.