Weavely is a form building plugin for Figma, meaning that in one click you can turn your Figma design into a working form.For that, you just need to select pre-configured form elements from the Weavely component library, style the form, and publish it straight away. Weavely automatically turns your design into a working online form that collects and stores responses from users. But what form elements are there available to create good looking and smart forms? Actually, quite a few!

In the following sections you can find an overview of all the form components Weavely offers.

Basic Form Elements

The foundation lies in the basic form elements. These essential building blocks, including inputs, paragraphs, radio buttons, checkboxes, and dropdowns, are the core of every effective form. And of course, they are also at the core of Weavely's functionality.

Selection Elements

Radio Buttons and Checkboxes

When you need users to make selections from predefined options, "Radio Buttons" and "CheckboxButtons" offer a user-friendly way to do just that. Customise the choices, and let users pick their preferences effortlessly.

Dropdown

For lists of options that need to be condensed into a single selection, the "Dropdown" element is the perfect solution. It simplifies user choices and streamlines your forms.

Input Elements

Short Answer and Paragraph

The ability to gather user input efficiently is one of the key steps towards successful response collection. Our "Short Answer" and "Paragraph" fields ensure you can collect everything from quick responses to more detailed descriptive comments with ease.

Date/Time/Email/Link

These input elements streamline collection of specific information, and automatically validate that information has been provided in the right format. Users can provide their email addresses, choose dates, and specify times with precision. The form element "Date" lets your respondents select a date from the calendar, while the "Time"component can come in handy for appointment scheduling. In the latter case users can choose specific time from the digital clock. Using the form field "Email" ensures accurate email submissions by restricting input format. Same applies to the "Link" component, as respondents will not be able to submit the form if the link format is invalid.

Numerical Input

Numerical input is yet another quite basic but really useful form element. The "Number" field is an excellent addition for collecting numeric data. From ages to quantities, you can now ensure that your form can handle a wide range of numerical inputs.

Rating and Ranking Elements

These elements are the most significant to businesses and organisations that collect feedback on a regular basis. Whether it's evaluating customer satisfaction, product performance, or employee engagement, rating & ranking elements enable structured data gathering and data-driven decision making.

In the Weavely component library you can find different elements to rate and rank items.

Star Rating

"Star Rating" is a widely recognised and user-friendly form element. It is one of the most visually appealing elements and is often used for getting quick feedback from respondents.

Ranking

When you need to find out respondents' preferences, "Ranking" is the best form component to do so. Respondents can simply prioritise items by arranging them in a specific order.

Scale Rating

This element is the most suitable if you're conducting a survey. Scale ratings offer precision in user feedback and allow for valid statistical analysis. For example, you can use this form element to implement Likert scale questions. You can also easily customise the "Scale Rating"component by defining the scale range yourself.

Slider

This form element is a dynamic and engaging addition to form design. "Slider" allows users to provide input by sliding a visual marker along a scale. This makes it ideal for tasks like setting preferences, adjusting values, or indicating levels.

And it is actually one of our favourite form fields! Using a slider, you can make your form truly stand out. Remember that you can style your form elements in any possible way, making your form looks super custom and unique.

To Sum Up

These form elements are designed to give you more flexibility and efficiency in creating forms in Figma that suit your unique requirements. Whether you're collecting data, feedback, or preferences, Weavely has you covered. Stay tuned for more updates as we continue to enhance your form-building experience :)

‍