How to remove element from AEM Forms html output?

[dpkhmhs]

I created an Adaptive Form with the "Blank (template with Responsive Layout)" (see screenshot-1.png attached) and no theme selected.  I added a few OOTB Adaptive Form components to the form andn then embedded it in an authored page.

When displayed in the authored page, the form now has duplicate text for the First Name textbox field (see screenshot-2.png attached).  I don't know where the first First Name came from, but the second is the label for the textbox field.

Ultimately, I can just hide that extra "First Name" with css via div.simple.mobileLayout selector.  However, I'm curious if there is a way for me to remove that extra element before it is output with the rest of the html.  Any thoughts?

[rk_pandian]

Hi @dpkhmhs,

Two questions here:

1. When you edit the form elements, do you see any element on the left "Content" panel?
2. Also, can you pls check the CRX structure for this form and check if there is a guidetextbox element or some other element which is displaying this extra First name?

Thanks!

[dpkhmhs]

1. Yes, I see the elements in the Content panel.  See attached form-no-theme-selected.png
2. Looking in CRXDE, the form contains a guidetextbox element with a "First Name" title.  However, "First Name" is not on any other element/node in the form.  See attached form-crxde.png

See attached form-embedded-in-authored-page.png to view the unwanted elements being displayed.

[pankajpr]

Hi,

You seem to have added components directly to root panel. Wrap First Name and Email fields in a panel.

Thanks,

Pankaj Parashar

[dpkhmhs]

What's wrong with adding components directly to the root panel?  Could you point me to documentation that discusses why I shouldn't be adding components directly to the root panel?  Thanks!

[pankajpr · Accepted solution]

I recommend to use the panel to fix the issue you are facing. There is no hard rule to not to add components directly to root panel, but it is good to use some design practices to achieve the intended results.

By design, in the mobile view, the mobile navigation shows each title of component added directly to the rootpanel, as you have added elements directly to root panel, the navigation is showing First Name text at the top. Instead if you add a panel titled Personal Info to root panel and add other fields to this panel. You would see text Personal Info (the direct child of root panel), and you can add multiple fields to this panel. If you don't want panel title to show, you can leave it empty.

I hope this information helps you.