Grav - Formulir

Anda dapat membuat formulir menggunakan formplugin tersedia di tautan ini . Cari plugin formulir dan instal di folder Grav Anda.

Anda juga dapat menginstal plugin ini menggunakan perintah $ bin/gpm install Form. Arahkan ke folder root Grav Anda dan ketik perintah ini. Ini akan secara otomatis mengunduh plugin formulir dan menginstal dependensi yang diperlukan.

Membuat Formulir Sederhana

Anda dapat membuat formulir sederhana yang dapat ditentukan di halaman depan YAML. Berikut ini adalah contoh formulir -

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

Kode di atas menunjukkan halaman formulir sederhana dengan kolom nama, email, pesan dan Captcha. Ketika Anda mengirimkan informasi setelah mengisi formulir, formulir akan diproses dengan menambahkanprocess ke frontmatter YAML seperti yang ditunjukkan dalam kode.

Itu process lapangan menggunakan informasi berikut -

  • Itu email opsi menggunakan dua bidang seperti from field tentukan pengirim email dan to bidang tentukan penerima surat.

  • Itu subject penggunaan [feedback][entered mail] pilihan di mana email dikirim ke email yang dimasukkan.

  • Badan email ditentukan di forms/data.html.twig file yang ada di folder tema.

  • Data masukan formulir disimpan di bawah user/datamap. Template ditentukan diforms/data.txt.twig file yang ada di folder tema.

  • Buat subhalaman di bawah thankyou/ sub folder yang akan diarahkan ke halaman itu ketika pengguna mengirimkan formulir.

Anda dapat menggunakan beberapa bidang dengan plugin formulir seperti yang ditunjukkan pada tabel berikut -

Sr.No. Bidang & Deskripsi
1

Captcha

Ini adalah bidang antispam yang digunakan dalam komputasi untuk menentukan apakah pengguna adalah manusia atau bukan.

2

Checkbox

Ini menampilkan kotak centang sederhana.

3

Checkboxes

Ini menampilkan beberapa kotak centang.

4

Date and Datetime

Kedua bidang tersebut masing-masing digunakan untuk menampilkan tanggal dan tanggal bersama dengan waktu.

5

Email

Ini adalah bidang email dengan validasi.

6

Hidden

Ini menentukan bidang tersembunyi.

7

Password

Ini menentukan bidang kata sandi.

8

Radio

Ini menampilkan tombol radio sederhana.

9

Select

Ini menyediakan bidang pilih.

10

Spacer

Ini memungkinkan untuk menambahkan judul, teks atau garis horizontal ke formulir.

11

Text

Ini menampilkan bidang teks sederhana.

12

Textarea

Ini menampilkan bidang area teks sederhana.

13

Display

Ini menampilkan bidang teks atau instruksi, bukan bidang input.

Parameter Bidang

Setiap bidang menerima parameter berikut yang dapat digunakan untuk menyesuaikan tampilan di formulir.

Sr.No. Parameter & Deskripsi
1

label

Ini mendefinisikan bidang label.

2

validate.required

Itu membuat elemen dibutuhkan.

3

validate.pattern

Ini menentukan pola validasi.

4

validate.message

Ini menampilkan pesan ketika validasi gagal.

5

type

Ini mendefinisikan jenis bidang.

6

default

Ini mendefinisikan jenis bidang default.

7

size

Ini menampilkan ukuran bidang seperti besar, x-kecil, sedang, panjang, kecil.

8

name

Ini mendefinisikan nama field.

9

classes

Ini menggunakan string dengan kelas css.

10

id

Ini mendefinisikan id bidang.

11

style

Ini menentukan gaya bidang.

12

title

Ini mendefinisikan judul bidang.

13

disabled

Ini menentukan apakah bidang dalam status nonaktif atau tidak.

14

placeholder

Ini adalah petunjuk singkat yang ditampilkan di kolom input sebelum pengguna memasukkan nilai.

15

autofocus

Ini menentukan bahwa elemen input harus secara otomatis mendapatkan fokus saat halaman dimuat.

16

novalidate

Ini menentukan bahwa data formulir tidak boleh divalidasi saat dikirim.

17

readonly

Ini menentukan bidang sebagai status hanya baca.

18

autocomplete

Ini menampilkan opsi di lapangan ketika pengguna mulai mengetik di lapangan dan menampilkan nilai berdasarkan nilai yang diketik sebelumnya.

Beberapa bidang berisi parameter khusus seperti -

Sr.No. Parameter & Deskripsi
1

date and datetime

Bidang ini digunakan validate.min dan validate.max untuk mengatur nilai minimum dan maksimum.

2

spacer

Itu menggunakan underline menambahkan <hr> tag, menambahkan nilai teks menggunakan text dan penggunaan title sebagai tag <h3>.

3

select

Itu menggunakan multiple parameter untuk menambahkan beberapa nilai.

4

select and checkboxes

Itu menggunakan options bidang untuk mengatur opsi yang tersedia.

5

display

Itu menggunakan contentparameter untuk menampilkan konten. Ini mengaturmarkdown dengan benar untuk menampilkan konten.

6

captcha

Itu menggunakan recatpcha_site_key dan recaptcha_not_validated parameter.

Catatan tentang Captcha

Kami memiliki kode pada informasi captcha di bawah bidang yang disebut g-recaptcha-response seperti yang ditunjukkan di bawah ini -

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

ReCaptcha digunakan untuk melindungi situs Anda dari spam dan penyalahgunaan. Ini menggunakanrecatpcha_site_keyopsi dan menampilkan widget di situs Anda. Untuk menggunakan reCaptcha, cukup lihat dokumen reCaptcha . Jika reCaptcha salah, maka itu akan menampilkan pesan menggunakanrecaptcha_not_validated pilihan.

Tindakan Formulir

Surel

Anda dapat mengirim email dengan opsi khusus di bawah process bidang seperti yang ditunjukkan di bawah ini -

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

Ini menggunakan opsi email yang mencakup dua bidang; itufrom kolom menentukan pengirim alamat email dan tokolom menentukan penerima alamat email dengan menggunakan konfigurasi plugin Email. Bidang email juga menggunakansubject opsi di mana email dikirim ke email yang dimasukkan dengan subjek [Kontak oleh] [nama dimasukkan] dan badan email ditentukan di forms/data.html.twig file tema.

Mengalihkan ke Halaman Lain

Anda dapat mengarahkan ke halaman lain dengan menggunakan message dan display opsi yang ditentukan di bawah process bidang.

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

Itu messageopsi menetapkan pesan yang harus ditampilkan ketika pengguna mengklik tombol kirim. Ketika pengguna mengirimkan formulir, itu harus dialihkan ke halaman lain. Buat satu subhalaman di bawahthankyou subfolder di mana Anda form.mdfile disimpan. Setelah mengirimkan formulir, itu akan diarahkan ke halaman dan menampilkan pesan di atas.

Subhalaman tersebut memanggil thankyou/formdata.md akan memiliki konten berikut.

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

## Your email has been sent!

Saat Anda mengirimkan formulir, plugin akan mengirim email ke pengguna dan data disimpan di bawah data/folder.

Menyimpan

Ini digunakan untuk menyimpan data ke file yang disimpan di bawah user/data map.

Misalnya -

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

Data tersebut akan disimpan dalam format teks dengan ekstensi txt. Tubuh diambil daritemplates/forms/data.html.twig file tema.

Layar berikut menunjukkan bentuk sederhana -