Submit button outside the form

The other day I had quite a weird scenario where we had a form inside a specific section, but the submit button was at the bottom.

At first, I tried to re-configure the HTML so that the button would be part of the form element. However, that quickly became an HTML soup.

So I decided to research other options and learned (after many years of being a developer) that you can place submit buttons outside a form!

Let's take a look at that.

Submit button outside a form

To achieve this, we should use the following markup.

<form id="newsletterForm">
  <label for="email">Email:</label>
  <input type="email" name="email" placeholder="Email" />
</form>

<button type="submit" form="newsletterForm">Submit!</button>

As you can see, the button is not part of the form, yet this will work.

This is because we used the form attribute on our button. In it, we define which form this button belongs to.

You can also try it out in this CodePen.

Note: You will see a "Not Found" page, as our form doesn't go anywhere.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter