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.