Tutorial for Forms

The last bit you need: forms

What you will be learning

  • How to create a form

When putting together user journeys, you will most likely need to capture some details, to allow them to buy a product, update their details, change their payment information, etc...

For this we'll need some forms!

Forms allow us to capture different types of data (single or multiple choices from different sizes of lists of options, numerical data, etc...).

For this, we'll be looking at two main elements:

  • ns-form: this is the container for any of our data capture, that will help us group the information, validate its format and send it to the server
  • ns-inputter: this is a very versatile element that will help capture data of all kinds, in different ways

Let's see how we could capture a user's email. We'll have to add a form to our page.

In the editor, add an ns-form inside the panel, after the heading.

👀 Hint

Try this piece of code:

<ns-panel>
  <h1>Let's create a form!</h1>
  <ns-form>
    <form>
    </form>
  </ns-form>
</ns-panel>

This ns-form component will act as a container for your form, will help manage their validation and help managing format spacing between inputs, labels and headings.

In the next lesson, we'll look at how we can capture data.

Useful resources