Wix: hide() function not fully hiding Wix Form element?

Ask the community
, , ,
1

I am working on making a contact form using the “Wix Forms” app on a multilingual site and the second language reads right to left. This means that I have to create fields for first name, followed by last name from right to left. Wix Forms only allows you to translate text field placeholders but not change their location independent of the other language. Field location changes apply to both sides. I am trying to get around this by creating two separate forms and showing/hiding the other based on the current language. I am using the following code:

if (wixWindow.multilingual.currentLanguage === ‘en’) {
$w(‘#form3’).hide();
$w(‘#form2’).show();
} else {
$w(‘#form2’).hide();
$w(‘#form3’).show();
}

This visually achieves what I want to do but because I have placed both forms on top of one another, it seems like the other form is still “there” even though you can’t visually see it, making one of the forms unclickable (if it’s behind the other). How do I get around this?

2

If you are using form factor then all items will still be shown on your Wix Editor, however the ones that are set for another version should be set as hidden on load.

As shown here in this tutorial for only showing on mobile.
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only

API reference.
https://www.wix.com/corvid/reference/wix-window.html#formFactor

I have used the mobile option on my own website for showing a different logo in my header than to the desktop version and to change the icon for the mobile menu instead of using the existing hamburger icon and it all works perfectly.

On your desktop editor and your mobile editor, the other version that you have hidden, let us say mobile for now, however yours will be the other language, will still be shown although they will be tinted on the screen as they are set up as hidden on load in both desktop and mobile editors.

To view this code fully working, you need to test your website on a fully published version on a desktop or mobile and not just use the preview mode only.

If you are wanting to edit each Wix Form separately, then I suggest that you move each Wix Form so that they are up on the screen together without overlapping each other. Then when you are finished with them both, you can simply place both Wix Forms back into their original positions.

However, you might prefer to want to make up your own user input forms through code with your own datasets and not just use Wix Forms and it’s Submission Tables.

https://support.wix.com/en/wix-multilingual/wix-multilingual-basics
https://www.wix.com/corvid/reference/wix-window.multilingual.html

Also, make sure that you set it up in your mobile editor too.
https://support.wix.com/en/article/multilingual-menu-on-your-mobile-friendly-site

If it still doesn’t work then you can try simply swapping the hide and show calls for the unwanted form and change it to collapse and expand instead so that it is collapsed and isn’t simply hidden from view.
https://www.wix.com/corvid/reference/$w.HiddenCollapsedMixin.html