Design

Axure Tutorial: How to Create an Interactive Form

Learn how to create a form containing all the elements you need in Axure RP, from scratch, with Diga33!

Creating a good way to interact with your clients, understand their needs, learn their tastes and provide them with the products and services they are looking for is a fundamental e-commerce website and app development task.

Which is why you need to include forms. In this tutorial, Luz de León, General Manager of strategic design and creative tech company Diga33! teaches you the easy way to design forms in Axure.

Discover how in the video.

5 Steps to Include Forms in Your Apps with Axure

1. Position the elements in your form and start inputting text

The elements you need to create your form (basic text, password, lists, etc.) are found in the Forms section. Start by inserting text (a basic input) into your blank screen. Then write a description for this field: Name, Surname or any other data you will ask users to provide.

Axure Tutorial: How to Create an Interactive Form 4
Axure Tutorial: How to Create an Interactive Form 5

2. Explore other types of field

For example, if you need a ‘help’ text field with smaller lettering in a different style, use the Label tool. Passwords are not visible onscreen all the time so they have their own Password element. Insert each of these elements into your blank screen and add a description for each field.

Axure Tutorial: How to Create an Interactive Form 7

3. Discover the Hint command

It’s very useful for when you want the text inside a field in your form to disappear when your user clicks on it. Use the Hint element in the Forms library to achieve this.

Axure Tutorial: How to Create an Interactive Form 9

4. Add drop-down elements

For example, dates of birth generally allow you to select from a drop-down menu of months and days. Use the Droplist tool to create something along these lines.

Axure Tutorial: How to Create an Interactive Form 11

5. Use the Checkbox command

Finally, use the Checkbox tool to define the elements a user can select, for example their gender or marital status, and add it to your form.

Axure Tutorial: How to Create an Interactive Form 13
Axure Tutorial: How to Create an Interactive Form 14

Remember to group the elements together by right clicking and selecting Assign Radio Group, if you want to create a checkbox field with only one possible answer.

Love these tips? Learn how to design user experiences and showcase them using advanced prototypes in Axure in Luz’s online course: Prototype and UX Design for E-Commerce Apps.

You may also like:

- Believe It or Not, UX Design Is a 6000-Year-Old Skill
- UX Tutorial: How to Conduct Qualitative User Research
- App Design: Prototyping for Beginners, a course by Filippos Protogeridis
- UI Kit Creation with Sketch, a course by Nodos
- Digital Product Design with Lean and UX, a course by Óscar Santos Pérez

Aanbevolen cursussen

Specialisatie in Grafisch Ontwerp en Visuele Communicatie. Een cursus van Ontwerp van Domestika
Domestika Specialization · 18u

Specialisatie in Grafisch Ontwerp en Visuele Communicatie

Een specialisatie door meerdere docenten

Master in Grafisch Ontwerp: Beheers kleur, compositie en visuele waarneming om impactvolle en coherente visuele identiteiten te creëren.

  • 31.257
  • 99% (388)
GRATIS MET PLUS
99% korting
Originele prijs $99.99USD
Canva van A tot Z: creëer professionele ontwerpen. Een cursus van Ontwerp van Clàudia Cánovas

Canva van A tot Z: creëer professionele ontwerpen

Een cursus van Clàudia Cánovas

Leer in detail hoe Canvas werkt en ontwerp je eigen stijlgids en volledige webpagina

  • 133.801
  • 97% (1.9K)
GRATIS MET PLUS
97% korting
Originele prijs $34.99USD
Inleiding tot 3D-ontwerpen en -printen. Een cursus van Ontwerp van Agustín Arroyo

Inleiding tot 3D-ontwerpen en -printen

Een cursus van Agustín Arroyo

Leer stap voor stap het proces van ontwerpen, modelleren en 3D-printen en geef vorm aan je ideeën

  • 45.830
  • 97% (1.3K)
GRATIS MET PLUS
97% korting
Originele prijs $34.99USD
0 opmerkingen