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.
- Botão de envio: Finalizes and submits the form.
Nós temos ambos Livre e Campo de entrada profissional for you. Here we’ll discuss the free input field, let’s start.
Campo de entrada livre #
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.
Texto #
Add Text field to input Name or any type of text.
Contente #
- 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.
Configurações #
- 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.
- Por comprimento de caractere: Enforce minimum/maximum characters.
- Por comprimento de palavra: Enforce min/max number of words.
- Por expressão baseada: Custom regex pattern for validation.
- Required Message (Text Input): Custom message when required rule fails.
Lógica Condicional #
- 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 Demonstração ao vivo aqui.
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.
Contente #
- 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.
Configurações #
- 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 Demonstração ao vivo aqui
Número #
Esses campos de entrada garantirão que os usuários insiram um número válido com entrada numérica.
Contente #
- 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.
Configurações #
- 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 Demonstração ao vivo aqui
Telefone #
Permita que os usuários forneçam seu número de telefone válido para fazer conexões.
Contente #
- 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 Demonstração ao vivo aqui
Tempo #
Ajuda os usuários a escolher seu horário preferido no cronômetro pop-down.
Contente #
- 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 Demonstração ao vivo aqui.
Formato 24H #
Check out our Demonstração ao vivo aqui
Data #
Use este campo de entrada para selecionar a data no calendário pop-down do seu formulário para torná-lo mais amigável.
Contente #
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.
Configurações #
- 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 Demonstração ao vivo aqui
Entrada de intervalo de datas #
Check out our Demonstração ao vivo aqui
Selecione data com entrada de hora #
Check out our Demonstração ao vivo aqui
| Opções | Descrição |
|---|---|
| Mostrar etiqueta | Ativar/desativar etiqueta. |
| Posição | Padrão: Principal Selecione a posição do rótulo. onde você quer ver. parte superior ou esquerda da entrada. |
| Rótulo | Digite o texto do rótulo. |
| Nome | O nome é obrigatório. Insira um nome sem espaço ou qualquer caractere especial. use apenas sublinhado/hífen (_/-) para várias palavras. O nome deve ser diferente. |
| Suporte de lugar | Use o espaço reservado para mostrar algum texto fictício e ajudar o usuário a colocar o texto correto. |
| Texto de ajuda | Digite o texto a ser exibido abaixo do widget. |
| Obrigatório | Padrão: Não Alterne esta opção para torná-la obrigatória. Os usuários não podem enviar os formulários sem preencher os campos obrigatórios. |
| Definir data mínima ou máxima | Forneça data mínima e máxima |
| Data de desativação | Insira sua data de fechamento ou data de desativação |
| Entrada de data de intervalo | Ativar intervalo de entrada de data Ativar ou desativar a entrada de data do intervalo, entrada de data em data ou ano ou mês. Formato de data: selecione Formato de data no menu suspenso. Por exemplo: DD-MM-AAAA |
| Hora de entrada | Você pode adicionar hora com a data. |
| Lógica Condicional | Mostrar/ocultar este campo com base em determinados critérios. |
Selecione #
Adicione uma lista suspensa de opções para os usuários escolherem, pesquise o widget pelo nome e arraste e solte o widget no local desejado.
Contente #
- 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 Demonstração ao vivo aqui
Opção de pesquisa como rótulo #
Check out our Demonstração ao vivo aqui
Seleção múltipla #
Selecione Vários itens no menu suspenso de cada vez.
(Same as Select, but allows selecting multiple options from the list.)
Multiple Selection (Toggle): Allow multiple items to be chosen.
Check out our Demonstração ao vivo aqui
Valores padrão selecionados #
Check out our Demonstração ao vivo aqui
Área de texto #
Ajuda a adicionar um grande número de conteúdo, revisar e comentar ao seu formulário.
(Much like Text, but supports multiple lines.)
Contente #
- Rows (Number Input): Controls visible height of textarea.
- Show Label, Position, Label, Name, Help Text, Required: Same as text.
Check out our Demonstração ao vivo aqui
Caixa de seleção #
Permita que os usuários selecionem vários itens em seu formulário ao mesmo tempo com Checkbox.
Contente #
- 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.
Mostrar #
Layout (Dropdown: Vertical / Inline): Arrange options layout.
Check out our Demonstração ao vivo aqui
Vertical #
Check out our Demonstração ao vivo aqui
Posição do ícone após o texto #
Check out our Demonstração ao vivo aqui
Rádio #
Permitir que os usuários selecionem apenas um item exclusivo entre as diversas opções.
Contente #
- 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 Demonstração ao vivo aqui
Vertical #
Check out our Demonstração ao vivo aqui
Posição do ícone após o texto #
Check out our Demonstração ao vivo aqui
Primeiro Nome (Listagem) #
Allow users to give their First Name to show them in a listing method on the mailing list. For Example : Mailchimp
Contente #
- Validation Type (Dropdown): Min/max or expression validation for names.
- Show Label (Toggle), Position (Dropdown), Label: As standard.
- Placeholder (Text Input): Name hint.
- Texto de ajuda: Additional instructions.
- Required (Toggle): Must fill.
Sobrenome (Listagem) #
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.
Lista de aceitação #
Use o campo opt-in em seu formulário e torne seu usuário um usuário inscrito do mailchimp para entrar em contato clicando na caixa de seleção “Assinar nossa newsletter”.
Check out our Demonstração ao vivo aqui
| Opções | Descrição |
|---|---|
| Mostrar etiqueta | Ativar/desativar etiqueta. |
| Posição | Padrão: Principal Selecione a posição do rótulo. onde você quer ver. parte superior ou esquerda da entrada. |
| Etiqueta de entrada | Digite o texto do rótulo. |
| Exibição de opções | Exibir opção de listagem de aceitação Horizontalmente ou Verticalmente |
| Opções Posição do Texto | Exibir listagem de aceitação Posição do texto da opção: Antes Caixa de seleção ou Depois Caixa de seleção |
| Texto da opção da caixa de seleção | Dê um breve resumo das opções que serão mostradas ao usuário. Por exemplo: "Assine a nossa newsletter“ |
| Texto de ajuda | Digite o texto a ser exibido abaixo do widget. Direcione e entregue mensagens facilmente às pessoas certas com texto de ajuda |
| Obrigatório | Padrão: Não Alterne esta opção para torná-la obrigatória. Os usuários não podem enviar os formulários sem preencher os campos obrigatórios. |
| Lógica Condicional | Mostrar/ocultar este campo com base em determinados critérios. |
Consentimento do GDPR #
Ative reclamações do GDPR (Regulamento Geral de Proteção de Dados) em seu formulário antes de coletar dados do usuário, pois ele explica como você normalmente usa os dados do usuário para se proteger de ações legais.
Contente #
- 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.
Verificar out our Demonstração ao vivo aqui
Com link de texto #
Verificar out our Demonstração ao vivo aqui
Trocar #
Controle facilmente a entrada da caixa de seleção Sim/Não ou Liga/Desliga, como um interruptor de luz.
Contente #
- 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 Demonstração ao vivo aqui
Texto de opção personalizada #
Check out our Demonstração ao vivo aqui
reCAPTCHA #
Permitem que você integre o Google reCAPTCHA para manter seu site protegido contra spam indesejado e tráfego abusivo.
Check out our Demonstração ao vivo aqui
| Opções | Descrição |
|---|---|
| configuração reCAPTCHA | Ative o reCAPTCHA na configuração. Então você deve configurar o site reCAPTCHA e a chave secreta em MetForm -> Configurações daqui. Consulte a documentação. |
ReCAPTCHA simples #
Protege seu site contra bots indesejados e spam.
Check out our Demonstração ao vivo aqui
Opções embutidas #
Check out our Demonstração ao vivo aqui
| Opções | Descrição |
|---|---|
| Mostrar etiqueta | Ativar/desativar etiqueta. |
| Posição | Padrão: Principal Selecione a posição do rótulo. onde você quer ver. parte superior ou esquerda da entrada. |
| Exibição de entrada CAPTCHA | Insira seu reCAPTCHA em um bloco ou mostre o campo de entrada em uma linha. |
| Rótulo | Digite o texto do rótulo. |
| Texto de ajuda | Digite o texto a ser exibido abaixo do widget. |
Controle deslizante de intervalo #
Defina o valor do intervalo máximo ou mínimo para o seu formulário usando o controle deslizante de intervalo super legal. Tudo o que você precisa fazer é arrastar ambas as extremidades até que o valor apropriado chegue.
Check out our Demonstração ao vivo aqui
Valor padrão #
Verificar out our Demonstração ao vivo aqui
Entrada multifaixa #
Verificar out our Demonstração ao vivo aqui
| Opções | Descrição |
|---|---|
| Mostrar etiqueta | Ativar/desativar etiqueta. |
| Posição | Padrão: Principal Selecione a posição do rótulo. onde você quer ver. parte superior ou esquerda da entrada. |
| Rótulo | Digite o texto do rótulo. |
| Nome | O nome é obrigatório. Insira um nome sem espaço ou qualquer caractere especial. use apenas sublinhado/hífen (_/-) para várias palavras. O nome deve ser diferente. |
| Texto de ajuda | Digite o texto a ser exibido abaixo do widget. |
| Obrigatório | Padrão: Não Alterne esta opção para torná-la obrigatória. Os usuários não podem enviar os formulários sem preencher os campos obrigatórios. |
| Comprimento mínimo | Defina o valor do intervalo mínimo |
| Comprimento máximo | Defina o valor do intervalo máximo |
| Valor padrão | Defina seu valor padrão, use vírgula para definir o valor do intervalo |
| Passos | Adicione o valor das etapas para adicionar intervalo a passo após passo |
| Insira como intervalo | Alterne esta opção para configurar o intervalo necessário ou não |
| Lógica Condicional | Mostrar/ocultar este campo com base em determinados critérios. |
URL #
Basta adicionar URL ao seu formulário usando nosso campo de entrada de URL. Ele garante que os usuários insiram um URL válido no campo do formulário.
Contente #
- Show Label, Position, Label, Name: Standard label controls.
- Placeholder (Text): Sample URL hint.
- Texto de ajuda: Extra instructions.
- Required (Toggle): Must enter a valid URL.
Validation #
URL Validation: Ensures submission is a valid link.
Check out our Demonstração ao vivo aqui
Senha #
Se você deseja que seu usuário forneça uma senha forte, use nosso campo de entrada de senha. Ele garante que os usuários obtenham uma senha protegida e possam alterá-la quando necessário.
Contente #
- Show Label, Position, Label, Name: Standard label controls.
- Espaço reservado: Password hint text.
- Texto de ajuda: Instruction text below field.
- Required (Toggle): Must enter password.
Validation #
Validation Type (Dropdown): Enforce strength via characters/words/regex.
Check out our Demonstração ao vivo aqui
Mensagem de resposta #
Contente #
- Add Success Message (Textarea): Text shown after successful submission.
Check out our Demonstração ao vivo aqui:
Avaliação #
Colete avaliações de clientes com Avaliação campo de entrada, pesquise o campo de entrada pelo nome e arraste e solte o campo de entrada no local desejado. Ajuda a obter avaliações do cliente e a construir um bom vínculo entre proprietário e cliente.
Contente #
- Number of Rating Stars (Number Input): Custom number of stars to display.
- Show Label (Toggle), Position (Dropdown), Label, Name: Standard.
- Texto de ajuda: Rating instruction beneath stars.
- Required (Toggle): Must choose a rating.
Check out our Demonstração ao vivo aqui:
Qualquer número de estrelas #
Check out our Demonstração ao vivo aqui
Upload de arquivo #
Metform torna muito fácil adicionar Upload de arquivo widget em seus formulários, pesquise o campo de entrada pelo nome e arraste e solte o campo de entrada no local desejado.
Contente #
- Multiple Upload (Toggle): Allow uploading more than one file.
- Show Label (Toggle), Position (Dropdown), Label, Name: Label settings.
- Texto de ajuda: 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 Demonstração ao vivo aqui
Resumo #
Forneça um resumo antes da assinatura para construir uma boa comunicação com seu cliente.
Contente #
- Required (Toggle): Must review before submit.
- Show Label (Toggle), Position (Dropdown), Label, Name: Standard.
- Texto de ajuda: Explanation under summary.
Lógica Condicional #
- 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.
Botão de envio #
Envie seu formulário com este campo e armazene os dados no back-end.
Contente #
- 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.
Configurações #
Hidden (Toggle): Hidden input not visible but stored for backend.
Lógica Condicional #
- 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.
