Sometimes you may need to allow users who contact you to send images from a contact form.
It can be useful in many cases, for example if you offer a support service and you need to see a screenshot of the user’s computer, or a photo of the product having problems.
Sure, it is possible to send attached files via simple email, but the benefits of a contact form on your website are remarkable. The fact that they are much easier to use than an email will help you to increase the requests.
Standard contact forms generally do not include the ability to upload of images and files. In this article I will explain what to do to add a field to upload an image through your forms.
Send images with the best contact forms
There are tons of plugins to create contact forms, and in this guide I will explain how to allow the upload of images through the best tools for creating forms.
If you use other tools for your forms, please let us know in the comments and we will help you integrate this functionality into your website as well.
Gravity Forms
The Gravity Forms plugin is a very comprehensive contact form plugin. In fact, it allows you to include logical conditions, order and registration forms, questionnaires and, of course, also to upload files.
To create a form that allows the upload of an image, create a form and add a field from the Advanced fields section. Select the File Upload field and add it to your form.
You can now set this field so that only images can be uploaded. Go to General fields settings and enter the extension of the allowed files, for example: .jpg, .png, .gif, .ico.
If necessary, you can also set a maximum size for the uploaded file, in order to prevent the user from sending you excessively large files.
Forminator
Forminator is a free plugin for creating contact forms, payment forms (thanks to integration with Stripe and PayPal), feedback and interactive surveys.
For add the “Upload image” field in your form created with Forminator, click on Insert fields and select File Upload . Then go to the field settings by clicking on Settings .
In the Allowed filetypes section, select Specific filetypes and leave only the formats you intend to use active.
You can simply click All to activate or deactivate all file formats for the image , document, audio and video categories.
WPForms
WPForms is also a tool that allows you to create very feature-rich forms.
For add the field to upload an image, you can create a form starting from the File upload template , which includes name and surname, email, telephone, the field to upload the file and finally a space for any messages.
In the options of the File Upload field , you will find the entry Allowed file extensions , where you can enter the extensions of the files that the user will be able to upload. It also sets the maximum file size.
If you want to allow multiple files to be loaded at the same time, go to Advanced options> Style and select Modern from the list. This will bring up the Max file number field in the field settings.
Still from the advanced settings, you can choose whether the images should be uploaded to the media library or to another folder you set up.
It is interesting to know that in the notifications you will be able to see the direct link to the file that is uploaded by the user.
Drag and Drop Multiple File Upload – Contact Form 7
If Contact Form 7 is your favorite tool for creating contact forms, you can use this extension and allow uploading images from your CF7 form:
- Install the plugin and activate it,
- Go to your form created with Contact Form 7. You will find the Multiple file upload element in the list of fields that you can insert in the form,
- Choose if the field should be made mandatory, then give it a name,
- Now add the maximum size of the file to upload. Be careful, you have to express the size in bytes , so rely on a megabyte to byte converter to enter the correct number,
- In the Acceptable file types field you will have to enter the format of the files separated by the vertical line, such as: jpeg | png | jpg | gif,
- Finally add the minimum and maximum number of files that can be uploaded,
- If you want the files to be attached to the notification email, go to the Mail tab of your form and add the shortcode with the name of your upload field in the File attachments section ,
- If you prefer a link to the uploaded files in your message, add the shortcode to the body of the message. In this case, however, you will have to go to Contact> Drag & Drop Upload and activate the Send attachment as links box .
Ninja forms
Let’s see now how to allow sending images through a form built with Ninja Forms .
Add the Upload files field in your Ninja Forms form, then in the field settings choose whether the files should be uploaded to the server, to your Dropbox folder or to Amazon S3, and whether to save them in the media library. You will still be able to view all submitted files by going to Forms> Submissions .
You can also automatically rename submitted images, so you can distinguish them from others in your library.
Then set the maximum number of files that can be sent, the maximum file size and finally enter the extensions allowed by separating them with a comma.
Conclusion
You now have 5 methods to allow your users to send you an image through a WordPress contact form .
