Grav - Formulários

Você pode criar um formulário usando o formplugin disponível neste link . Procure o plugin de formulário e instale-o na pasta Grav.

Você também pode instalar este plugin usando o comando $ bin/gpm install Form. Navegue até a pasta raiz do Grav e digite este comando. Ele irá baixar automaticamente o plugin do formulário e instalar as dependências necessárias.

Criação de um formulário simples

Você pode criar um formulário simples que pode ser definido no frontmatter da página YAML. A seguir está um exemplo de um formulário -

---
title: Contact Form

form:
   name: contact

   fields:
      - name: name
         label: Name
         placeholder: Enter your name
         autofocus: on
         autocomplete: on
         type: text
         validate:
            required: true

      - name: email
         label: Email
         placeholder: Enter your email address
         type: email
         validate:
            required: true

      - name: message
         label: Message
         placeholder: Enter your message
         type: textarea
         validate:
            required: true

      - name: g-recaptcha-response
         label: Captcha
         type: captcha
         recatpcha_site_key: 6LelOg4TAAAAALAt1CjjjVMxFLKY8rrnednYVbr8
         recaptcha_not_validated: 'Captcha not valid!'
         validate:
            required: true

   buttons:
      - type: submit
         value: Submit
      - type: reset
         value: Reset

   process:
      - email:
         subject: "[Site Contact Form] {{ form.value.name|e }}"
         body: "{% include 'forms/data.html.twig' %}"
      - save:
         fileprefix: contact-
         dateformat: Ymd-His-u
         extension: txt
         body: "{% include 'forms/data.txt.twig' %}"
      - message: Thank you for getting in touch!
      - display: thankyou
---

O código acima mostra uma página de formulário simples com campos de nome, e-mail, mensagem e Captcha. Quando você enviar as informações após preencher o formulário, o formulário será processado adicionandoprocess campo para o frontmatter YAML conforme mostrado no código.

o process campo usa as seguintes informações -

  • o email opção usa dois campos, como from campo especifica o remetente do e-mail e to campo especifica o destinatário do e-mail.

  • o subject usa [feedback][entered mail] opção em que o e-mail é enviado para o e-mail inserido.

  • O corpo do e-mail é especificado no forms/data.html.twig arquivo que está presente na pasta do tema.

  • Os dados de entrada do formulário são armazenados no user/datapasta. O modelo é definido noforms/data.txt.twig arquivo que está presente na pasta do tema.

  • Crie uma subpágina sob o thankyou/ subpasta que será redirecionada para aquela página quando um usuário enviar o formulário.

Você pode usar alguns campos com o plugin de formulário, conforme mostrado na tabela a seguir -

Sr. Não. Campo e Descrição
1

Captcha

É um campo antispam usado na computação para determinar se o usuário é humano ou não.
2

Checkbox

Ele exibe uma caixa de seleção simples.
3

Checkboxes

Ele exibe várias caixas de seleção.
4

Date and Datetime

Ambos os campos são usados ​​para exibir data e data junto com a hora, respectivamente.
5

Email

É um campo de email com validação.
6

Hidden

Ele especifica o campo oculto.
7

Password

Ele especifica o campo de senha.
8

Radio

Ele exibe os botões de opção simples.
9

Select

Ele fornece campo de seleção.
10

Spacer

Permite adicionar título, texto ou linha horizontal ao formulário.
11

Text

Ele exibe um campo de texto simples.
12

Textarea

Ele exibe um campo de área de texto simples.
13

Display

Ele exibe o campo de texto ou instrução, não o campo de entrada.

Parâmetro de Campos

Cada campo aceita os seguintes parâmetros, que podem ser usados ​​para personalizar a aparência do formulário.

Sr. Não. Parâmetro e Descrição
1

label

Ele define o campo do rótulo.
2

validate.required

Isso torna o elemento obrigatório.
3

validate.pattern

Ele especifica o padrão de validação.
4

validate.message

Ele exibe a mensagem quando a validação falha.
5

type

Ele define o tipo de campo.
6

default

Ele define o tipo de campo padrão.
7

size

Ele exibe o tamanho do campo como grande, x-pequeno, médio, longo, pequeno.
8

name

