Navigation Form Elements

In this tutorial we'll look into how to use navigation form elements in your Figma form.

Our Navigation Form Elements section comprises Hyperlink, Next Page, Previous Page and Submit Button.

Hyperlink

This form element redirects users to external web pages or resources from the form by simply clicking the provided link.

Adding a Hyperlink to a form designed in Figma


Steps

  1. Select Hyperlink from the component library, and then copy paste it to your form.
  2. Configuration: to add a link, you need to select your hyperlink element by clicking on it. Once selected, the window will open in the plugin where you can change the field name and add an URL.

Navigation Buttons

adding navigation buttons to a form designed in figma

Next/Previous Page

These buttons serve as navigational tools guiding users to the subsequent/previous pages or sections within a multipage form. Follow this quick tutorial to see how to create a multipage form.

Simply copy them from the component library frame and paste to your form page(s). If the buttons aren't available in your component library you'll first need to add them from the plugin's "component library" menu (see bottom left).

Submit Button

When selecting your first form elements from the component library in the plugin, you don't have to worry about the submit button. Whatever elements you choose to add to your form, the submit button will always be added to the component library frame by default. As the name implies, once your user presses the submit button their responses will be securely stored on our servers.

Just copy the submit button from the component library frame and paste it to the form page(s) that you want to lead to the “thank you” page.