Form Input Field

We have both Free and Pro Input Field for you. Here we’ll discuss the free input field, let’s start.

Free Input Field #

To make any form with Metform’s Free Input Fields open the page/post you want to add the form. After that, start editing with Elementor.

Text #

Add Text field to input Name or any type of text.

Check out our Live Demo Here.

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Place HolderUse place holder to show some dummy text and help user to put correct text.
Help TextType the text to show below the widget.
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Validation Type
Select validation type from the drop-down.
By Character Length
Select By Character Length to Set up minimum and maximum Character length of the text
Also provide warning message if input not valid
By Word Length
Select By Word Length to Set up minimum and maximum Word length of the text Also provide warning message if input not valid
By Expression Based
Select By Expression Based to Set up validation Expression Based
Also provide warning message if input not valid
Select it default? (Default: None)
Make this option default selected
Conditional LogicShow/Hide this field based on certain criteria.

Email #

Make sure that the user enters the valid email address to your Form with Email Input field.

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Place HolderUse place holder to show some dummy text and help user to put correct text.
Help TextType the text to show below the widget.
Required Default: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Validation Type
Select validation type from the drop-down.
By Character Length
Select By Character Length to Set up minimum and maximum Character length of the text
Also provide warning message if input not valid
By Word Length
Select By Word Length to Set up minimum and maximum Word length of the text Also provide warning message if input not valid
By Expression Based
Select By Expression Based to Set up validation Expression Based
Also provide warning message if input not valid
Select it default? (Default: None)
Make this option default selected
Conditional LogicShow/Hide this field based on certain criteria.

Number #

This Input fields will ensure that users enter a valid Number with numeric input. 

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Place HolderUse place holder to show some dummy text and help user to put correct text.
Help TextType the text to show below the widget.
Required Default: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Validation Type
Select validation type from the drop-down.
By Character Length
Select By Character Length to Set up minimum and maximum Character length of the text
Also provide warning message if input not valid
By Word Length
Select By Word Length to Set up minimum and maximum Word length of the text Also provide warning message if input not valid
By Expression Based
Select By Expression Based to Set up validation Expression Based
Also provide warning message if input not valid
Select it default? (Default: None)
Make this option default selected
Conditional LogicShow/Hide this field based on certain criteria.

Telephone #

Allow users to give their valid Telephone number to make connections.

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Place HolderUse place holder to show some dummy text and help user to put correct text.
Help TextType the text to show below the widget.
Required Default: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Validation Type
Select validation type from the drop-down.
By Character Length
Select By Character Length to Set up minimum and maximum Character length of the text
Also provide warning message if input not valid
By Word Length
Select By Word Length to Set up minimum and maximum Word length of the text Also provide warning message if input not valid
By Expression Based
Select By Expression Based to Set up validation Expression Based
Also provide warning message if input not valid
Select it default? (Default: None)
Make this option default selected
Conditional LogicShow/Hide this field based on certain criteria.

Time #

Helps users to pick up their preferred Time from pop-down timer.

Check out our Live Demo Here.

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Place HolderUse place holder to show some dummy text and help user to put correct text.
Help TextType the text to show below the widget.
Required Default: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Use time 24 H

Enable or disable time 24 hour format
Conditional LogicShow/Hide this field based on certain criteria.

24H Format #

Check out our Live Demo Here

Date #

Use this Input field to select Date from pop-down calendar to your form to make it more user friendly.

Check out our Live Demo Here

Date Range Input #

Check out our Live Demo Here

Select Date With Time Input #

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Place HolderUse place holder to show some dummy text and help user to put correct text.
Help TextType the text to show below the widget.
Required Default: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Set minimum or maximum dateProvide minimum and maximum date
Disable DateInput your closed date or disable date
Range date InputEnable range Date Input
Enable or Disable range date Input , date Input in date wise, or year wise or month wise.
Date format : Select Date Format from the Drop-Down. For Example: DD-MM-YYYY
Input TimeYou can add time with the date.
Conditional LogicShow/Hide this field based on certain criteria.

Select #

Add a drop-down list of options for users to choose from, search the widget by it’s name then drag and drop the widget to your desired location.

Check out our Live Demo Here

Search Option As Label #

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Help TextType the text to show below the widget.
Dropdown ListAdd/edit/clone/remove options to the dropdown.

Input Field Text
Select list text that will be show to user.

Input Field Value
Select list value that will be store/mail to desired person.

Status (Default: Enable)
Want to make a option? which user can see the option but can’t select it. make it disable.

Select it default? (Default: No)
Make this option default selected
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Conditional LogicShow/Hide this field based on certain criteria.

Multi Select #

Select Multiple items from the drop-down at a time.

Check out our Live Demo Here

Default Selected Values #

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Help TextType the text to show below the widget.
Dropdown ListAdd/edit/clone/remove options to the dropdown.

Input Field Text
Select list text that will be show to user.

