MetForm offers a comprehensive set of form input fields for creating flexible and interactive WordPress forms. Each field can be customized with labels, placeholders, validation rules, and conditional logic to suit any form requirement.
Input Fields and Their Functions #
- Text Field: Collects single-line textual input from users.
- Email Field: Accepts and validates email addresses.
- Number Field: Allows numeric input with min, max, and step control.
- Telephone Field: Collects phone numbers in a structured format.
- Time Field: Lets users select a time, optionally in 24-hour format.
- Date Field: Enables date selection with optional range or date+time mode.
- Select (Dropdown) Field: Provides a single-choice dropdown menu.
- Multi-Select Field: Allows selection of multiple options from a list.
- Textarea Field: Captures multi-line text input from users.
- Checkbox Field: Lets users select one or more predefined options.
- Radio Field: Allows single-choice selection from multiple options.
- First Name Field: Captures the user’s first name.
- Last Name Field: Captures the user’s last name.
- GDPR Consent Field: Adds a checkbox for compliance with data privacy laws.
- Switch Field: Provides an on/off toggle for binary choices.
- URL Field: Accepts website URLs with validation.
- Password Field: Collects secure password input.
- Response Message: Displays success, error, or custom messages.
- Rating Field: Lets users rate items with stars or similar symbols.
- File Upload Field: Enables uploading of single or multiple files with type and size restrictions.
- Summary Field: Displays a summary of form data before submission.
- Skickaknapp: Finalizes and submits the form.
Vi har båda Fri och Pro Inmatningsfält for you. Here we’ll discuss the free input field, let’s start.
Gratis inmatningsfält #
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.
Innehåll #
- Show Label (Toggle): Turn the field label on/off.
- Position (Dropdown: Top / Left): Choose label position relative to the input.
- Label (Text Input): Text that appears as the field’s title.
- Name (Text Input – Required): Unique internal identifier without spaces.
- Placeholder (Text Input): Light text inside the field guiding the user.
- Help Text (Textarea): Instruction text displayed below the field.
- Default Value (Text Input): Pre-populates the field with a value.
- Required (Toggle): Makes the field mandatory for form submission.
inställningar #
- Field ID (Text Input): Custom HTML ID for styling or scripting.
- Width (Dropdown: 100% / 50% / Custom): Controls how much horizontal space the field uses.
- Read Only (Toggle): Prevents users from editing the text.
- Disabled (Toggle): Completely disables the field interaction.
Validation #
- Validation Type (Dropdown): Choose how the field’s value is validated.
- Efter teckenlängd: Enforce minimum/maximum characters.
- Efter ordlängd: Enforce min/max number of words.
- Baserat på uttryck: Custom regex pattern for validation.
- Required Message (Text Input): Custom message when required rule fails.
Villkorlig logik #
- Enable Conditional Logic (Toggle): Enable dynamic show/hide behavior.
- Action (Dropdown: Show / Hide): Whether to show or hide based on conditions.
- Field (Dropdown): Field to compare against.
- Operator (Dropdown): Type of comparison (Equal / Not Equal / Contains / Greater / Less).
- Value (Text Input): Condition value to match.
Check out our Live demo här.
E-post #
Make sure that the user enters the valid email address to your Form with the Email Input field. Search the Metform email widget and drag and drop.
Innehåll #
- Show Label (Toggle): Display label or not.
- Position (Dropdown: Top / Left): Where the label appears.
- Label (Text Input): Field title text.
- Name (Text Input – Required): Unique field identifier.
- Placeholder (Text Input): Hint text inside the field.
- Help Text (Textarea): Instructional text under the field.
- Required (Toggle): Make email required to submit.
inställningar #
- Field ID (Text Input): For CSS/JS targeting.
- Width (Dropdown): How wide the field appears visually.
- Read Only (Toggle): Users can’t change the displayed email.
Check out our Live demo här
siffra #
Detta inmatningsfält säkerställer att användare anger ett giltigt nummer med numerisk inmatning.
Innehåll #
- Show Label (Toggle): Control label visibility.
- Position (Dropdown: Top / Left): Label placement.
- Label (Text Input): Number prompt text.
- Name (Text Input – Required): Unique identifier.
- Placeholder (Text Input): Default hint numeric text.
- Help Text (Textarea): Help text guiding input.
- Default Value (Number Input): Pre-set number in field.
- Required (Toggle): Mandatory numeric input.
inställningar #
- Min Value (Number Input): Smallest allowed number.
- Max Value (Number Input): Largest allowed number.
- Step (Number Input): Increment step for arrows/spinners.
- Read Only (Toggle): Prevent editing.
- Disabled (Toggle): Disable the control.
Check out our Live demo här
Telefon #
Tillåt användare att ge sitt giltiga telefonnummer för att göra anslutningar.
Innehåll #
- Show Label (Toggle): Show/hide phone label.
- Position (Dropdown: Top / Left): Label layout.
- Label (Text Input): Field title text.
- Name (Text Input – Required): Field internal name.
- Placeholder (Text Input): Phone format example text.
- Help Text (Textarea): Additional instructions.
- Required (Toggle): Must be filled to submit.
Check out our Live demo här
Tid #
Hjälper användare att hämta sin föredragna tid från pop-down timer.
Innehåll #
- Show Label (Toggle): Enable/disable label.
- Position (Dropdown): Top/Left label position.
- Label (Text Input): Prompt for time.
- Name (Text Input): Internal time field name.
- Placeholder (Text Input): Time format hint.
- Help Text (Textarea): Extra instruction text.
- Required (Toggle): Mandatory time.
- Use 24H Format (Toggle): Option to use 24-hour instead of AM/PM.
Check out our Live demo här.
24H-format #
Check out our Live demo här
Datum #
Använd det här inmatningsfältet för att välja Datum från popdown-kalendern till ditt formulär för att göra det mer användarvänligt.
Innehåll #
Required (Toggle): Must select a date/time.
Show Label (Toggle): Toggle field label display.
Position (Dropdown): Choose label position.
Label (Text Input): Text shown as a title.
Name (Text Input): Unique field key.
Help Text (Textarea): Extra instructions.
inställningar #
- Range Date Input (Toggle): Enable two dates (start/end) instead of single.
- Min/Max Date (Date Picker): Earliest and latest selectable dates.
- Disable Dates (Date Picker): Block specific dates.
- Date Format (Dropdown): Choose format such as DD-MM-YYYY.
- Input Time (Toggle): Add time selection with date.
Check out our Live demo här
Inmatning av datumintervall #
Check out our Live demo här
Välj Datum med tidsinmatning #
Check out our Live demo här
| alternativ | Beskrivning |
|---|---|
| Visa etikett | Slå på/av etikett. |
| Placera | Standard: Topp Välj etikettposition. där du vill se den. överst eller till vänster om ingången. |
| Märka | Skriv etiketttexten. |
| namn | Namn måste anges. Ange ett namn utan mellanslag eller något specialtecken. använd endast understreck/bindestreck (_/-) för flera ord. Namnet måste vara annorlunda. |
| Platshållare | Använd platshållaren för att visa lite dummytext och hjälpa användaren att lägga in korrekt text. |
| Hjälp text | Skriv texten som ska visas under widgeten. |
| Nödvändig | Standard: Nej Växla detta alternativ för att göra det obligatoriskt. Användare kan inte skicka in formulären utan att fylla i de obligatoriska fälten. |
| Ställ in lägsta eller högsta datum | Ange lägsta och högsta datum |
| Inaktivera datum | Ange ditt stängda datum eller inaktivera datum |
| Inmatning av intervalldatum | Aktivera intervall Datuminmatning Aktivera eller inaktivera intervall datuminmatning , datuminmatning i datumvis, eller årsvis eller månadsvis. Datumformat : Välj Datumformat från rullgardinsmenyn. Till exempel: DD-MM-ÅÅÅÅ |
| Inmatningstid | Du kan lägga till tid med datum. |
| Villkorlig logik | Visa/dölj detta fält baserat på vissa kriterier. |
Välj #
Lägg till en rullgardinslista med alternativ som användarna kan välja mellan, sök widgeten efter dess namn och dra och släpp widgeten till önskad plats.
Innehåll #
- Required (Toggle): Must pick an option.
- Show Label (Toggle): Display the label.
- Position (Dropdown): Position of label.
- Label (Text Input): Dropdown title.
- Name (Text Input – Required): Internal field name.
- Help Text (Textarea): Supporting info text.
- Dropdown List (Repeater):
- Option Text: User sees this option.
- Option Value: Value sent/stored after submit.
- Status (Dropdown: Enable/Disable): Options can be disabled.
- Default Selected (Toggle): Make this option selected by default.
Check out our Live demo här
Sökalternativ som etikett #
Check out our Live demo här
Flera val #
Välj Flera objekt i rullgardinsmenyn samtidigt.
(Same as Select, but allows selecting multiple options from the list.)
Multiple Selection (Toggle): Allow multiple items to be chosen.
Check out our Live demo här
Standard valda värden #
Check out our Live demo här
Text-område #
Hjälper till att lägga till ett stort antal innehåll, granska, kommentera i ditt formulär.
(Much like Text, but supports multiple lines.)
Innehåll #
- Rows (Number Input): Controls visible height of textarea.
- Show Label, Position, Label, Name, Help Text, Required: Same as text.
Check out our Live demo här
Kryssruta #
Tillåt användare att välja flera objekt i ditt formulär samtidigt med kryssrutan.
Innehåll #
- Show Label (Toggle), Position (Dropdown), Label, Name: Standard label controls.
- Checkbox Options (Repeater):
- Option Text: Text shown next to checkbox.
- Option Value: Stored when submitted.
- Status (Dropdown: Enable / Disable): Active or disabled option.
- Required (Toggle): Must check at least one.
Visa #
Layout (Dropdown: Vertical / Inline): Arrange options layout.
Check out our Live demo här
Vertikal #
Check out our Live demo här
Ikonposition efter text #
Check out our Live demo här
Radio #
Tillåt användare att bara välja ett exklusivt objekt från de flera alternativen.
Innehåll #
- Required (Toggle): Must choose an option.
- Show Label, Position, Label, Name: Label settings.
- Option Display (Dropdown: Vertical / Horizontal): Choose orientation.
- Options Text Position (Dropdown: Before / After): Where the label sits relative to the circle.
- Radio Options (Repeater):
- Radio Option Text: Label shown to user.
- Radio Value: Value saved upon submit.
- Status (Dropdown): Active/disabled option.
Check out our Live demo här
Vertikal #
Check out our Live demo här
Ikonposition efter text #
Check out our Live demo här
Förnamn (förteckning) #
Allow users to give their First Name to show them in a listing method on the mailing list. For Example : Mailchimp
Innehåll #
- Validation Type (Dropdown): Min/max or expression validation for names.
- Show Label (Toggle), Position (Dropdown), Label: As standard.
- Placeholder (Text Input): Name hint.
- Hjälp text: Additional instructions.
- Required (Toggle): Must fill.
Efternamn (förteckning) #
Allow users to give their LastName to show them in a listing method on the mailing list. For Example : Mailchimp
Same controls as First Name.
Registrera dig #
Använd opt-in-fältet i ditt formulär och gör din användare som en prenumererad mailchimp-kontaktanvändare genom att klicka på kryssrutan "Prenumerera på vårt nyhetsbrev".
Check out our Live demo här
| alternativ | Beskrivning |
|---|---|
| Visa etikett | Slå på/av etikett. |
| Placera | Standard: Topp Välj etikettposition. där du vill se den. överst eller till vänster om ingången. |
| Inmatningsetikett | Skriv etiketttexten. |
| Alternativ Display | Visa opt-in listningsalternativ Vågrätt eller Vertikalt |
| Alternativ Textposition | Visa Opt In listning Alternativ Text Position: Innan Kryssrutan eller Efter Kryssruta |
| Kryssruta Alternativ Text | Berätta kort om alternativ som kommer att visas för användaren. Till exempel: "Prenumerera på vårt nyhetsbrev“ |
| Hjälp text | Skriv texten som ska visas under widgeten. Rikta och leverera enkelt meddelanden till rätt personer med hjälptext |
| Nödvändig | Standard: Nej Växla detta alternativ för att göra det obligatoriskt. Användare kan inte skicka in formulären utan att fylla i de obligatoriska fälten. |
| Villkorlig logik | Visa/dölj detta fält baserat på vissa kriterier. |
GDPR-samtycke #
Aktivera GDPR (General Data Protection Regulation)-klagomål i ditt formulär innan du samlar in användardata eftersom det förklarar hur du vanligtvis använder användardata för att skydda dig från lagar.
Innehåll #
- Help Text (Textarea): Further explanation.
- Show Label (Toggle): Display consent block title.
- Position (Dropdown): Label placement.
- Input Label (Text Input): Consent prompt text.
- Option Display (Dropdown): Horizontal/vertical layout.
- Options Text Position (Dropdown): Label before/after checkbox.
- Checkbox Option Text (Textarea): Consent statement text.
Kolla upp out our Live demo här
Med textlänk #
Kolla upp out our Live demo här
Växla #
Kontrollera enkelt ingången för Ja/Nej eller På/Av-växlingsbrytare, precis som en ljusströmbrytare.
Innehåll #
- Required (Toggle): Must select a state.
- Show Label (Toggle), Position (Dropdown), Label, Name: Standard label controls.
- Help Text (Textarea): Description below switch.
- Active/Inactive Text (Text Inputs): Custom labels for on/off states.
Check out our Live demo här
Anpassad alternativtext #
Check out our Live demo här
reCAPTCHA #
Tillåt dig att integrera Google reCAPTCHA för att skydda din webbplats från oönskad spam och otillåten trafik.
Check out our Live demo här
| alternativ | Beskrivning |
|---|---|
| reCAPTCHA confiqure | Slå på reCAPTCHA från inställningen. Då måste du konfigurera reCAPTCHA-webbplatsen och den hemliga nyckeln från MetForm -> Inställningar härifrån. Se Dokumentation. |
Enkel reCAPTCHA #
Skyddar din webbplats från oönskade bots och spam.
Check out our Live demo här
Inline-alternativ #
Check out our Live demo här
| alternativ | Beskrivning |
|---|---|
| Visa etikett | Slå på/av etikett. |
| Placera | Standard: Topp Välj etikettposition. där du vill se den. överst eller till vänster om ingången. |
| Inmatning av CAPTCHA-skärm | Mata in din reCAPTCHA i ett block eller visa inmatningsfältet på en rad. |
| Märka | Skriv etiketttexten. |
| Hjälp text | Skriv texten som ska visas under widgeten. |
Range Slider #
Ställ in ditt max- eller minintervallvärde till din form genom att använda den supercoola Range-reglaget. Allt du behöver göra är att bara dra båda ändarna tills ditt lämpliga värde kommer.
Check out our Live demo här
Standardvärde #
Kolla upp out our Live demo här
Multi Range Ingång #
Kolla upp out our Live demo här
| alternativ | Beskrivning |
|---|---|
| Visa etikett | Slå på/av etikett. |
| Placera | Standard: Topp Välj etikettposition. där du vill se den. överst eller till vänster om ingången. |
| Märka | Skriv etiketttexten. |
| namn | Namn måste anges. Ange ett namn utan mellanslag eller något specialtecken. använd endast understreck/bindestreck (_/-) för flera ord. Namnet måste vara annorlunda. |
| Hjälp text | Skriv texten som ska visas under widgeten. |
| Nödvändig | Standard: Nej Växla detta alternativ för att göra det obligatoriskt. Användare kan inte skicka in formulären utan att fylla i de obligatoriska fälten. |
| Min Längd | Ställ in minsta intervallvärde |
| Maxlängd | Ställ in det maximala intervallet |
| Standardvärde | Ställ in ditt standardvärde, Använd kommatecken för att ställa in intervallvärdet |
| Steg | Lägg till stegvärde för att lägga till intervall för steg efter steg |
| Mata in som intervall | Växla detta alternativ för att ställa in intervall som krävs eller inte |
| Villkorlig logik | Visa/dölj detta fält baserat på vissa kriterier. |
URL #
Lägg bara till URL till ditt formulär med hjälp av vårt URL-inmatningsfält. Det säkerställer att användare anger en giltig URL i formulärfältet.
Innehåll #
- Show Label, Position, Label, Name: Standard label controls.
- Placeholder (Text): Sample URL hint.
- Hjälp text: Extra instructions.
- Required (Toggle): Must enter a valid URL.
Validation #
URL Validation: Ensures submission is a valid link.
Check out our Live demo här
Lösenord #
Om du vill att din användare ska ge ett starkt lösenord, använd vårt lösenordsinmatningsfält. Det ser till att användarna får ett skyddat lösenord och kan ändra det när det behövs.
Innehåll #
- Show Label, Position, Label, Name: Standard label controls.
- Platshållare: Password hint text.
- Hjälp text: Instruction text below field.
- Required (Toggle): Must enter password.
Validation #
Validation Type (Dropdown): Enforce strength via characters/words/regex.
Check out our Live demo här
Svarsmeddelande #
Innehåll #
- Add Success Message (Textarea): Text shown after successful submission.
Check out our Live demo här:
Betyg #
Samla betyg från kunder med Betyg inmatningsfält, sök i inmatningsfältet efter dess namn och dra och släpp inmatningsfältet till önskad plats. Hjälper till att få kundrecension och bygga upp ett bra band mellan ägare och kund.
Innehåll #
- Number of Rating Stars (Number Input): Custom number of stars to display.
- Show Label (Toggle), Position (Dropdown), Label, Name: Standard.
- Hjälp text: Rating instruction beneath stars.
- Required (Toggle): Must choose a rating.
Check out our Live demo här:
Valfritt antal stjärnor #
Check out our Live demo här
Filuppladdning #
Metform gör det väldigt enkelt att lägga till Filuppladdning widget till dina formulär, sök i inmatningsfältet efter dess namn och dra och släpp inmatningsfältet till önskad plats.
Innehåll #
- Multiple Upload (Toggle): Allow uploading more than one file.
- Show Label (Toggle), Position (Dropdown), Label, Name: Label settings.
- Hjälp text: Guidance under uploader.
- Required (Toggle): Must upload.
- Allowed File Types (Text Input/List): Specify extensions such as
.jpg, .png. - Max File Size (Number Input): Maximum allowed file size.
Check out our Live demo här
Sammanfattning #
Ge en sammanfattning innan prenumeration för att bygga upp en bra kommunikation med din kund.
Innehåll #
- Required (Toggle): Must review before submit.
- Show Label (Toggle), Position (Dropdown), Label, Name: Standard.
- Hjälp text: Explanation under summary.
Villkorlig logik #
- Enable Conditional Logic (Toggle): Enable show/hide rules.
- Action (Dropdown: Show / Hide): Visibility setting.
- Field (Dropdown: Select Field): Field controlling summary visibility.
- Operator (Dropdown: Equal / Not Equal / Contains): Comparison type.
- Value (Text Input / Option Selector): Value triggering summary display.
Skickaknapp #
Skicka in ditt formulär med detta fält och lagra data i backend.
Innehåll #
- Label (Text Input): Text shown on Submit button.
- Button Alignment (Dropdown: Left / Center / Right): Position submit button in form.
- Icon (Icon Picker): Choose an icon to accompany the text.
- Icon Position (Dropdown: Before / After): Place icon relative to text.
- Class (Text Input): Add a CSS class for styling.
- ID (Text Input): Add a CSS ID for scripting.
inställningar #
Hidden (Toggle): Hidden input not visible but stored for backend.
Villkorlig logik #
- Enable Conditional Logic (Toggle): Activate dynamic display.
- Action (Dropdown: Show / Hide): Decide if submit button appears.
- Field (Dropdown: Select Field): Field controlling submit button visibility.
- Operator (Dropdown: Equal / Not Equal / Contains / Not Contains): Comparison type.
- Value (Text Input / Option Selector): Value triggering the button display.
