Input Form Elements

Basically, to use any of the the Input Form Elements, you will just have to add them onto your form from our component library and style the way you want. There are no other configurations you need to do with these form elements. Let's look at an example where we add a Paragraph form element.

Adding Form Elements to Your Form

‍

‍

Steps

1. Click on the “Component Library” in the plugin and select the form element.
2. When the form is generated, the selected form element will appear in the Component Library frame, on the left hand side to your form. Copy the whole component and paste it to the form.

Styling Your Form Elements & Publishing the Form

Since we’re in Figma, there is no limit to how you can style the design of your form. Change colours, fonts, shapes, content, placements, etc. When you’re done with editing, hit the publish button.

‍

There are two ways you can edit your form elements:

1. By editing the instances of your form elements directly in your form's frames.
2. By editing the main components in the component library.

‍

The latter means that any changes you make to the component element will automatically apply to all its instances. But if you make changes to an instance (i.e. your form itself), it won’t affect the main component.

‍

And that’s how the form looks when published. It is ready to collect responses.

‍

List of Input Elements

Short Answer

This form element is ideal for concise responses. The short answer field allows users to input brief and focused text, perfect for capturing quick information or short responses.

Paragraph

Paragraph is suited for more extensive comments or explanations. This field accommodates longer text entries, making it suitable for collecting detailed feedback or comments.

Number

This field restricts input to numerical values, ensuring precise data collection for figures, quantities, or any numeric information required.

Email

Specifically designed for email addresses, this field validates and collects accurate email inputs, ensuring the submission of valid contact information.

Date

Tailored for capturing dates, the date field offers a convenient calendar interface, allowing users to select specific dates easily.

Time

Used for collecting time-related information, the time field enables users to input time values in a user-friendly format.

URL

Designed exclusively for URLs, this field validates and collects web addresses, ensuring the submission of valid and properly formatted links.

‍