Input Field Value
Select list value that will be store/mail to desired person.

Status (Default: Enable)
Want to make a option? which user can see the option but can’t select it. make it disable.

Select it default? (Default: No)
Make this option default selected
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Conditional LogicShow/Hide this field based on certain criteria.

Text-area #

Helps to add a large number of content, review, comment to your form. 

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Help TextType the text to show below the widget.
Dropdown ListAdd/edit/clone/remove options to the dropdown.

Input Field Text
Select list text that will be show to user.

Input Field Value
Select list value that will be store/mail to desired person.

Status (Default: Enable)
Want to make a option? which user can see the option but can’t select it. make it disable.

Select it default? (Default: No)
Make this option default selected
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Validation TypeSelect validation type from the drop-down.
By Character Length
Select By Character Length to Set up minimum and maximum Character length of the text
Also provide warning message if input not valid
By Word Length
Select By Word Length to Set up minimum and maximum Word length of the text Also provide warning message if input not valid
By Expression Based
Select By Expression Based to Set up validation Expression Based
Also provide warning message if input not valid
Select it default? (Default: None)
Make this option default selected
Conditional LogicShow/Hide this field based on certain criteria.

Checkbox #

Permit users to select multiple items to your form at a time with Checkbox.

Check out our Live Demo Here

Vertical #

Check out our Live Demo Here

Icon Position After Text #

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Help TextType the text to show below the widget.
Option DisplayDisplay options Horizontally or Vertically
Options Text PositionDisplay Option Text Position: Before Checkbox or After Checkbox
Checkbox OptionsAdd/edit/clone/remove options to the drop-down.

Checkbox option Text
Select option text that will be show to user.

Option Value
Select option value that will be store/mail to desired person.

Status (Default: Active)
Want to make a option? which user can see the option but can’t select it. make it disable.
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Conditional LogicShow/Hide this field based on certain criteria.

Radio #

Allow users to select only one exclusive item from the multiple options.

Check out our Live Demo Here

Vertical #

Check out our Live Demo Here

Icon Position After Text #

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Help TextType the text to show below the widget.
Option DisplayDisplay Radio options Horizontally or Vertically
Options Text PositionDisplay Radio Option Text Position: Before Radio or After Radio
Radio OptionsAdd/edit/clone/remove options to the drop-down.

Radio option Text
Select option text that will be show to user.

Radio Value
Select option value that will be store/mail to desired person.

Status (Default: Active)
Want to make a option? which user can see the option but can’t select it. make it disable.
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Conditional LogicShow/Hide this field based on certain criteria.

First Name (Listing) #

Allow users to give their FirstName to show them in a listing method on the mailing list. For Example : Mailchimp

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
Place Holder Use place holder to show some dummy text and help user to put correct text.
Help TextType the text to show below the widget.
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Validation TypeSelect validation type from the drop-down.
By Character Length
Select By Character Length to Set up minimum and maximum Character length of the text
Also provide warning message if input not valid
By Word Length
Select By Word Length to Set up minimum and maximum Word length of the text Also provide warning message if input not valid
By Expression Based
Select By Expression Based to Set up validation Expression Based
Also provide warning message if input not valid
Select it default? (Default: None)
Make this option default selected
Conditional LogicShow/Hide this field based on certain criteria.

Last Name (Listing) #

Allow users to give their LastName to show them in a listing method on the mailing list. For Example : Mailchimp

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
Place Holder Use place holder to show some dummy text and help user to put correct text.
Help TextType the text to show below the widget.
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Validation TypeSelect validation type from the drop-down.
By Character Length
Select By Character Length to Set up minimum and maximum Character length of the text
Also provide warning message if input not valid
By Word Length
Select By Word Length to Set up minimum and maximum Word length of the text Also provide warning message if input not valid
By Expression Based
Select By Expression Based to Set up validation Expression Based
Also provide warning message if input not valid
Select it default? (Default: None)
Make this option default selected
Conditional LogicShow/Hide this field based on certain criteria.

Opt In Listing #

Use opt-in field to your form and make your user as a subscribed mailchimp contact user by clicking the checkbox “Subscribe to our newsletter”.

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
Input LabelType the label text.
Option Display Display Opt In listing Option Horizontally or Vertically
Options Text Position Display Opt In listing Option Text Position: Before Checkbox or After Checkbox
Checkbox Option TextGive brief about options that will show to the user. For example: “Subscribe to our newsletter
Help Text Type the text to show below the widget. Easily target and deliver messages to the right people with help text
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Conditional LogicShow/Hide this field based on certain criteria.

GDPR Consent #

Enable GDPR(General Data Protection Regulation) complaints to your form before collecting user data as it explains how you are usually using the user data to stay safe from action of law.

Check out our Live Demo Here

