Grav - Formas

Puede crear un formulario utilizando el formcomplemento disponible en este enlace . Busque el complemento de formulario e instálelo en su carpeta Grav.

También puede instalar este complemento usando el comando $ bin/gpm install Form. Navegue a su carpeta raíz de Grav y escriba este comando. Descargará automáticamente el complemento de formulario e instalará las dependencias necesarias.

Crear una forma simple

Puede crear un formulario simple que se puede definir en la página principal de YAML. El siguiente es un ejemplo de un formulario:

---
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
---

El código anterior muestra una página de formulario simple con los campos de nombre, correo electrónico, mensaje y Captcha. Cuando envíe la información después de completar el formulario, el formulario se procesará agregandoprocess campo al frontmatter YAML como se muestra en el código.

los process El campo utiliza la siguiente información:

los email La opción utiliza dos campos como from campo especifique el remitente del correo electrónico y to campo especificar el destinatario del correo.
los subject usos [feedback][entered mail] opción en la que se envía el correo electrónico al correo electrónico ingresado.
El cuerpo del correo electrónico se especifica en el forms/data.html.twig archivo que está presente en la carpeta del tema.
Los datos de entrada del formulario se almacenan bajo el user/datacarpeta. La plantilla se define en elforms/data.txt.twig archivo que está presente en la carpeta del tema.
Cree una subpágina debajo del thankyou/ subcarpeta que será redirigida a esa página cuando un usuario envíe el formulario.

Puede usar algunos campos con el complemento de formulario como se muestra en la siguiente tabla:

No Señor.	Campo Descripción
1	Captcha Es un campo antispam que se utiliza en informática para determinar si el usuario es humano o no.
2	Checkbox Muestra una casilla de verificación simple.
3	Checkboxes Muestra múltiples casillas de verificación.
4	Date and Datetime Ambos campos se utilizan para mostrar la fecha y la fecha junto con la hora, respectivamente.
5	Email Es un campo de correo electrónico con validación.
6	Hidden Especifica el campo oculto.
7	Password Especifica el campo de contraseña.
8	Radio Muestra los botones de radio simples.
9	Select Proporciona un campo de selección.
10	Spacer Permite agregar título, texto o línea horizontal al formulario.
11	Text Muestra un campo de texto simple.
12	Textarea Muestra un campo de área de texto simple.
13	Display Muestra el campo de texto o instrucciones, no el campo de entrada.

Parámetro de campos

Cada campo acepta los siguientes parámetros que se pueden utilizar para personalizar la apariencia en el formulario.

No Señor.	Descripción de parámetros
1	label Define el campo de la etiqueta.
2	validate.required Hace el elemento requerido.
3	validate.pattern Especifica el patrón de validación.
4	validate.message Muestra el mensaje cuando falla la validación.
5	type Define el tipo de campo.
6	default Define el tipo de campo predeterminado.
7	size Muestra el tamaño del campo como grande, x-pequeño, mediano, largo, pequeño.
8	name Define el nombre del campo.
9	classes Utiliza cadenas con clases css.
10	id Define la identificación del campo.
11	style Especifica el estilo del campo.
12	title Define el título del campo.
13	disabled Determina si el campo está deshabilitado o no.
14	placeholder Es una pequeña pista que se muestra en el campo de entrada antes de que el usuario ingrese un valor.
15	autofocus Especifica que un elemento de entrada debe recibir el foco automáticamente cuando se carga la página.
dieciséis	novalidate Especifica que los datos del formulario no deben validarse cuando se envían.
17	readonly Determina el campo como estado de solo lectura.
18	autocomplete Muestra las opciones en el campo cuando el usuario comienza a escribir en el campo y muestra los valores basados en valores escritos anteriormente.

Algunos de los campos contienen parámetros específicos como:

No Señor.	Descripción de parámetros
1	date and datetime Estos campos utilizan validate.min y validate.max para establecer valores mínimos y máximos.
2	spacer Usa underline para agregar <hr> etiqueta, agrega valores de texto usando text y usos title como etiqueta <h3>.
3	select Usa multiple parámetro para agregar varios valores.
4	select and checkboxes Usa options campo para configurar las opciones disponibles.
5	display Usa contentparámetro para mostrar el contenido. Establece elmarkdown a verdadero para mostrar el contenido.
6	captcha Usa recatpcha_site_key y recaptcha_not_validated parámetros.

Nota sobre Captcha

Tenemos un código en la información del captcha en el campo llamado g-recaptcha-response como se muestra a continuación -

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

El reCaptcha se utiliza para proteger su sitio web del spam y el abuso. Usa elrecatpcha_site_keyopción y muestra el widget en su sitio. Para usar reCaptcha, simplemente consulte los documentos de reCaptcha . Si reCaptcha es incorrecto, entonces mostrará un mensaje usando elrecaptcha_not_validated opción.

Acciones de formulario

Email

Puede enviar un correo electrónico con opciones específicas en el process campo como se muestra a continuación -

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

Utiliza la opción de correo electrónico que incluye dos campos; lafrom campo especifica el remitente de la dirección de correo electrónico y el toEl campo especifica el destinatario de la dirección de correo electrónico mediante la configuración del complemento de correo electrónico. El campo de correo electrónico también usasubject opción en la que se envía un correo electrónico al correo electrónico ingresado con el asunto [Contacto por] [nombre ingresado] y el cuerpo del correo electrónico se define en el forms/data.html.twig archivo del tema.

Redirigir a otra página

Puede redirigir a otra página utilizando message y display opciones definidas bajo el process campo.

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

los messageLa opción establece un mensaje que debe mostrarse cuando un usuario hace clic en el botón Enviar. Cuando un usuario envía el formulario, debe ser redirigido a otra página. Cree una subpágina debajo delthankyou subcarpeta donde su form.mdel archivo está almacenado. Después de enviar el formulario, será redirigido a la página y mostrará el mensaje anterior.

La subpágina llamada thankyou/formdata.md tendrá el siguiente contenido.

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

## Your email has been sent!

Cuando envíe el formulario, el complemento enviará un correo electrónico al usuario y los datos se guardarán en el data/folder.

Salvar

Se utiliza para guardar los datos en un archivo que se guarda en el user/data carpeta.

Por ejemplo

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

Los datos se almacenarán en formato de texto con extensión txt. El cuerpo es tomado de latemplates/forms/data.html.twig archivo del tema.

La siguiente pantalla muestra un formulario simple:

↰ Previous page Next page ↱