Ele define o nome do campo.
9

classes

Ele usa string com classes css.
10

id

Ele define o id do campo.
11

style

Ele especifica o estilo do campo.
12

title

Ele define o título do campo.
13

disabled

Ele determina se o campo está ou não desabilitado.
14

placeholder

É uma pequena dica que é exibida no campo de entrada antes que o usuário insira um valor.
15

autofocus

Ele especifica que um elemento de entrada deve obter foco automaticamente quando a página é carregada.
16

novalidate

Ele especifica que os dados do formulário não devem ser validados quando enviados.
17

readonly

Ele determina o campo como estado somente leitura.
18

autocomplete

Ele exibe as opções no campo quando o usuário começa a digitar no campo e exibe os valores com base nos valores digitados anteriormente.

Alguns dos campos contêm parâmetros específicos, como -

Sr. Não. Parâmetro e Descrição
1

date and datetime

Esses campos usam validate.min e validate.max para definir os valores mínimo e máximo.
2

spacer

Usa underline adicionar <hr> tag, adiciona valores de texto usando text e usa title como tag <h3>.
3

select

Usa multiple parâmetro para adicionar vários valores.
4

select and checkboxes

Usa options campo para definir as opções disponíveis.
5

display

Usa contentparâmetro para exibir o conteúdo. Ele define omarkdown para verdadeiro para mostrar o conteúdo.
6

captcha

Usa recatpcha_site_key e recaptcha_not_validated parâmetros.

Nota sobre Captcha

Temos um código nas informações de captcha no campo chamado g-recaptcha-response como mostrado abaixo -

- name: g-recaptcha-response
   label: Captcha
   type: captcha
   recatpcha_site_key: 6LelOg4TAAAAALAt1CjjjVMxFLKY8rrnednYVbr8
   recaptcha_not_validated: 'Captcha not valid!'
   validate:
		required: true

O reCaptcha é usado para proteger seu site contra spam e abusos. Usa orecatpcha_site_keyopção e exibe o widget em seu site. Para usar o reCaptcha, basta consultar a documentação do reCaptcha . Se o reCaptcha estiver incorreto, ele exibirá uma mensagem usando orecaptcha_not_validated opção.

Ações de formulário

O email

Você pode enviar um e-mail com opções específicas no process campo como mostrado abaixo -

- email:
	from: "{{ config.plugins.email.from }}"
	to: "{{ config.plugins.email.to }}"
	subject: "Contact by {{ form.value.name|e }}"
	body: "{% include 'forms/data.html.twig' %}"

Ele usa a opção de email que inclui dois campos; afrom campo especifica o remetente do endereço de e-mail e o tocampo especifica o destinatário do endereço de e-mail usando a configuração do plug-in de e-mail. O campo de e-mail também usasubject opção em que um e-mail é enviado para o e-mail inserido com o assunto [Contato por] [nome inserido] e o corpo do e-mail é definido no forms/data.html.twig arquivo do tema.

Redirecionando para outra página

Você pode redirecionar para outra página usando message e display opções definidas sob o process campo.

process:
   - message: Thank you for getting in touch!
   - display: thankyou

o messageopção define uma mensagem que deve ser exibida quando um usuário clica no botão enviar. Quando um usuário envia o formulário, ele deve ser redirecionado para outra página. Crie uma subpágina sob othankyou subpasta onde seu form.mdarquivo é armazenado. Após o envio do formulário, ele será redirecionado para a página e exibirá a mensagem acima.

A subpágina chamada thankyou/formdata.md terá o seguinte conteúdo.

---
title: Email sent
cache_enable: false
process:
   twig: true
---

## Your email has been sent!

Quando você enviar o formulário, o plug-in enviará um e-mail ao usuário e os dados serão salvos no data/folder.

Salve 

É usado para salvar os dados em um arquivo que é salvo no user/data pasta.

Por exemplo -

process:
   - save:
      fileprefix: contact-
      dateformat: Ymd-His-u
      extension: txt
      body: "{% include 'forms/data.txt.twig' %}"

Os dados serão armazenados em formato de texto com extensão txt. O corpo é tirado dotemplates/forms/data.html.twig arquivo do tema.

A tela a seguir mostra um formulário simples -