This contact form is located in the wrong place

Where can we see the website in question?

I can confirm this behavior … At least on sites where I have encountered this, it was because our web author was using a container inside of the contact form with a class of wpcf7.

e.g.

Inside of a cf7-form

<div class="wpcf7 etc">
<stuff />
</div?

Stemming from a recent CF7 update in which this occurs on index.js –

document.querySelectorAll(“form .wpcf7”).forEach((t=>{
const a = document.createElement(“p”);
a.setAttribute(“class”, “wpcf7-form-in-wrong-place”);

(etc)

The fix for us was to not have containers/objects in the contact form that had a wpcf7 class embedded on them.

Hope this helps.

We also encountered this issue, and it is strange that removing the container/enclosing element fixed it.

Fixing “This Contact Form is Placed in the Wrong Place” Issue in WordPress

The Problem

After updating the Contact Form 7 plugin, you might notice that your forms are no longer displaying correctly. Instead, you get an error message stating that the form is “placed in the wrong place.” This can be frustrating, especially if your forms were working perfectly fine before the update.

The Solution

The good news is that the solution is straightforward: update your form’s code. Here’s what you need to do:

1. Check Your Created Form Code: Start by reviewing the code of the contact form you’ve created. Look for any outdated or deprecated tags and syntax that may have been affected by the plugin update.
2. Update the Form Code: Make the necessary adjustments to ensure compatibility with the latest version of Contact Form 7. This might involve modifying HTML structure, shortcodes, or other elements of the form.
3. Test the Form: After making the updates, test your contact form on different pages of your website to ensure that the issue is fully resolved.

My Experience

I faced this issue myself after updating Contact Form 7. The form that was previously working fine started throwing the “wrong place” error. By updating the form code according to the latest standards, I was able to resolve the issue quickly.

Conclusion

If you’re facing the same problem, I encourage you to check your created form code. A few simple updates could save you from the hassle of dealing with misaligned forms.

Thank you for reading, and I hope this helps you keep your WordPress forms running smoothly!

Below is my Updated code:

<div class="row">
    <div class="form-group col-md-6">
        <i class="fal fa-user"></i> 
        [text* firstname id:firstname class:form-control placeholder "Smith"]
    </div>
    <div class="form-group col-md-6">
        <i class="fal fa-user"></i> 
        [text* lastname id:lastname class:form-control placeholder "John"]
    </div>
    <div class="form-group col-md-6">
        <i class="fal fa-envelope"></i> 
        [email* email id:email class:form-control placeholder "Your Email"]
    </div>
    <div class="form-group col-md-6">
        <i class="fa-regular fa-phone-flip"></i> 
        [number* phoneno id:phoneno class:form-control placeholder "Phone Number"]
    </div>
    <div class="form-group col-md-6">
        <i class="fa-regular fa-child"></i> 
        [number* age id:age class:form-control placeholder "Add Age"]
    </div>
    <div class="form-group col-md-6">
        [select* batch id:batch class:form-select class:nice-select "Select Batch"  "Kid’s" "Yoga" "Other"]
    </div>
    <div class="form-group col-12">
        <i class="fal fa-comment"></i>
        [textarea* textarea-445 id:textarea-445 class:form-control placeholder "Your Message"]
    </div>
    <div class="contact-form-btn col-12">
        [submit class:th-btn class:blue-btn "Send Message"]
    </div>
</div>
<p class="form-messages mb-0 mt-3"></p>

• This reply was modified 3 months, 3 weeks ago by Pratiksha Sable. Reason: For more clarification added code

I have solved the problem by rolling back to a previous version last time this happened a few months ago. Now I read it could be because some of the syntax could be deprecated. OK. But where do I find a list of what is deprecated and what is not?

I have checked the syntax using the docs, and at least for the first two fields I have checked nothing looks wrong.

This is quite frustrating, I am considering switching to a different form for all my websites.

Attention everyone “me, tooing” on this topic:

If you need support then per the forum guidelines?please start your own topic?at?https://www.ads-software.com/support/plugin/contact-form-7/#new-post

https://www.ads-software.com/support/forum-user-guide/faq/#i-have-the-same-problem-can-i-just-reply-to-someone-elses-post-with-me-too