I am having an issue where I have two forms on the same page, and they are in conflicts with each other. The link to the affected page is :hidden link.
After Googling around, I could see a ticket which particularly addreses this problem. ticket -> https://toolset.com/forums/topic/multiple-cred-forms-in-same-page-conflict/
It is said that Toolset Form V 2.2.1.1 has solved the issue. I on the version : 2.5.1 but I am still having the same issue. These two forms create the same post type but are completely different. I also have added AJAX, but it always seems to relaod the page anyways.
Hi Puneet,
Thank you for contacting us and I'd be happy to assist.
To troubleshoot this issue in more detail, I'll need to see how these forms are set up in the back-end. This will allow me to reproduce this on a clean install or see if this is something specific to your website only.
Can you please share temporary admin login details, in reply to this message?
Note: Your next reply will be private and though no changes will be made on your website, please make a complete backup copy, before sharing the access details.
regards,
Waqar
Hi Puneet,
Thank you for waiting.
During troubleshooting on my test website, I noticed that the Elementor plugin's "Popup" content is loaded dynamically on request ( only when the popup opens ) and is not present in the page's markup when it loads.
As a result, Toolset Form placed inside the popup shows, but can't be submitted. This issue is related to how that popup feature works and not having multiple forms on a page.
I've shared these findings with the concerned team and will keep you updated with the progress through this ticket.
For now, as an alternative to that popup feature, you can either use Bootstrap's built-in modal feature ( ref: hidden link ) or use any other third-party popup maker plugin which doesn't load the content, dynamically (using AJAX ).
Example:
Popups - WordPress Popup
( https://wordpress.org/plugins/popups/ )
regards,
Waqar
Hey Waqar,
Upon your recommendation, I have created the whole page using custom code. The new page link is: hidden link.
Here the markup is loaded when the page loads, it is not dynamic, but I am still facing the same issue. Whenver I try to submit the form, the first form triggers and gives me validation errors. Please have a look.
Hi Puneet,
I noticed two issues on this new page:
1. The following line from your content template's custom JS code is resulting in a script error in the browser's console:
( screenshot: hidden link )
trigger.addEventListener("click", toggleModal);
2. The number of opening and closing div tags in the same content template "Content Template for Layout for Pages Layout - 1" do not match, which can disturb the page's actual structure.
There are 104 opening and 106 closing div tags in there.
Please fix these two issues and then check the form again.
I'll also recommend checking if the theme or any third-party plugin includes a code, which triggers the submission of both forms, when one of the submit buttons is clicked.
regards,
Waqar
Hey Waqar,
I have fixed both errors that you pointed out. I am still facing the same error.
" I'll also recommend checking if the theme or any third-party plugin includes a code, which triggers the submission of both forms, when one of the submit buttons is clicked. "
I don't think so there are any JS triggering the submission of both the forms that I can figure out.
Also I have changed the URL slug for the page: hidden link
Unusual behaviour that I found is, if you submit the popup form without filling any field, the validation for that form works, once you correct all the inputs it asks to validate the other which is not the part of that form.
Hi Puneet,
Thank you for sharing the update and sorry to learn that the issue still persists.
Since I'm not able to reproduce this behavior on a clean test install, it seems this is something specific to your website.
Can you please share your website's clone, so that I can perform deeper troubleshooting, without affecting the live website?
( https://toolset.com/faq/provide-supporters-copy-site/ )
Your next reply will be private.
regards,
Waqar
Hi Puneet,
Thank you for sharing the backup files, but unfortunately, the restore through it didn't work because of its size.
I managed to create and download a duplicator package and it installed successfully on my server.
I'm currently performing some tests on that clone and will update you as soon as it completes.
Thank you for your patience.
regards,
Waqar
Hi Puneet,
Thank you for waiting.
During the investigation, I noticed that the jQuery script library was being loaded twice on your website. One instance is being added by WordPress ( as recommended ) and the other one is manually included through the "Head, Footer and Post Injections" plugin.
( screenshot: hidden link )
<script src="<em><u>hidden link</u></em>"></script>
This manual inclusion of jQuery doesn't only interfere with the AJAX script of the forms, but it can also conflict with other scripts used on the website, in general.
Please remove that line and then check the form again, after clearing all involved caches.
regards,
Waqar
This actually resolved my problem.