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.
- Bouton de soumission: Finalizes and submits the form.
Nous avons les deux Gratuit et Champ de saisie Pro for you. Here we’ll discuss the free input field, let’s start.
Champ de saisie libre #
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.
Texte #
Add Text field to input Name or any type of text.
Contenu #
- 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.
Paramètres #
- 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.
- Par longueur de caractère : Enforce minimum/maximum characters.
- Par longueur de mot : Enforce min/max number of words.
- Par expression basée sur : Custom regex pattern for validation.
- Required Message (Text Input): Custom message when required rule fails.
Logique conditionnelle #
- 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 Démo en direct ici.
E-mail #
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.
Contenu #
- 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.
Paramètres #
- 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 Démo en direct ici
Nombre #
Ces champs de saisie garantiront que les utilisateurs saisissent un numéro valide avec une saisie numérique.
Contenu #
- 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.
Paramètres #
- 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 Démo en direct ici
Téléphone #
Autoriser les utilisateurs à donner leur numéro de téléphone valide pour établir des connexions.
Contenu #
- 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 Démo en direct ici
Temps #
Aide les utilisateurs à récupérer leur heure préférée à partir de la minuterie contextuelle.
Contenu #
- 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 Démo en direct ici.
Format 24H #
Check out our Démo en direct ici
Date #
Utilisez ce champ de saisie pour sélectionner la date dans le calendrier contextuel de votre formulaire afin de le rendre plus convivial.
Contenu #
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.
Paramètres #
- 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 Démo en direct ici
Entrée de plage de dates #
Check out our Démo en direct ici
Sélectionnez la date avec la saisie de l'heure #
Check out our Démo en direct ici
| Possibilités | Description |
|---|---|
| Afficher l'étiquette | Activer/désactiver l'étiquette. |
| Position | Défaut: Haut Sélectionnez la position de l'étiquette. où vous voulez le voir. en haut ou à gauche de l’entrée. |
| Étiquette | Tapez le texte de l'étiquette. |
| Nom | Le nom est obligatoire. Saisissez un nom sans espace ni caractère spécial. utilisez uniquement le trait de soulignement/trait d'union (_/-) pour plusieurs mots. Le nom doit être différent. |
| Espace réservé | Utilisez un espace réservé pour afficher un texte factice et aider l'utilisateur à mettre le texte correct. |
| Texte d'aide | Tapez le texte à afficher sous le widget. |
| Requis | Défaut: Non Activez cette option pour la rendre obligatoire. Les utilisateurs ne peuvent pas soumettre les formulaires sans remplir les champs obligatoires. |
| Définir une date minimale ou maximale | Indiquer la date minimale et maximale |
| Désactiver la date | Saisissez votre date de fermeture ou désactivez la date |
| Plage de dates Entrée | Activer la plage Entrée de date Activer ou désactiver la saisie de la plage de dates, la date Saisie en termes de date, d'année ou de mois. Format de date : sélectionnez Format de date dans la liste déroulante. Par exemple : JJ-MM-AAAA |
| Temps d'entrée | Vous pouvez ajouter de l'heure avec la date. |
| Logique conditionnelle | Afficher/Masquer ce champ en fonction de certains critères. |
Sélectionner #
Ajoutez une liste déroulante d'options parmi lesquelles les utilisateurs peuvent choisir, recherchez le widget par son nom, puis faites glisser et déposez le widget à l'emplacement souhaité.
Contenu #
- 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 Démo en direct ici
Option de recherche en tant qu'étiquette #
Check out our Démo en direct ici
Sélection multiple #
Sélectionnez Plusieurs éléments dans la liste déroulante à la fois.
(Same as Select, but allows selecting multiple options from the list.)
Multiple Selection (Toggle): Allow multiple items to be chosen.
Check out our Démo en direct ici
Valeurs sélectionnées par défaut #
Check out our Démo en direct ici
Zone de texte #
Aide à ajouter un grand nombre de contenus, de révisions et de commentaires à votre formulaire.
(Much like Text, but supports multiple lines.)
Contenu #
- Rows (Number Input): Controls visible height of textarea.
- Show Label, Position, Label, Name, Help Text, Required: Same as text.
Check out our Démo en direct ici
Case à cocher #
Permettez aux utilisateurs de sélectionner plusieurs éléments de votre formulaire à la fois avec Checkbox.
Contenu #
- 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.
Afficher #
Layout (Dropdown: Vertical / Inline): Arrange options layout.
Check out our Démo en direct ici
Verticale #
Check out our Démo en direct ici
Position de l'icône après le texte #
Check out our Démo en direct ici
Radio #
Autorisez les utilisateurs à sélectionner un seul élément exclusif parmi les multiples options.
Contenu #
- 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 Démo en direct ici
Verticale #
Check out our Démo en direct ici
Position de l'icône après le texte #
Check out our Démo en direct ici
Prénom (annonce) #
Allow users to give their First Name to show them in a listing method on the mailing list. For Example : Mailchimp
Contenu #
- Validation Type (Dropdown): Min/max or expression validation for names.
- Show Label (Toggle), Position (Dropdown), Label: As standard.
- Placeholder (Text Input): Name hint.
- Texte d'aide: Additional instructions.
- Required (Toggle): Must fill.
Nom de famille (annonce) #
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.
Annonce d'inscription #
Utilisez le champ d'inscription dans votre formulaire et faites en sorte que votre utilisateur en tant qu'utilisateur abonné à Mailchimp contacte en cochant la case « S'abonner à notre newsletter ».
Check out our Démo en direct ici
| Possibilités | Description |
|---|---|
| Afficher l'étiquette | Activer/désactiver l'étiquette. |
| Position | Défaut: Haut Sélectionnez la position de l'étiquette. où vous voulez le voir. en haut ou à gauche de l’entrée. |
| Étiquette d'entrée | Tapez le texte de l'étiquette. |
| Affichage des options | Option d'affichage de la liste Opt-In Horizontalement ou Verticalement |
| Position du texte des options | Afficher la liste d'inscription Option Position du texte : Avant Case à cocher ou Après Case à cocher |
| Texte de l'option de case à cocher | Donnez un bref aperçu des options qui seront présentées à l'utilisateur. Par exemple: "Abonnez-vous à notre newsletter“ |
| Texte d'aide | Tapez le texte à afficher sous le widget. Ciblez et envoyez facilement des messages aux bonnes personnes grâce au texte d'aide |
| Requis | Défaut: Non Activez cette option pour la rendre obligatoire. Les utilisateurs ne peuvent pas soumettre les formulaires sans remplir les champs obligatoires. |
| Logique conditionnelle | Afficher/Masquer ce champ en fonction de certains critères. |
Consentement RGPD #
Activez les plaintes RGPD (Règlement général sur la protection des données) dans votre formulaire avant de collecter les données utilisateur, car cela explique comment vous utilisez habituellement les données utilisateur pour vous protéger des actions de la loi.
Contenu #
- 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.
Vérifier out our Démo en direct ici
Avec lien texte #
Vérifier out our Démo en direct ici
Changer #
Contrôlez facilement l'entrée de la case à cocher Oui/Non ou On/Off, tout comme un interrupteur d'éclairage.
Contenu #
- 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 Démo en direct ici
Texte d'option personnalisé #
Check out our Démo en direct ici
reCAPTCHA #
Vous permet d'intégrer Google reCAPTCHA pour protéger votre site contre le spam indésirable et le trafic abusif.
Check out our Démo en direct ici
| Possibilités | Description |
|---|---|
| reCAPTCHA configurer | Activez reCAPTCHA à partir des paramètres. Ensuite, vous devez configurer le site reCAPTCHA et la clé secrète depuis MetForm -> Paramètres d'ici. Voir Documentation. |
reCAPTCHA simple #
Protège votre site des robots indésirables et du spam.
Check out our Démo en direct ici
Options en ligne #
Check out our Démo en direct ici
| Possibilités | Description |
|---|---|
| Afficher l'étiquette | Activer/désactiver l'étiquette. |
| Position | Défaut: Haut Sélectionnez la position de l'étiquette. où vous voulez le voir. en haut ou à gauche de l’entrée. |
| Entrée CAPTCHA Affichage | Saisissez votre reCAPTCHA dans un bloc ou affichez le champ de saisie sur une ligne. |
| Étiquette | Tapez le texte de l'étiquette. |
| Texte d'aide | Tapez le texte à afficher sous le widget. |
Curseur de plage #
Définissez la valeur de votre plage maximale ou minimale sur votre formulaire à l'aide du curseur de plage super cool. Tout ce que vous avez à faire est simplement de faire glisser les deux extrémités jusqu'à ce que la valeur appropriée vienne.
Check out our Démo en direct ici
Valeur par défaut #
Vérifier out our Démo en direct ici
Entrée multi-gamme #
Vérifier out our Démo en direct ici
| Possibilités | Description |
|---|---|
| Afficher l'étiquette | Activer/désactiver l'étiquette. |
| Position | Défaut: Haut Sélectionnez la position de l'étiquette. où vous voulez le voir. en haut ou à gauche de l’entrée. |
| Étiquette | Tapez le texte de l'étiquette. |
| Nom | Le nom est obligatoire. Saisissez un nom sans espace ni caractère spécial. utilisez uniquement le trait de soulignement/trait d'union (_/-) pour plusieurs mots. Le nom doit être différent. |
| Texte d'aide | Tapez le texte à afficher sous le widget. |
| Requis | Défaut: Non Activez cette option pour la rendre obligatoire. Les utilisateurs ne peuvent pas soumettre les formulaires sans remplir les champs obligatoires. |
| Longueur minimale | Définir la valeur de plage minimale |
| Longueur maximale | Définir la valeur de plage maximale |
| Valeur par défaut | Définissez votre valeur par défaut, utilisez la virgule pour définir la valeur de la plage |
| Pas | Ajoutez une valeur d'étapes pour ajouter une plage étape après étape |
| Entrée sous forme de plage | Activez ces options pour configurer la plage requise ou non |
| Logique conditionnelle | Afficher/Masquer ce champ en fonction de certains critères. |
URL #
Ajoutez simplement une URL à votre formulaire en utilisant notre champ de saisie d'URL. Il garantit que les utilisateurs saisissent une URL valide dans le champ du formulaire.
Contenu #
- Show Label, Position, Label, Name: Standard label controls.
- Placeholder (Text): Sample URL hint.
- Texte d'aide: Extra instructions.
- Required (Toggle): Must enter a valid URL.
Validation #
URL Validation: Ensures submission is a valid link.
Check out our Démo en direct ici
Mot de passe #
Si vous souhaitez que votre utilisateur donne un mot de passe fort, utilisez notre champ de saisie du mot de passe. Il garantit que les utilisateurs obtiennent un mot de passe protégé et peuvent le modifier en cas de besoin.
Contenu #
- Show Label, Position, Label, Name: Standard label controls.
- Espace réservé : Password hint text.
- Texte d'aide: Instruction text below field.
- Required (Toggle): Must enter password.
Validation #
Validation Type (Dropdown): Enforce strength via characters/words/regex.
Check out our Démo en direct ici
Message de réponse #
Contenu #
- Add Success Message (Textarea): Text shown after successful submission.
Check out our Démo en direct ici :
Notation #
Collectez les évaluations des clients avec Notation champ de saisie, recherchez le champ de saisie par son nom, puis faites glisser et déposez le champ de saisie à l'emplacement souhaité. Aide à obtenir l'avis des clients et à établir un bon lien entre le propriétaire et le client.
Contenu #
- Number of Rating Stars (Number Input): Custom number of stars to display.
- Show Label (Toggle), Position (Dropdown), Label, Name: Standard.
- Texte d'aide: Rating instruction beneath stars.
- Required (Toggle): Must choose a rating.
Check out our Démo en direct ici :
N'importe quel nombre d'étoiles #
Check out our Démo en direct ici
Téléchargement de fichiers #
Metform facilite grandement l'ajout Téléchargement de fichiers widget à vos formulaires, recherchez le champ de saisie par son nom, puis faites glisser et déposez le champ de saisie à l'emplacement souhaité.
Contenu #
- Multiple Upload (Toggle): Allow uploading more than one file.
- Show Label (Toggle), Position (Dropdown), Label, Name: Label settings.
- Texte d'aide: 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 Démo en direct ici
Résumé #
Fournissez un résumé avant la souscription pour établir une bonne communication avec votre client.
Contenu #
- Required (Toggle): Must review before submit.
- Show Label (Toggle), Position (Dropdown), Label, Name: Standard.
- Texte d'aide: Explanation under summary.
Logique conditionnelle #
- 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.
Bouton de soumission #
Soumettez votre formulaire avec ce champ et stockez les données dans le back-end.
Contenu #
- 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.
Paramètres #
Hidden (Toggle): Hidden input not visible but stored for backend.
Logique conditionnelle #
- 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.
