How to design the form in Figma?

You don’t need to include error messages or additional labels. Simply focus on:

1. to add some margin from the text to the field add an additional text-field with the name of the field

   

2. Later, when you tag the element, please tag the whole input field (not the text field)

<aside> 🔥

Design template in Figma for forms: https://www.figma.com/design/WtAUZDgVZRKKSCFG0c2CkB/transjt.io-–-figma-to-hubspot?node-id=161-5&t=MT2eTk44es2PI15Z-1

Feel free to use it!

</aside>

Steps to do:

1. Design your preferred form and export it to transjt
2. Open the project and the tagging wizard
3. Select “form”

1. Tag the whole “Form Area”

   The breadcrumb navigation helps you to select the right element. Please make always sure to select the right group / container for your tagging.

   <aside> ✅

   If you have a subscription, the AI should find the form with input fields and buttons and tag them automatically.

   In case a field is missing or was tagged wrongly, you can change / add it manually at any time.

   </aside>

   

2. If you tag the fields manually, just follow the steps the wizard offers:

   1. Select

      1. Form (whole form area)

      2. Input fields (as many as you need)

      3. Text area fields

      4. Checkbox

      5. Submit Form Button

         

   2. When you close the tagging wizard, your selection will saved automatically.

Re-Tag an element

If you want to re-tag an element afterwards, you simply select the element in the wizard click “clear” and re-tag it again.