Create amp-form inside amp-lightbox

Question

I am trying to submit a form inside lightbox modal. But popup showing empty content. my code is as follows:

<amp-lightbox id="success-lightbox" layout="nodisplay">
    <amp-list src="http://localhost:4000" width="auto" height="200" layout="fixed-height" items="." single-item>
        <template type="amp-mustache">
            <div class="lightbox-modal">
                <form action="/" method="get" target="_top">
                    {{#items}}
                    <input type="checkbox" value={{id}} /> {{/items}}
                    <input type="submit" value="submit" />
                </form>
            </div>
        </template>
    </amp-list>
</amp-lightbox>
<input class="" type="submit" value="show more" on="tap:success-lightbox" />

I included all dependencies required amp-form, amp-lightbox, amp-list, amp-mustache. If I remove the form tag, checkboxes are showing fine.

The working code:

<amp-lightbox id="success-lightbox" layout="nodisplay">
    <amp-list src="http://localhost:4000" width="auto" height="200" layout="fixed-height" items="." single-item>
        <template type="amp-mustache">
            <div class="lightbox-modal">
                {{#items}}
                <input type="checkbox" value={{id}} /> {{/items}}
                <input type="submit" value="submit" />
            </div>
        </template>
    </amp-list>
</amp-lightbox>
<input class="" type="submit" value="show more" on="tap:success-lightbox" />

I went through docs. but didn't find anything. is it not possible to nest the form inside amp-lightbox ?? if not possible, is there any workaround to submit data from lightbox ??

Answer 1

amp-mustache doesn't support form elements. A simple workaround in your case is moving the form tag outside the amp-list element.