fbpx

Cara membuat form upload file di web menggunakan contact form 7

Cara membuat form upload file di web menggunakan contact form 7

Cara membuat form upload file di web menggunakan contact form 7

Hello, Smart Readers.

Tentunya sebuah website tanpa halaman kontak tidaklah efektif. Halaman Kontak adalah tempat dimana pengunjung dan developer berinteraksi. Kini, Anda tidak perlu mengkhawatirkan hal itu,  sebab WordPress memiliki bermacam-macam plugin yang bisa membantu Anda untuk membuat formulir secara praktis. Salah satu plugin pembuat contact form yang banyak digunakan adalah Contact Form 7.

Sekilas Tentang Contact Form 7

Contact Form 7 adalah salah satu  plugin WordPress yang paling terkenal dan banyak digunakan. Selain memiliki banyak fungsi, Contact form 7 juga mudah untuk dikelola. Dengan Contact Form 7, Anda bisa mengkustomisasi form sesuai kebutuhan dan konten emailnya dengan fleksibel. Tak hanya itu, Plugin satu ini juga mendukung adanya CAPTCHA untuk mem-filter spam.

Tapi untuk kali ini, author tidak membahas mengenai cara installasi plugin Contact form 7. Melainkan, author akan memberikan salah satu trik mudah dalam mengoperasikan Contact Form 7.

Karena semudah apapun pengoperasian Contact Form 7, masih saja ada hal yang membuat kita bingung dan bertanya-tanya cara menggunakannya. Sebab, bagi sebagian orang, bukanlah hal yang mudah untuk mengerti cara pengoperasian suatu form dengan cepat. Namun terkadang deadline mengharuskan seseorang bekerja lebih cepat. Karena itu,  kali ini author akan berbagi tips untuk membuat upload file pada Contact Form 7.

Membuat Upload File pada Contact Form 7

Setelah melakukan installasi plugin contact form 7 dan mengaktifkannya, pada bagian kiri layar, klik Contact > Contact Forms > Add New dan akan menampilkan gambar seperti di bawah ini.

Isi form tersebut merupakan default contact form yang sudah disediakan Contact Form 7. Dan pada dasarnya, form ini sudah bisa langsung digunakan dan bisa dimasukkan ke halaman website Anda. Di dalam default terdapat beberapa kolom seperti nama, email, subject dan message.  Namun sering kali kita memiliki kebutuhan lebih dalam sebuah form yang tidak terdapat dalam default yang tersedia.

Seperti halnya ketika kita ingin menambahkan satu kolom upload file pada form. Maka yang harus dilakukan adalah:

Pertama, pada bagian menu bar yang terdapat dalam contact form, pilih menu file. Menu file di sini berfungsi untuk menambahkan kolom upload file pada form.

Kedua, di sinilah tempat mengkustomisasi kolom upload file yang hendak di tambahkan dalam halaman website. Ceklis Field type yang menandakan bahwa kolom upload file tersebut haruslah di isi bagi siapapun yang ingin mengisi form yang telah di buat. Kemudian, ubah nama sesuai dengan keinginan.

Ketiga, Untuk File size limit(bytes) adalah ukuran file yang dapat di tampung dari setiap file yang ter-upload oleh pengunjung website.

Dan dalam contact form 7, ukuran file yang di masukkan haruslah berupa satuan bytes. Karena itu, untuk memudahkan mengetahui berapa bytes ukuran yang ingin di masukkan pada kolom upload file bisa melalui Byte Converter atau dalam kasus ini author menggunakan whatsabyte.com

*Contoh ukuran File Size Limit(Bytes) = 2mb

Keempat, Acceptable file types adalah ekstensi file apa saja yang di izinkan untuk di upload pada form. Dan di dalam Contact Form 7, default ekstensi filenya adalah jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, dan wmv. Jika Anda menginginkan file yang di terima lebih dari satu ekstensi file, maka dapat dipisahkan menggunakan “|”.

Kelima, Untuk Id Attribute dan Class Attribute diperuntukkan untuk memodifikasi css style pada form yang ingin di buat. Pada kedua kolom ini Anda bebas mengkustomisasi css nya.

Keenam, tahap terakhir yang harus di lakukan adalah insert tag. Dimana pengaturan yang telah diatur akan tampil dalam contact form seperti di bawah ini.

Oke, sekarang Anda sudah dapat menambahkan upload file yang di butuhkan untuk formulir kontak website Anda. Tapi perlu diingat, jika Anda menambahkan kolom tambahan baru pada form Anda, mereka tidak secara otomatis muncul di setting email notifikasi. Maka dari itu, Anda perlu mengkustomisasi Mail Anda dengan memilih Mail pada tab yang tersedia.

Leave a Reply

Copyright Themes © 2023