With Text Link #

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
Input LabelType the label text.
Option Display Display GDPR Consent options Horizontally or Vertically
Options Text Position Display GDPR Consent Option Text Position: Before Checkbox or After Checkbox
Checkbox Option TextGive brief about options that will show to the user. For example: “Agree on our terms and condition for using your submitted data?”
Help Text Type the text to show below the widget. Easily target and deliver messages to the right people with help text
Conditional LogicShow/Hide this field based on certain criteria.

Switch #

Easily control the Yes/No or On/Off toggle Switch checkbox input just like a light switch.

Check out our Live Demo Here

Custom Option Text #

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Help TextType the text to show below the widget.
Active or Inactive TextProvide Active or Inactive text. For Example: Yes or No
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Conditional LogicShow/Hide this field based on certain criteria.

reCAPTCHA #

Allow you to integrate Google reCAPTCHA to keep your site safe from unwanted spam and abusive traffic.

Check out our Live Demo Here

OptionsDescription
reCAPTCHA confiqureTurn on reCAPTCHA from the setting. Then you have to must configure reCAPTCHA site and secret key from MetForm -> Settings from here.
See Documentation.

Simple reCAPTCHA #

Protects your site from unwanted bots and spam.

Check out our Live Demo Here

Inline Options #

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
Input CAPTCHA DisplayInput your reCAPTCHA in a block or show the input field in a line.
Label Type the label text.
Help TextType the text to show below the widget.

Range Slider #

Set your max or min range value to your form by using super cool Range slider. All you have to do is just drag both ends until your appropriate value comes. 

Check out our Live Demo Here

Default Value #

Check out our Live Demo Here

Multi Range Input #

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Help TextType the text to show below the widget.
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Min LengthSet the Minimum range value
Max Length Set the Maximum range value
Default ValueSet your default value, Use comma to set range value
StepsAdd steps value to add range by step after step
Input as RangeToggle this options to set up range required or not
Conditional LogicShow/Hide this field based on certain criteria.

URL #

Simply add URL to your form using our URL Input Field. It ensures that users Input a valid URL to the form field. 

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Place Holder Use place holder to show some dummy text and help user to put correct text.
Help TextType the text to show below the widget.
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Conditional LogicShow/Hide this field based on certain criteria.

Password #

 If you want your user to give a strong password, use our Password Input Field. It makes sure that users get a protected password and can be able to change it when needed.

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Place Holder Use place holder to show some dummy text and help user to put correct text.
Help TextType the text to show below the widget.
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Validation TypeSelect validation type from the drop-down.
By Character Length
Select By Character Length to Set up minimum and maximum Character length of the text
Also provide warning message if input not valid
By Word Length
Select By Word Length to Set up minimum and maximum Word length of the text Also provide warning message if input not valid
By Expression Based
Select By Expression Based to Set up validation Expression Based
Also provide warning message if input not valid
Select it default? (Default: None)
Make this option default selected
Conditional LogicShow/Hide this field based on certain criteria.

Response Message #

Check out our Live Demo Here:

OptionsDescription
Add Success MessageProvide e successful message after Form submission

Rating #

Collect ratings from customers with Rating input field, search the input field by it’s name then drag and drop the input field to your desired location. Helps to get customer review and build up a good bonding between owner and customer.

Check out our Live Demo Here:

Any Number of Stars #

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Help TextType the text to show below the widget.
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
Number of rating starCustomize your rating number. By Default: 3
Conditional LogicShow/Hide this field based on certain criteria.

File Upload #

Metform makes it very easy to add File Upload widget to your forms, search the input field by it’s name then drag and drop the input field to your desired location.

Check out our Live Demo Here

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Help TextType the text to show below the widget.
File Upload Icon You can upload from our Icon Library or upload SVG
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.
File Size LimitDefault: 128KB
Add the custom file size for uploading files.
File TypesDefault:  .jpg, .jpeg, .gif, .png
Add/Edit the file type that are allowed to upload from the drop-down.
Conditional LogicShow/Hide this field based on certain criteria.

Summary #

Provide summary before subscription to build up a good communication with your customer.

OptionsDescription
Show LabelTurn on/off Label.
PositionDefault: Top
Select the label position. where you want to see it. top or left of the input.
LabelType the label text.
NameName is must required. Enter a name without space or any special character. use only underscore/hyphen (_/-) for multiple words. The name must be different.
Help TextType the text to show below the widget.
RequiredDefault: No
Toggle this option to make it required. Users can’t submit the forms without filling the required fields.

Submit Button #

Submit your form with this field and store data in the back end.

OptionsDescription
LabelType the label text.
Button AlignmentSelect button position. where you want to see it. Left, Center or Right in the form.
Icon You can upload from our Icon Library or upload SVG
Icon PositionSelect the icon position Before or After
ClassProvide Class Name
IDProvide class ID
Conditional LogicShow/Hide this field based on certain criteria.
HiddenHidden input list will show in the back end. Input Value, Input Name, Input Class

MetForm Features
What are your feelings
Updated on December 24, 2024