I have a page built in Elementor that includes a Toolset Form widget. The form uses conditional logic to show/hide a field group, and everything works perfectly.
I would like to include this same form in an Elementor Popup, but if I place the same Toolset Form widget in a popup, the conditional fields no longer function.
Is this a known issue and is there any workaround?
Hi, I'm not aware of a known issue with Elementor popups but I'll be glad to take a look and see if there's something we can do to fix the problem. As a quick test, is it possible to place the same Form on a page where the popup will be displayed, then test the Form in the popup over this page? I'm curious to see if placing the Form on the page when the page loads will result in loading the correct scripts and assets for the popup Form.
Please let me know the results of this test on your site, and I can try to set up a similar test in a local environment. Then we can compare results to see if the problem is replicable on my site or exclusive to your site somehow. Let me know what you find out and we can go from there.
Hi Christian. Yes, I have tried placing an instance of the form on the same page as the popup. The conditional logic functions properly on the page, but not in the popup.
Try placing any form with conditional logic in an Elementor pop-up to see if it works in your environment. I am using the pop-ups that are built-in to Elementor Pro, and the Astra theme, if that makes a difference.
Also of note, on some forms I can see shortcodes (or portions of shortcodes) rendered on screen when working in the Elementor editor. It's only visible in the editor, and the forms render and work fine on the front end, but it does make wonder if it's causing problems. I've attached a screenshot of the pop-up in question, both in the editor and the front end. The form requires a user to be logged in to view, but I can provide you with a login if you like.
Here is the code for my form, in case you spot any errors:
In my local test, the same conditional group syntax seems to work well in a popup. I noticed that the phone field uses a Types field shortcode in its value attribute. I suggest using the output="raw" attribute to prevent problems with additional markup:
Please try that first and see if it solves the problem. If not, can you give me more information about the Form? Is this a create or edit Post Form, or a create/edit User Form? If you select "Text" in the popup and then unselect it, does the phone field disappear or stay visible?
I tried adding the "raw" attribute per your suggestion, but no change. The form creates a new Post. When you select either the "Phone" or "Text" checkboxes, the phone field should appear. I placed the form both in a popup and the page to test, both with the Toolset Form Elementor widget. It works fine on the page, but not within the popup. There are also some shortcodes that appear within the form in editor view. Here is a screen recording to show what is happening:
hidden link
Also, about the "raw" attribute.... should I use raw output whenever I use a shortcode as a value?
Also, about the "raw" attribute.... should I use raw output whenever I use a shortcode as a value?
Yes, as a general rule you should always use the output="raw" attribute/value pair in a Types field shortcode any time you place that shortcode as the value of another shortcode attribute.
Other Toolset shortcodes, Views shortcodes for example, may not support the output="raw" attribute value pair. Consult the documentation for those shortcodes on a case-by-case basis.
You're missing the closing double quote after $current_page in the listing title and listing URL shortcodes:
If adding these two missing double quotes and adding output="raw" to the phone User field doesn't solve the problem in the popup Form, let's try to rule out any other syntax errors we may have overlooked. Please copy the current form contents and paste them in a raw text editor file as a backup, then replace the current Form contents with this trimmed-down version:
Test again. If the problem is resolved, add the other Form contents a bit at a time until the problem returns. This iterative approach should help you find the offending code - it's probably something deceptively simple like missing or extra quotation marks, or an unclosed shortcode somewhere. If the problem was not resolved in the simplified Form contents, I'll need to take a closer look. I can see the popup on your site, but it looks like I need a login to see the Form within the popup. Please provide login criteria in the private reply fields here and I will review the results.
Hi, it looks like the User profile created for me is a low-level User, I don't have access to Toolset Settings or any other Toolset menu items in the dashboard. Can you upgrade me to an Admin-level user?
Okay thanks, unfortunately I don't see anything obviously wrong here. Our setups are quite similar, so I'm not clear why it would be working in my case but not yours. If it's okay with you, I'd like to use the Duplicator plugin (I see it is already installed) to create a site clone. I can install that clone locally and run some additional tests without breaking the live site. Let me know if you approve and I'll get started on that process.
Yes, I will clone the site to a staging server and give you access to the live site. Can you make my next reply private so I can send you login credentials?
