We’re on vacation till 19 June. Support replies might be delayed than usual. Thank you for being patient and considerate.

Up to 65% off Early Bird LTD ➜ GutenKit – Gutenberg Page Builder Blocks!

Day
Hou
Min
Sec

Creating Forms With MetForm

MetForm form builder addon comes with 30+ templates (e.g. contact form, newsletter form, feedback form, etc) to create any type of form in the WordPress website. 

MetForm also allows you to create any custom form by just dragging and dropping the elementor elements. With 40+ styles for customization, you can design a fully responsive and functional form within a few minutes. 

How to Create Forms With MetForm #

✨✨Requirements:

👉👉 Elementor: Download Elementor Plugin
👉👉 MetForm: Download MetForm Plugin

Step 1: Choose a Form Template  #

Navigate to 1. Dashboard -> 2. MetForm -> 3. Forms -> 4. Click Add New -> 5. A Pop Up will appear

From this Create Form popup window, you will see-

  • Form name field

You can start making a form by typing the name of it in this field.

  • Form type

The form type is General Form. It is by default, if you use MetForm pro you can have the option here.

  • Template choices

You will get 30+ different types of templates here. 

  • Click Edit

Clicking this button, you will start editing the form with Elementor.

Popup window of MetForm

Step 2: Customize the Form Template  #

Every form template is completely designed and developed for serving different purposes (e.g. feedback form for getting customers’ feedback). However, you can customize them in any way as they are compatible with elementor. 

You will get 3 settings such as content, style, and advanced to customize and control the input field  and button properties.

👉👉Content Customization   #

  • Can hide/show the label 
  • Set position for left or top
  • Can change the placeholder 
  • Add help text
  • Turn on/off the required property 
  • Set the warning message 
  • Set the validation type 
  • Insert URL 
Metform form content customization

👉👉Style Customization  #

  • Set custom width for layout 
  • Change the input field text color and typography 
  • Customize placeholder and help text color and typography 
  • Add background color 
  • Set custom padding, margin 
  • Select a custom warning color for the required field 
  • Set left, center, justify, or right alignment 
  • Insert image background for input field 
  • Customize border, border color, and border-radius
Metform form style customization

👉👉Advanced Customization  #

  • Set custom margin, padding, width, and position for form layout 
  • Various motion effects for the input fields 
  • Turn on/off the responsiveness for pc, tab, and mobile 
  • Add additional CSS code and many more
Metform form Advanced Customization 

Step 3: Insert Form to a Page/Post   #

Next, time to insert the form into your preferred page/post. MetForm makes it easy to insert the form into any page or post by elementor. Also, you can insert any form using the shortcode of the form. 

1. Insert MetForm Form using Elementor  #

First, create a new page/post or open an existing one. 

  • Start with “Edit with Elementor”
  • Choose an elementor block
  • Search for MetForm widget in Elementor elements 
  • Drag and drop the widget into selected the block 
  • Click on “Edit form” 
  • You will see the form names you have created already 
  • Choose the form name 

The form will be inserted within seconds. Now you can do further customization or keep it as it is. 

  • Click on Save & Close 
  • Click on “Update”
inserting Metform form

2. Insert MetForm Form using Shortcode  #

Inserting a MetForm form using a shortcode is also an easier way. 

  • Create a new page/post or open an existing page/post.
  • Hover over MetForm -> Click on forms 

You will see all the shortcodes along with the form name. 

  • Copy the shortcode that you want to insert 
  • Paste the shortcode on the page/post 
  • Click on “Publish”
metform form shortcode

You are ready to go! Hope, you will enjoy using these form templates and make your website more elegant and dynamic.

What are your feelings
Updated on January 28, 2024