Incorrect error output with two forms on one page

  • Have a wonderful good day,

    we are using Contact Form 7 on our website and now we have the following problem. We have integrated a form in the header, hidden in the “Deine Beratung” (Your advice) button, and another form which appears when you click on the “Lehrgang anfragen” (Request a course) button below on the page.

    If I send the second form blank, however, the error is shown in the first form. My browser inspector gives me the following:

    TypeError: Cannot read properties of null (reading ‘querySelector’)
    at s (index.js? ver = 5.5.3: 1)
    at Array.forEach (<anonymous>)
    at index.js? ver = 5.5.3: 1
    (anonymous) @ index.js? ver = 5.5.3: 1

    I was also able to test the error on a newly installed WordPress environment on which only the Contact Form 7 plugin was installed.

    The desired goal would be if the error output is only displayed in the form that generated one.

    I already say thank you in advance for any help.

    Cheerio.

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

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

    (@takayukister)

    See Editing form template

    What content do you have in the Form tab panel?

    Thread Starter Goran Peric

    (@androjaner)

    Here is the code from one of the forms. In principle, the other forms are structured identically. What are we missing? ?? ??

    Perhaps as additional information: The structure is based, among other things, on the fact that we are using MD Bootstrap.

    <div class="kt-form"><div class="md-form md-outline input-with-pre-icon pre-icon"><i class="fas fa-user input-prefix"></i><i class="fas fa-exclamation-circle input-prefix input-error"></i>[text* your-name id:your-name class:form-control] <label> Vorname Nachname </label></div><div class="error-message"></div></div>

<div class="kt-form"><div class="md-form md-outline input-with-pre-icon pre-icon"><i class="fas fa-phone input-prefix"></i><i class="fas fa-exclamation-circle input-prefix input-error"></i>[text* your-tel id:your-tel class:form-control] <label> Telefonnummer </label></div><div class="error-message"></div></div>

<div class="kt-form"><div class="md-form md-outline input-with-pre-icon pre-icon"><i class="fas fa-envelope input-prefix"></i><i class="fas fa-exclamation-circle input-prefix input-error"></i>[email* your-mail id:your-mail class:form-control] <label> E-Mail-Adresse </label></div><div class="error-message"></div></div>

<div class="submit_row narrow-form"><a href="/datenschutzerklaerung/" class="dataprotection-link">Datenschutzbestimmungen</a>[submit class:kt-btn class:kt-primary "Anruf anfordern" "Anruf anfordern"]</div>

<style>
form.wpcf7-form { background: transparent !important; } 
</style>

<div class="_loader"><div class="_content"><i class="fal fa-spinner fa-spin"></i><span>Anfrage wird versendet ...</span></div></div>
    • This reply was modified 3 years, 2 months ago by Goran Peric.
    Plugin Author Takayuki Miyoshi

    (@takayukister)

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

    Thread Starter Goran Peric

    (@androjaner)

    Hi. Actually, in my opinion, it doesn’t matter which other plugins are installed, because as already written above, I tested the whole thing on a newly installed WordPress instance on which only Contact Forem 7 was installed (and the latest theme from WP). Nothing else.

    I used the HTML code published above in the “Form Tab Panel” …

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Incorrect error output with two forms on one page’ is closed to new replies.