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.
- Schaltfläche „Senden“: Finalizes and submits the form.
Wir haben beides Frei Und Pro-Eingabefeld for you. Here we’ll discuss the free input field, let’s start.
Kostenloses Eingabefeld #
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.
Inhalt #
- 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.
Einstellungen #
- 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.
- Nach Zeichenlänge: Enforce minimum/maximum characters.
- Nach Wortlänge: Enforce min/max number of words.
- Nach Ausdruck basierend: Custom regex pattern for validation.
- Required Message (Text Input): Custom message when required rule fails.
Bedingte 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 hier.
Email #
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.
Inhalt #
- 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.
Einstellungen #
- 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 hier
Nummer #
Diese Eingabefelder stellen sicher, dass Benutzer bei der numerischen Eingabe eine gültige Zahl eingeben.
Inhalt #
- 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.
Einstellungen #
- 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 hier
Telefon #
Erlauben Sie Benutzern, ihre gültige Telefonnummer anzugeben, um Verbindungen herzustellen.
Inhalt #
- 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 hier
Zeit #
Hilft Benutzern, ihre bevorzugte Zeit über den Pop-Down-Timer auszuwählen.
Inhalt #
- 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 hier.
24-Stunden-Format #
Check out our Live-Demo hier
Datum #
Verwenden Sie dieses Eingabefeld, um das Datum aus dem Pop-down-Kalender für Ihr Formular auszuwählen, um es benutzerfreundlicher zu gestalten.
Inhalt #
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.
Einstellungen #
- 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 hier
Eingabe des Datumsbereichs #
Check out our Live-Demo hier
Wählen Sie Datum mit Zeiteingabe #
Check out our Live-Demo hier
| Optionen | Beschreibung |
|---|---|
| Etikett anzeigen | Beschriftung ein-/ausschalten. |
| Position | Standard: Spitze Wählen Sie die Etikettenposition aus. wo Sie es sehen möchten. oben oder links vom Eingang. |
| Etikett | Geben Sie den Beschriftungstext ein. |
| Name | Der Name ist ein Muss. Geben Sie einen Namen ohne Leerzeichen oder Sonderzeichen ein. Verwenden Sie für mehrere Wörter nur Unterstrich/Bindestrich (_/-). Der Name muss unterschiedlich sein. |
| Platzhalter | Verwenden Sie einen Platzhalter, um Dummy-Text anzuzeigen und dem Benutzer zu helfen, den richtigen Text einzugeben. |
| Hilfstext | Geben Sie den Text ein, der unter dem Widget angezeigt werden soll. |
| Erforderlich | Standard: NEIN Schalten Sie diese Option um, damit sie erforderlich ist. Benutzer können die Formulare nicht senden, ohne die erforderlichen Felder auszufüllen. |
| Legen Sie das Mindest- oder Höchstdatum fest | Geben Sie das Mindest- und Höchstdatum an |
| Datum deaktivieren | Geben Sie Ihr Schließdatum oder Deaktivierungsdatum ein |
| Eingabe des Bereichsdatums | Bereich Datumseingabe aktivieren Bereichs-Datumseingabe aktivieren oder deaktivieren, Datumseingabe nach Datum, Jahr oder Monat. Datumsformat: Wählen Sie im Dropdown-Menü das Datumsformat aus. Zum Beispiel: TT-MM-JJJJ |
| Eingabezeit | Sie können die Zeit mit dem Datum hinzufügen. |
| Bedingte Logik | Dieses Feld basierend auf bestimmten Kriterien ein-/ausblenden. |
Wählen #
Fügen Sie eine Dropdown-Liste mit Optionen hinzu, aus denen Benutzer auswählen können, suchen Sie das Widget nach seinem Namen und ziehen Sie es dann per Drag & Drop an die gewünschte Stelle.
Inhalt #
- 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 hier
Suchoption als Bezeichnung #
Check out our Live-Demo hier
Mehrfachauswahl #
Wählen Sie im Dropdown-Menü „Mehrere Elemente“ gleichzeitig aus.
(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 hier
Ausgewählte Standardwerte #
Check out our Live-Demo hier
Textbereich #
Hilft beim Hinzufügen einer großen Anzahl von Inhalten, Überprüfungen und Kommentaren zu Ihrem Formular.
(Much like Text, but supports multiple lines.)
Inhalt #
- Rows (Number Input): Controls visible height of textarea.
- Show Label, Position, Label, Name, Help Text, Required: Same as text.
Check out our Live-Demo hier
Kontrollkästchen #
Erlauben Sie Benutzern mit dem Kontrollkästchen, mehrere Elemente gleichzeitig für Ihr Formular auszuwählen.
Inhalt #
- 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.
Anzeige #
Layout (Dropdown: Vertical / Inline): Arrange options layout.
Check out our Live-Demo hier
Vertikal #
Check out our Live-Demo hier
Symbolposition nach Text #
Check out our Live-Demo hier
Radio #
Erlauben Sie Benutzern, nur ein exklusives Element aus den mehreren Optionen auszuwählen.
Inhalt #
- 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 hier
Vertikal #
Check out our Live-Demo hier
Symbolposition nach Text #
Check out our Live-Demo hier
Vorname (Auflistung) #
Allow users to give their First Name to show them in a listing method on the mailing list. For Example : Mailchimp
Inhalt #
- Validation Type (Dropdown): Min/max or expression validation for names.
- Show Label (Toggle), Position (Dropdown), Label: As standard.
- Placeholder (Text Input): Name hint.
- Hilfstext: Additional instructions.
- Required (Toggle): Must fill.
Nachname (Auflistung) #
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.
Opt-in-Eintrag #
Verwenden Sie das Opt-in-Feld in Ihrem Formular und machen Sie Ihren Benutzer zu einem abonnierten Mailchimp-Kontaktbenutzer, indem Sie das Kontrollkästchen „Abonnieren Sie unseren Newsletter“ anklicken.
Check out our Live-Demo hier
| Optionen | Beschreibung |
|---|---|
| Etikett anzeigen | Beschriftung ein-/ausschalten. |
| Position | Standard: Spitze Wählen Sie die Etikettenposition aus. wo Sie es sehen möchten. oben oder links vom Eingang. |
| Eingabebezeichnung | Geben Sie den Beschriftungstext ein. |
| Optionsanzeige | Opt-In-Listenoption anzeigen Horizontal oder Vertikal |
| Optionen Textposition | Opt-In-Liste anzeigen Option Textposition: Vor Kontrollkästchen bzw Nach Kontrollkästchen |
| Kontrollkästchen-Optionstext | Machen Sie eine kurze Beschreibung der Optionen, die dem Benutzer angezeigt werden. Zum Beispiel: "Abonniere unseren Newsletter“ |
| Hilfstext | Geben Sie den Text ein, der unter dem Widget angezeigt werden soll. Mithilfe von Hilfetexten können Sie Nachrichten ganz einfach gezielt an die richtigen Personen senden |
| Erforderlich | Standard: NEIN Schalten Sie diese Option um, damit sie erforderlich ist. Benutzer können die Formulare nicht senden, ohne die erforderlichen Felder auszufüllen. |
| Bedingte Logik | Dieses Feld basierend auf bestimmten Kriterien ein-/ausblenden. |
DSGVO-Einwilligung #
Aktivieren Sie DSGVO-Beschwerden (Datenschutz-Grundverordnung) in Ihrem Formular, bevor Sie Benutzerdaten erfassen, da hier erläutert wird, wie Sie die Benutzerdaten normalerweise verwenden, um vor rechtlichen Schritten geschützt zu sein.
Inhalt #
- 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.
Überprüfen out our Live-Demo hier
Mit Textlink #
Überprüfen out our Live-Demo hier
Schalten #
Steuern Sie den Kontrollkästcheneingang „Ja/Nein“ oder „Ein/Aus“ einfach wie einen Lichtschalter.
Inhalt #
- 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 hier
Benutzerdefinierter Optionstext #
Check out our Live-Demo hier
reCaptcha #
Ermöglichen Sie die Integration von Google reCAPTCHA, um Ihre Website vor unerwünschtem Spam und missbräuchlichem Datenverkehr zu schützen.
Check out our Live-Demo hier
| Optionen | Beschreibung |
|---|---|
| reCAPTCHA konfigurieren | Aktivieren Sie reCAPTCHA in der Einstellung. Dann müssen Sie die reCAPTCHA-Site und den geheimen Schlüssel über MetForm -> Einstellungen konfigurieren von hier. Siehe Dokumentation. |
Einfaches reCAPTCHA #
Schützt Ihre Website vor unerwünschten Bots und Spam.
Check out our Live-Demo hier
Inline-Optionen #
Check out our Live-Demo hier
| Optionen | Beschreibung |
|---|---|
| Etikett anzeigen | Beschriftung ein-/ausschalten. |
| Position | Standard: Spitze Wählen Sie die Etikettenposition aus. wo Sie es sehen möchten. oben oder links vom Eingang. |
| Eingabe-CAPTCHA-Anzeige | Geben Sie Ihr reCAPTCHA in einem Block ein oder zeigen Sie das Eingabefeld in einer Zeile an. |
| Etikett | Geben Sie den Beschriftungstext ein. |
| Hilfstext | Geben Sie den Text ein, der unter dem Widget angezeigt werden soll. |
Bereichsschieberegler #
Stellen Sie Ihren maximalen oder minimalen Bereichswert für Ihr Formular ein, indem Sie den supercoolen Bereichsschieberegler verwenden. Sie müssen lediglich beide Enden ziehen, bis der entsprechende Wert erreicht ist.
Check out our Live-Demo hier
Standardwert #
Überprüfen out our Live-Demo hier
Mehrbereichseingang #
Überprüfen out our Live-Demo hier
| Optionen | Beschreibung |
|---|---|
| Etikett anzeigen | Beschriftung ein-/ausschalten. |
| Position | Standard: Spitze Wählen Sie die Etikettenposition aus. wo Sie es sehen möchten. oben oder links vom Eingang. |
| Etikett | Geben Sie den Beschriftungstext ein. |
| Name | Der Name ist ein Muss. Geben Sie einen Namen ohne Leerzeichen oder Sonderzeichen ein. Verwenden Sie für mehrere Wörter nur Unterstrich/Bindestrich (_/-). Der Name muss unterschiedlich sein. |
| Hilfstext | Geben Sie den Text ein, der unter dem Widget angezeigt werden soll. |
| Erforderlich | Standard: NEIN Schalten Sie diese Option um, damit sie erforderlich ist. Benutzer können die Formulare nicht senden, ohne die erforderlichen Felder auszufüllen. |
| Minimale Länge | Legen Sie den Mindestbereichswert fest |
| Maximale Länge | Legen Sie den Wert für den maximalen Bereich fest |
| Standardwert | Legen Sie Ihren Standardwert fest. Verwenden Sie Komma, um den Bereichswert festzulegen |
| Schritte | Fügen Sie den Schrittwert hinzu, um den Bereich Schritt für Schritt hinzuzufügen |
| Eingabe als Bereich | Schalten Sie diese Optionen um, um den erforderlichen Bereich einzurichten oder nicht |
| Bedingte Logik | Dieses Feld basierend auf bestimmten Kriterien ein-/ausblenden. |
URL #
Fügen Sie einfach eine URL zu Ihrem Formular hinzu, indem Sie unser URL-Eingabefeld verwenden. Dadurch wird sichergestellt, dass Benutzer eine gültige URL in das Formularfeld eingeben.
Inhalt #
- Show Label, Position, Label, Name: Standard label controls.
- Placeholder (Text): Sample URL hint.
- Hilfstext: Extra instructions.
- Required (Toggle): Must enter a valid URL.
Validation #
URL Validation: Ensures submission is a valid link.
Check out our Live-Demo hier
Passwort #
Wenn Sie möchten, dass Ihr Benutzer ein sicheres Passwort angibt, verwenden Sie unser Passwort-Eingabefeld. Es stellt sicher, dass Benutzer ein geschütztes Passwort erhalten und es bei Bedarf ändern können.
Inhalt #
- Show Label, Position, Label, Name: Standard label controls.
- Platzhalter: Password hint text.
- Hilfstext: Instruction text below field.
- Required (Toggle): Must enter password.
Validation #
Validation Type (Dropdown): Enforce strength via characters/words/regex.
Check out our Live-Demo hier
Antwortnachricht #
Inhalt #
- Add Success Message (Textarea): Text shown after successful submission.
Check out our Live-Demo hier:
Bewertung #
Sammeln Sie Bewertungen von Kunden mit Bewertung Suchen Sie im Eingabefeld nach dem Namen des Eingabefelds und ziehen Sie es per Drag & Drop an die gewünschte Stelle. Hilft dabei, Kundenbewertungen einzuholen und eine gute Bindung zwischen Eigentümer und Kunde aufzubauen.
Inhalt #
- Number of Rating Stars (Number Input): Custom number of stars to display.
- Show Label (Toggle), Position (Dropdown), Label, Name: Standard.
- Hilfstext: Rating instruction beneath stars.
- Required (Toggle): Must choose a rating.
Check out our Live-Demo hier:
Beliebig viele Sterne #
Check out our Live-Demo hier
Datei-Upload #
Metform macht das Hinzufügen sehr einfach Datei-Upload Fügen Sie das Widget zu Ihren Formularen hinzu, durchsuchen Sie das Eingabefeld nach seinem Namen und ziehen Sie es dann per Drag & Drop an die gewünschte Stelle.
Inhalt #
- Multiple Upload (Toggle): Allow uploading more than one file.
- Show Label (Toggle), Position (Dropdown), Label, Name: Label settings.
- Hilfstext: 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 hier
Zusammenfassung #
Stellen Sie vor dem Abonnement eine Zusammenfassung bereit, um eine gute Kommunikation mit Ihrem Kunden aufzubauen.
Inhalt #
- Required (Toggle): Must review before submit.
- Show Label (Toggle), Position (Dropdown), Label, Name: Standard.
- Hilfstext: Explanation under summary.
Bedingte 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.
Schaltfläche „Senden“. #
Senden Sie Ihr Formular mit diesem Feld und speichern Sie die Daten im Backend.
Inhalt #
- 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.
Einstellungen #
Hidden (Toggle): Hidden input not visible but stored for backend.
Bedingte 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.
