Very Basic: POST form data through basic Submit button

[alsak0de]

Hello there! Newbie here with a very basic question on forms, Polaris and HTML.

Whenever I add a basic polaris-based HTML form, The Submit button will post an empty message to the backend.

I am trying to get , in the post, the content of the filled fields but

Example, based on Shopify demo:

(https://polaris.shopify.com/components/forms/form#navigation)

<div class="Polaris-Page">

<div class="Polaris-Page__Content">

<div class="Polaris-Layout">

<div class="Polaris-Layout__AnnotatedSection">

<div class="Polaris-Layout__AnnotationWrapper">

<div class="Polaris-Layout__Annotation">

<div class="Polaris-TextContainer">

<h2 class="Polaris-Heading">Hookin App Main Page</h2>

<p> </p>

</div>

</div>

<div class="Polaris-Layout__AnnotationContent">

<div class="Polaris-Card">

<div class="Polaris-Card__Section">

<div class="Polaris-SettingAction">

<div>

<form method="post" novalidate="">

<div class="Polaris-FormLayout">

<div class="Polaris-FormLayout__Item">

<div class="">

<div class="Polaris-Labelled__LabelWrapper">

<div class="Polaris-Label"><label

id="PolarisTextField4Label"

for="PolarisTextField4"

class="Polaris-Label__Text">App URL</label>

</div>

</div>

<div class="Polaris-Connected">

<div

class="Polaris-Connected__Item Polaris-Connected__Item--primary">

<div class="Polaris-TextField"><input

id="PolarisTextField4"

autocomplete="off"

class="Polaris-TextField__Input"

type="url"

aria-labelledby="PolarisTextField4Label"

aria-invalid="false" value="">

<div class="Polaris-TextField__Backdrop">

</div>

</div>

</div>

</div>

</div>

</div>

<div class="Polaris-FormLayout__Item"><button

class="Polaris-Button" type="submit"><span

class="Polaris-Button__Content"><span

class="Polaris-Button__Text">Submit</span></span></button>

</div>

</div><span class="Polaris-VisuallyHidden"><button type="submit"

aria-hidden="true" tabindex="-1">Submit</button></span>

</form>

<div id="PolarisPortalsContainer"></div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

</div>
</div>
<div class="Polaris-Layout__AnnotationContent">
<div class="Polaris-Card">
<div class="Polaris-Card__Section">
<div class="Polaris-SettingAction">
<div>
<form method="post" novalidate="">
<div class="Polaris-FormLayout">
<div class="Polaris-FormLayout__Item">
<div class="">
<div class="Polaris-Labelled__LabelWrapper">
<div class="Polaris-Label"><label id="PolarisTextField4Label" for="PolarisTextField4" class="Polaris-Label__Text">App URL</label></div>
</div>
<div class="Polaris-Connected">
<div class="Polaris-Connected__Item Polaris-Connected__Item--primary">
<div class="Polaris-TextField"><input id="PolarisTextField4" autocomplete="off" class="Polaris-TextField__Input" type="url" aria-labelledby="PolarisTextField4Label" aria-invalid="false" value="">
<div class="Polaris-TextField__Backdrop"></div>
</div>
</div>
</div>
</div>
</div>
<div class="Polaris-FormLayout__Item"><button class="Polaris-Button" type="submit"><span class="Polaris-Button__Content"><span class="Polaris-Button__Text">Submit</span></span></button></div>
</div><span class="Polaris-VisuallyHidden"><button type="submit" aria-hidden="true" tabindex="-1">Submit</button></span>
</form>
<div id="PolarisPortalsContainer"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>

[alsak0de]

btw, additional context. I've managed to, by changing the button location across the different sub-elements within the form section, receive one (and only one) of the field values on the post response.

My original page/form has more fields than this example and yet, I could not make this example work

thanks in advance,