How to Use Metform With Envato Elements Template Kit Export

This tutorial outlines how to correctly setup and export Metforms for use in Envato Template Kits.

Before you begin, it is important to understand that Template Kits will only capture and export data from the Elementor plugin, and addons that are coded to pass template information through elementor. This means  that any addon that is trying to store template data independently of elementor, such as Metform or addons copying Pro functionality like Header & Footer Blocks, will not pass that data to your kit. We strongly recommend making the small investment in an Elementor Pro license, as it offers the most benefit to your users and workflow in the longterm and is the best option for your end users in terms of addon upgrades simply due to the support, compatibility and overall feature value.

If you choose to use Metform, you can easily save the forms as normal section templates your users can import to their Metform setup within the builder without forcing them to complete complicated setup outside of elementor.

Setup the Form

1. Go to Metform and click Add New
2. Give the form an identifiable name such as YourKit Contact Form
3. Leave all other settings default and click Edit Content
4. You’ll be brought into the builder with special metform elements visible on the left:

Construct the form

1. Add an inner section, then setup your form using metform widgets. Do not add design elements here – this is just the form data. Everything else is done in the template where the form is inserted.
2. Next, add your form fields and button. These should use Global fonts and colors only.
3. Here is the important bit – right-click the inner section tab and choose Save as Template

   

4. Go to Templates > Saved Templates to confirm you see your form section there.

Create a Section Template for Export

You’ll need to provide this template to users in the form of a block.

1. Click Template Kit > Templates and Add New
2. Give the Template a clear name such as Metform Contact or Metform Newsletter
   • Section templates must have the correct Template Options and Template Type
3. Once in the builder, click the folder icon to access My Templates and select your form template to import. It will import with code visible – don’t worry about that. Click Publish/Update.

Add the metform widget to the page layout:

1. Go to Template Kit Export > Templates and open the template layout where the form should appear (e.g. Contact page template)
2. Add the Metform widget where the form should appear
3. Do not select a form. The widget should show “No Content selected yet”
4. Save your layout.

Export:

When exporting, your Metform block should come before the template it belongs in. You may drag and drop the templates into order (Global Kit Styles should always be first/top-left)

How Users Will Import The Form

1. Import your kit via Envato Elements plugin
2. Import the Metform and the page template it is used in
3. Open the page template in the builder
4. Click on the metform widget (the navigator can help locate it more easily)
5. Click Edit Form
6. Select New Form, give it a semantic name, and click the Blank template. The builder will load.
7. Click the folder icon to access My Templates, select the metform block, and insert
8. That’s it, the form should appear and may now be customized. Users should be directed to Metform documentation for customization support: https://help.wpmet.com/docs-cat/metform/