Tab Content Not Appearing in Plumsail Forms Published Views

Forms Public Forms
1

Hi!

I am encountering an issue with Plumsail Forms where the tab content behaves differently between the "Preview" mode and the published view. In the "Preview" mode, the fields under a tab are visible, but when the form is published using either the "form snippet" or a form URL generated by Plumsail, none of the fields within the tabs are visible.

No additional CSS or JS modifications have been made. Below are examples showcasing the difference between the preview and published views:

Preview View:

plumsail preview
plumsail preview1463×282 6.7 KB

Published View:

plumsail public
plumsail public1486×293 1.98 KB

I would like to understand why this discrepancy is occurring and how to ensure that the tab content remains visible in the published form. Any insights or assistance would be greatly appreciated.

Thank you!

2

Hello @aamirovich,

Welcome to Plumsail Community!

I couldn't reproduce the issue on my side. What browser are you using? Please try opening the form in incognito window.

If that won't work, please share the link to the preview page of the form and to the page where the form is embedded. You can send the links via DM.

3

Hello Margarita,

I hope this message finds you well. Thank you for your continued support and attention to the issue I am facing with the tab content.

In my efforts to troubleshoot and resolve the problem, I have taken the following steps:

  1. I tried accessing the form from different browsers, including Chrome, Firefox, and Edge, and I tested each browser's incognito mode to ensure that the issue is not related to browser-specific settings.

  2. I attempted to resolve the problem by implementing a variety of CSS adjustments. For instance, I applied the following styles in an attempt to address the visibility and display of the tab content:

.mb-3.row {
    background-color: white !important;
    color: black !important;
    visibility: visible !important;
    display: inline-block !important;
}

.tab-content {
    background-color: white !important;
    color: black !important;
    visibility: visible !important;
    display: inline-block !important;
}

.tab-pane.show.fade.active {
    background-color: white !important;
    color: black !important;
    visibility: visible !important;
    display: inline-block !important;
}

Despite these efforts, the tab content continues to remain invisible in the published form, and the issue persists.

I genuinely appreciate your support and your commitment to assisting me in resolving this matter. To provide you with more context and details, I have sent the links to both the preview page of the form and the page where the form is embedded via direct message.

If there are any further suggestions, tests, or steps that I should take, please do not hesitate to inform me. Your guidance is invaluable as I work towards a solution.

Thank you for your time and understanding.

4

@aamirovich,

The CSS on the page hides fields inside the tab container on the form. Add this CSS to the form to resolve the issue:

.fd-form .fade {
    opacity: 1 !important;
}
1 Like
5

It worked thank you so much!

1 Like