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?
To do this, you can choose between two options: Step by Step Method or Express Conversion.
Here, we’ll go with the Step by Step Method.
- First, select the Step by Step Method and click on the Start button.
- Select the top-level page or frame of your layout, then click on the Next button.
- Under the Widget Tagging Mode tab, select the Manual Widget Tagging Option.
- Next, under the Manage Auto Layout tab, you’ll see two options: It’s already in Auto Layout and Convert to Auto Layout. We’ll go with the first option.
- After that, under the Tag Widgets tab, choose the frame or container that contains your element (Widget). Then, search for the Form widget from Elementor Pro in the UiChemy panel and select it. Here, you’ll see all the supported Elementor widgets.
Note: You need to have a UiChemy Pro license to tag Elementor Pro widgets.
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 the Save button to complete the tagging, and you’ll see a Tagged successfully message.
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.