If you are using a contact form or other type of form in your Figma design then you can easily tag those elements as an Elementor Form widget using the UiChemy plugin.
So when you export the design as an Elementor template, that particular section will use the Elementor Form widget.
What Can be Tagged?
A frame containing multiple nested frames with a title, an input field with a placeholder text can be tagged as an Elementor Form widget.
How to Tag?
Select the top level frame of your layout then select the Optimize & Convert option and click the Optimize & Convert button.
Now select the frame or container containing the form in your design and click on the Widget Tags tab in the UiChemy panel.
Then search for the form and click on the Form widget from Elementor Pro.
On the next screen, you’ll get the information of which element you are tagging as what widget.
Then you’ll see widget specific tagging options and most of the options will be auto-filled based on your design.
- As per your design, you’ll see an equal number of Form Field fields are created.
- In each Form Field, the Label field will be auto filled if you have a label in your design.
- Then from the Input Type field, you have to select the input type.
- The Input Field will be auto-filled and if you have any placeholder text, it will be auto-filled in the Placeholder field.
Note: For the Checkbox, Radio button and Select field, their options will be added in the Placeholder field.
- You can click the dropdown to change each option. You can click on the magic wand icon beside each option in the dropdown to understand which element the option is for. You can click on the Add New button to add more fields.
Note: You can only add fields up to the same number of fields added in your design. If you add any extra fields, it will be removed automatically once you save the changes, but if you add less number of fields, only those will be exported, not all the fields of the layout.
- Then in the Button section, the Button field will be auto-filled. In the Button field, the Button Text will be auto-filled as per your design and if you have any icon for the button it will be auto-filled in the Button Icon field.
- Once done, click on the Save button to complete the tagging.
Now, if you export the design, that element will use the Elementor Form widget with all your specified information.
Note: Make sure to have the Elementor Pro plugin installed and activated to use the Form widget.