Forms

Salah satu cara untuk mengumpulkan data pengunjung website adalah dengan form. Dengan form, anda bisa meminta pengunjung untuk mengisi data yang diperlukan seperti nama, email, dan lain lain. Elementor sudah menyediakan widget untuk membuat form, sehingga anda bisa berfokus dengan isi form tanpa perlu memikirkan pembuatannya.

Gambar diatas merupakan tampilan awal widget form Elementor.

Elementor menyediakan banyak pengaturan untuk widget Form sehingga anda bisa mengatur isi form dengan detail. Mari kita bahas apa saja pengaturan untuk widget ini.

Content

Form Fields

1. Form Name: Nama form anda
2. Form List: List dari isi form anda

Isi pengaturan masing-masing form:

• Type: Tentukan tipe form anda
• Label: Beri label atau nama untuk kolom form
• Placeholder: Beri petunjuk untuk isi kolom
• Required: Tentukan apakah kolom wajib diisi atau tidak
• Column Width: Tentukan lebar kolom

1. Input Size: Tentukan ukuran input isi jawaban form
2. Label: Tentukan untuk menampilkan label kolom form atau tidak
3. Required Mark: Tampilkan atau sembunyikan simbol pemberitahuan kolom wajib diisi

Button

Button

1. Size: Tentukan ukuran button
2. Column Width: Atur lebar button
3. Alignment: Tentukan posisi button

Step Buttons

1. Next: Isi teks untuk button yang mengarahkan ke langkah selanjutnya
2. Previous: Isi teks untuk button yang mengarahkan ke langkah sebelumnya

Submit Button

1. Submit: Beri teks pada button yang berfungsi untuk mengirim jawaban form
2. Icon: Tambahkan icon pada button
3. Button ID: Beri ID untuk submit button anda

Actions After Submit

Setelah form Elementor dikirimkan, anda bisa melakukan satu tindakan atau lebih, dan setiap tindakan tersebut memerlukan pengaturan. Beberapa tindakan umum meliputi:

• Mengirimkan hasil form ke satu email atau lebih
• Memberikan ucapan “Terima Kasih” pada pengunjung karena telah mengisi form
• Tambahkan informasi pengunjung ke manajemen hubungan pelanggan
• Kirim data form ke channel Slack atau Discord
• Buka atau tutup sebuah Popup

Untuk informasi lebih lanjut bisa dilihat disini

Email

1. To: Masukkan alamat email penerima form
2. Subject: Masukkan teks yang akan tampil pada subjek email
3. Message: Disini anda bisa menggunakan shortcodes untuk menampilkan pesan yang dikirim dari form. Secara default, opsi “all-fields” akan digunakan. Pelajari cara membuat custom messages untuk form dari tutorial ini.
4. From Email: Masukkan alamat email pengirim atau gunakan “noreply@”
5. From Name: Masukkan nama, jabatan, atau perusahaan yang ingin anda tampilkan pada email
6. Reply To: Masukkan alamat email pengirim atau gunakan “noreply@”
7. Cc: Masukkan alamat email penerima untuk Cc’d (carbon copy)
8. Bcc: Masukkan alamat email penerima untuk Bcc’d (blind carbon copy)
9. Meta Data: Disini anda bisa menambahkan atau menghapus metadata yang ditampilkan pada bagian bawah form. Secara default, semua opsi akan ditampilkan
10. Send As: Pilih untuk mengirimkan form sebagai HTML atau teks biasa

Steps Settings

Anda bisa membagi form menjadi beberapa langkah. Apabila pada form anda terdapat banyak kolom untuk diisi, anda bisa menggunakan fitur ini untuk membagi form menjadi beberapa bagian untuk meringkas ruang. Untuk membagi form menjadi beberapa bagian, anda perlu untuk mengatur tipe form menjadi “step”.

Pada pengaturan Steps Settings anda bisa mengatur tipe pembagian form serta bentuk dari informasi halaman bagian form.

Additional Options

1. Form ID: Atur ID untuk form
2. Form Validation: Tentukan metode validasi, apakah menggunakan browser default atau custom
3. Custom Messages: Tampilkan atau sembunyikan pesan setelah selesai mengirim form. Apabila diaktifkan anda bisa membuat isi pesan atau biarkan isi pesan terisi secara default.

Style

Form

1. Form: Tentukan jarak antar kolom form
2. Label: Atur spasi, warna teks, dan tipografi label
3. HTML Field: Tentukan spasi, warna dan tipografi HTML Field pada form (jika ada)

Field

1. Text Color: Tentukan warna teks dalam kolom form
2. Typography: Atur tipografi kolom form
3. Background Color: Pilih warna background kolom form
4. Border Color: Tentukan warna border kolom form
5. Border Width: Atur ukuran border kolom form
6. Border Radius: Atur ukuran sudut border kolom form

Buttons

1. Typography: Atur tipografi button
2. Border Type: Tentukan tipe border button
3. Normal: Atur tampilan saat mode normal
4. Hover: Atur tampilan saat button di hover
5. Border Radius: Tentukan ukuran sudut button
6. Text Padding: Atur ukuran padding teks button

Next & Submit Button

1. Background Color: Pilih warna background untuk button next dan submit
2. Text Color: Tentukan warna teks button next dan submit

Previous Button

1. Background Color: Pilih warna background untuk button previous
2. Text Color: Tentukan warna teks button previous

Messages

1. Typography: Tentukan tipografi teks pada pesan form
2. Success Message Color: Pilih warna pesan ketika form berhasil dikirim
3. Error Message Color: Pilih warna pesan ketika form gagal dikirim
4. Inline Message Color: Pilih warna untuk pesan dalam kolom form

Steps

1. Typography: Atur tipografi form dengan tipe step
2. Spacing: Atur jarak halaman form dengan isi form
3. Padding: Tentukan ukuran padding halaman form
4. Inactive: Pengaturan tampilan ketika halaman form tidak sedang dibuka
5. Active Tampilan ketika halaman form sedang dibuka
6. Completed: Tampilan ketika halaman form selesai diisi
7. Primary Color: Pilih warna primer steps form
8. Secondary Color: Pilih warna sekunder steps form
9. Divider Width: Tentukan lebar pemisah antar halaman steps form
10. Divider Gap: Tentukan jarak pemisah halaman dan keterangan halaman steps form