---
title: "How to Tag The Contact Form 7 Widget for Figma to Elementor?"
url: https://uichemy.com/docs/how-to-tag-the-contact-form-7-widget-for-figma-to-elementor/
date: 2024-04-10
modified: 2026-04-14
author: "Sagar Patel"
description: "If you are using a form in your Figma design then you can tag those elements as a Contact Form 7 widget from The Plus Addons for Elementor using the..."
word_count: 355
---

# How to Tag The Contact Form 7 Widget for Figma to Elementor?

## Key Takeaways

- UiChemy allows tagging a frame as a Contact Form 7 widget from The Plus Addons for Elementor.
- The Step by Step Method requires selecting the top-level page or frame and choosing Manual Widget Tagging Option.
- Exporting the design after tagging results in using the Contact Form 7 widget from The Plus Addons for Elementor.

If you are using a form in your Figma design then you can tag those elements as a Contact Form 7 widget from The Plus Addons for Elementor using the UiChemy plugin.

So when you export the design as an Elementor template, that section will use the Contact Form 7 widget.

## What Can be Tagged?

A frame can be tagged as a Contact Form 7 widget.

> *Note: This is a tagging only widget, it will help you create an unformatted widget after conversion so that you can style/design it as per your needs after conversion & benefit from the interactivity/features the widget provides.*

## 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** Contact Form 7** widget from **The Plus Widgets** in the UiChemy panel and select it. Here, you’ll see [all the supported Elementor widgets](https://uichemy.com/docs/widgets-compatible-with-figma-to-elementor-conversion-in-uichemy/).

On the next screen, you’ll get the information of which element you are tagging as what widget.

For this widget, you won’t see any tagging options.

- 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 Contact Form 7 widget from The Plus Addons for Elementor.

![](https://uichemy.com/wp-content/uploads/2024/04/exported-template-with-tp-contact-form-7.gif)

> *Note: Make sure the Contact Form 7 and The Plus Addons for Elementor plugin are installed and activated and the widget is activated as well to make the form work. You might have to make some minor adjustments in the widget settings to match the design, especially those elements that are not tagged. *

## Frequently Asked Questions

**Q: What if the Contact Form 7 widget doesn't appear after tagging?**
A: If the Contact Form 7 widget doesn't show up after tagging, ensure that both the Contact Form 7 and The Plus Addons for Elementor plugins are installed and activated. This is crucial because the widget relies on these plugins to function properly. Additionally, check the widget settings in Elementor to make any necessary adjustments for the design elements that were not tagged.

**Q: Can I use the UiChemy plugin to tag other types of widgets?**
A: The UiChemy plugin specifically allows tagging for the Contact Form 7 widget from The Plus Addons for Elementor. While it supports various Elementor widgets, tagging is limited to those defined in the UiChemy panel. For a complete list of supported widgets, refer to the [supported Elementor widgets](https://uichemy.com/docs/widgets-compatible-with-figma-to-elementor-conversion-in-uichemy/).

**Q: What is the best method to tag the Contact Form 7 widget?**
A: The best method to tag the Contact Form 7 widget is through the Step by Step Method in the UiChemy Figma Plugin. This method allows for precise control over the tagging process. Start by selecting the top-level page or frame, then choose the Manual Widget Tagging Option to ensure the correct elements are tagged for conversion.

**Q: Does tagging the Contact Form 7 widget affect responsiveness?**
A: Tagging the Contact Form 7 widget using UiChemy achieves a responsive design with 95% accuracy across desktop, tablet, and mobile views. This means that while the widget will be functional, you may need to make minor adjustments post-conversion to ensure it aligns perfectly with your design across different devices.

**Q: Are there any limitations when using the UiChemy plugin for tagging?**
A: One limitation of the UiChemy plugin is that it only supports tagging for the Contact Form 7 widget from The Plus Addons for Elementor. It does not convert designs from any tool other than Figma, nor does it support tagging for other page builders like Divi or WPBakery. This means you need to ensure your design is compatible with the specified tools.