Contact Form 7 File Upload Field Tutorial 📗 | Contact Form 7 Tutorials Part 10 -Still works in 2023
Tutorial updated for 2017/2018: • FIXED Contact Form 7 File Upload Not ...
Contact Form 7 File Upload Field Tutorial 📗 | WP Learning Lab
The Contact Form 7 file upload feature is a great addition that a lot webmasters will find useful. There is one trick to setting it up that many people get wrong, this tutorial will cover it all.
Uploading files via the Contact Form 7 plugin is very useful for any companies that have clients send them design files (web designers, sign printers, architecture firms and so on). It can also be useful for real estate surveyors and even government agencies that ask for non-sensitive documents to be uploaded.
So it has a lot of potential uses and it's really easy to set up.
This tutorial assumes you have to have a functional Contact Form 7 to add this functionality to. If you don't yet, check out this tutorial to build your first contact form using Contact Form 7: • Creating A Contact Form Using Contact...
Adding The Upload Feature
Click the spot in your form where you want the upload feature to be available. The click on the "File" button in the Contact Form 7 editor feature list above the editor box.
This open the file upload dialogue box where you fill in information about your upload.
1. You can choose to make the upload required.
2. You can set the name of the field to any string of characters you wish. I recommend you give it a descriptive name, not the default that CF7 will create for you.
3. You can (and should) set the file size limit. More on this in a minute.
4. You can (and should) set the file types. More on this in a minute too.
5. You can set an ID and class for that upload input which is option. You would do this if you want to custom style to input more easily using CSS.
Now that you know all the things you can set, let's talk about two tricks you need to be aware of.
Setting File Size Limit (in bytes)
It is smart to set a file size limit to protect your server resources and to make sure that the email with the file attachment is sent. Too large of a file will mean that the email won't make into your inbox.
The trick here is that you need to set the file size in bytes. These days we're used to file sizes in the megabyte and gigabyte range, few people still talk about bytes. So you need a converter.
Simple go to Google and search for "bytes to megabytes converter". The one I use in the video is this one: http://www.whatsabyte.com/P1/byteconv...
Then enter the max file size you want into the megabyte field. I don't recommend you go over 10 megabytes because many email servers won't allow attachments larger than that.
If you need your clients to send you files larger than 10 megabytes then you'll need to look into something like Dropbox, WeTransfer or Google Drive to send and receive those files.
After you've entered the megabyte size into the converter click the double arrow button below the field. That will show the equivalent values in bytes, kilobytes, gigabytes and terabytes.
Copy the value from the byte field and paste that into the File Size Limit box in the Contact Form 7 file upload dialogue box.
Setting Acceptable File Types
The next important field is choosing allowed file types. This is important so that people who want to do you harm can't send executable files or hacks through the upload feature. Although, this may be rare, it does happen and protecting yourself is relatively easy.
In the acceptable file types field enter the file types you accept separated by a "pipe" character. Here's an example for accepting various image file types:
jpg | jpeg | gif | png
The values you want to enter are the extensions of the files. So if you want to accept Microsoft Word files you would use
doc | docx
If you want to accept Excel files you would choose
xls | xlsx | csv
You get the idea.
Once you've set your file upload options click on Insert Tag and then save your form.
Now, the most important step. Test the file upload feature with file types you've added and the file size limit you've set.
Make sure to check that you always receive the emails that are being generated by the form.
I hope this information helps you! If you have any questions leave a comment below or ping me @WPLearningLab on Twitter.
--------------
If you want more excellent WordPress information check out our website where we post WordPress tutorials daily.
https://wplearninglab.com/
Connect with us:
WP Learning Lab Channel: http://www.youtube.com/subscription_c...
Facebook: / wplearninglab
Twitter: / wplearninglab
Google Plus: http://google.com/+Wplearninglab
Pinterest: / wplearninglab
Watch video Contact Form 7 File Upload Field Tutorial 📗 | Contact Form 7 Tutorials Part 10 -Still works in 2023 online without registration, duration hours minute second in high quality. This video was added by user WordPress Tutorials - WPLearningLab 30 January 2017, don't forget to share it with your friends and acquaintances, it has been viewed on our site 113,060 once and liked it 800 people.