Modifying import code to use duplicate form on same page as original

Hi @dugost,

Would I only need to change {“fields”:[{“id”:”radio-1″,”element_id”:”radio-1″ to {“fields”:[{“id”:”radio-101″,”element_id”:”radio-101″?

Yes, changing the radio-1 to radio-101 as mentioned in your example should work theoretically. You only have to ensure the same ids aren’t used for similar field ie, for example, if there are more than two radio fields added, the “radio-1” should be unique and shouldn’t repeat for the newly added or existing radio fields.

Or can those be left alone and all instances of the form_id be changed to something different like “form_id”:”wrapper-9028-7642″ to “form_id”:”wrapper-9029-8190″?

In general, we don’t recommend editing the export as the chances of error are more, and we cannot say how well the form would behave in such use cases. The wrapper id shouldn’t be changed and it must be left alone as these are used by the plugin.

Kind Regards,
Nithin

Thank you for the info!

I went through the form code and changed all of the "id" and "element_id" numbers by adding “10” to them. As conditional rules are in place, I made sure that "element_id" numbers listed after any "conditions" were also changed to match.

The form seems to be working but any selections made in a Multi-Select aren’t having the forminator-is_checked class added to them. For some reason, the JS works on the original form but not the edited/duplicated one.

It’s possible this is due to the original form appearing first in the code. Or perhaps it’s because each form is in a separate tab, shown here:

https://ibb.co/YpL5x5B

The New Members form (original) has multiple selections displaying just fine. In the Current Members form (edited duplicate) in the second tab, selections aren’t visible though they are being made. The Inspector shows aria-invalid="false" added to an element when selected and toggling it to aria-invalid="true" when unselected.

Any idea why this might be happening? The IDs and names for each item in the list are different. The same item in New Members and Current Members have these IDs, respectively:

NAME select-4[] / ID select-4-field-3-60d4d0e30e68a
NAME select-104[] / ID select-104-field-3-60d4d0e313912

But they do share the same value, in case that matters. ???♂?

Surely people have multiple forms on the same page using multi-selects and they don’t run into this problem. This issue must be specific to using a duplicate form on the same page, even though it’s edited.

Hi @dugost,

Sorry, I’m a bit lost with your workflow. If you are using two different forms on the same page and 2nd form is a duplicate, then what exactly is edited in the form import to avoid a conflict? In general, the default “Duplicate” feature in the forms should be enough to create a duplicate of a form and it doesn’t need any edits on the import file. Doesn’t the inbuilt feature to duplicate the form work?

I was assuming you were trying to merge individual select fields from one form to an existing form where there is already a select field present? However, we don’t support such a workflow of editing the import file. In such use case, you only have to change the id and element_id ie of a select field, rest would be the same:
{"id":"select-2","element_id":"select-2",

But if these fields aren’t merged into a single form, and only going to be displayed as two different forms there isn’t any need to edit the import file.

In general, there shouldn’t be an issue with using Multi-select in different forms on the same page. I gave a quick test and it does work fine when tested.

Could you please share a page URL where you have the form and advise if I’m missing regarding this so that we could better see what exactly is being missed here.

Looking forward to your response.

Kind Regards,
Nithin

Sorry for being unclear. My duplicated form’s fields had the same IDs as the original. I mistakenly assumed these led to a conflict affecting the duplicate’s multi-select. That’s why I asked about editing the import code to assign unique IDs. But, as you say, “Duplicate” avoids conflicting IDs.

Unfortunately, I have no public link to share right now. If I can move it to a production site today I’ll share the link. For now, I’m testing options to help eliminate culprits.

With the original form (“New Members”) and its duplicate (“Current Members” with no edited import code), I’ve moved both out of the tabs into the regular page layout. I wanted to make sure the tabs I was using weren’t the issue.

In this screenshot, you can see the first form highlights my selections in blue but the second still won’t. There’s no visible interaction other than a grey hover state. Selections are registered because aria-invalid is toggled on click and other conditions are being triggered. It’s just that no blue highlight appears to highlight them.

That page is built with WPBakery, though, so I added both forms to a different page using Gutenberg blocks. I also switched the order of the forms.

In this screenshot, you can see the issue continues to affect the second form but this time it’s the original (“New Members”). So it’s not a problem isolated to the duplicated form. The page order of the forms is relevant to the problem. When swapping them back to New then Current, the problem affects the second form regardless.

In case it matters, the multi-selects appear conditionally based on the radio selections above them. Also, by leaving the first form untouched, the issue persists even if selections are made in the second form only.

Using version 1.14.11 with WordPress 5.5.2.

Does this shed light on anything? Can I try anything else?

If it’s any help, I did some other tests using fresh forms in Gutenberg shortcode blocks on a different page.

Forms for Test 1 and Test 2 where they were created separately with matching multi-selects. No problem making selections:

https://ibb.co/Kxd5FSw

Forms for Test 1 and Copy of Test 1 so I’m using a duplicate with the same multi-select. Again, no problem making selections:

https://ibb.co/gV3D6zw

To test whether conditional options were the culprit, Test 3 and Copy of Test 3 both reveal their multi-select on “yes”. No problem making selections:

https://ibb.co/9pJYTPh

No change in the issue with my original form and its duplicate when posted to the same page. It is definitely a more complex form than those I created for these tests but I’m at a loss to understand why its multi-select won’t highlight. ???♂?

Hoping to have a link to the production site later today as I’m sure that will be the most helpful. Thanks for your patience.

Hi @dugost

Thank you for the update.

Could you click on the right button of the mouse and check if you get a not defined error for JavaScript?

If so, it is a reported issue indeed happens when there are two forms on the same page, instead of manually modify the IDs you can go to Forminator > Form > Duplicate your fields, Forminator is going to give a new ID to that fields so you can remove the old one.

The fix is coming on Forminator 1.14.12, we don’t have an estimated time but it is on our test team already.

Let us know the result you got.
Best Regards
Patrick Freitas

I right-clicked the page area containing the 2 forms and within the forms themselves, the multi-selects, etc. but didn’t get any sort of visible error. In the Inspector’s Console, the only errors I see are:

Uncaught TypeError: FUI.select is not a function
    at HTMLSpanElement.<anonymous> (front.multi.min.js?ver=1.14.11:1)
    at Function.each (jquery.js?ver=1.12.4-wp:2)
    at n.fn.init.each (jquery.js?ver=1.12.4-wp:2)
    at e.init_fui (front.multi.min.js?ver=1.14.11:1)
    at e.init_custom_form (front.multi.min.js?ver=1.14.11:1)
    at HTMLFormElement.<anonymous> (front.multi.min.js?ver=1.14.11:1)
    at Function.each (jquery.js?ver=1.12.4-wp:2)
    at n.fn.init.each (jquery.js?ver=1.12.4-wp:2)
    at e.init (front.multi.min.js?ver=1.14.11:1)
    at new e (front.multi.min.js?ver=1.14.11:1)

And 3 verbose errors.

jQuery.js:
[Violation] 'DOMContentLoaded' handler took 3071ms

Other:

[Violation] Forced reflow while executing JavaScript took 120ms
[Violation] Forced reflow while executing JavaScript took 47ms

Please let me know if I’m not checking for errors correctly, though.

As for your other note, I’m glad that issue will be addressed in the next version but your instructions describe a process I’ve already tried.

With the original form, I did initially use Forminator > Form > Duplicate. The duplicate only had a title change and some edits to some field content. I placed it and its duplicate on the same page, that’s when I first noticed the multi-select issue. So I then imported the original “New Members” form’s code with the modified IDs to use as the alternate “Current Members” form. The problem persisted.

As I mentioned in my further testing, I created a different form with yes/no radios to display a conditional select like I have in my member form. I then duplicated it and placed it on the same page. The problem didn’t appear for those test forms so it appears to be isolated to the originals I created.

I didn’t get far enough along with my project since my last post but if I can follow up with a live link today I will. Cheers.

• This reply was modified 3 years, 9 months ago by dugost.

Quick note: While the page containing the forms on the production site isn’t yet public, testing it for client review had a pleasant surprise. The multi-selects work on both forms even when on the same page, unlike the page on the staging site.

I don’t know why this is the case when the page on production uses the exact same code as the one on staging but I’m just very glad it works! I exported the code for the original form and its duplicated form (no code edits) then imported both directly into the production site.

I apologize for wasting your time with this even though the issue on the staging site is still a bit of a mystery.

Thank you for your patience and time on this!

Hi @dugost

I apologize for wasting your time with this even though the issue on the staging site is still a bit of a mystery.

No worries, we are more than happy to help you.

Uncaught TypeError: FUI.select is not a function

Yes, you checked it correct and indeed is a known issue, I double confirmed but it looks like a bit more complex problem and the fix is actually coming in Forminator 1.15.1 which is under development.

Can you try to add this code in addition to changing the fields’ IDs?

<?php

add_action( 'wp_footer', function(){
?>
<script>
window.FUI = window.FUI || {};
window.FUI.select = function(){
return false;
};
</script>
<?php
}, 21 );

Please add it as a mu-plugin following this guide:
https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

Let us know if the script prevented the JS error.
Best Regards
Patrick Freitas

Ok, the page containing the 2 forms is using the original form and its duplicate (not an imported one). I placed the code above into a Code Snippet since I already had that plugin installed. After activating it, the Uncaught TypeError: FUI.select is not a function error is gone. As is the problem with the second, duplicated form’s multi-select not adding highlights onClick.

When I disable that snippet, the error and the multi-select highlighting issue return.

I hope that helps. I have no idea why it exists on a staging site on the same server as the production site with all of the same versions but, hey, web development, right? ??