File Uploads for Forms
Overview
By default, members can only upload one file when filling out their Additional Details form to be displayed on their profile page.
The File Uploads for Forms add-on extends this functionality to any and all forms on the website. Adding the file upload field to any form will allow users to upload supported file types to the website with their form submission.
The File Upload field is a tool for members to upload files; How to Use and or Modify the File Upload Field.
This is a field most commonly found in the Listing - Additional Details - Member form. However with this add-on it is available to all other forms on the site.
The files supported by the member upload tool are:
- Image Files - gif, jpeg, jpg, png, svg, webp
- PDFs
- .txt files
- .rft files
- Word Documents
- Excel Documents
- Powerpoint Documents
How To Get This Add-On
- Websites with the VIP Add-Ons Club automatically have this add-on available: Join The VIP Add-Ons Club
- Purchase Individually: File Uploads For Forms
Adding Upload Fields
Inside the Form Manager select the form that will allow members or users to add additional files. The process is the same for all forms.
In this example the Feature - Events form is being used:
Click on "Add Field+", this will create a blank field.
- For the "Type of Field" drop-down select: File Upload Field
- Add a Label Name and a System Variable (the form will automatically fill in the variable, however, it is possible to add in a custom one).
- (ONLY REQUIRED WHEN INCLUDING MULTIPLE FILE UPLOAD FIELDS IN THE SAME FORM)
Next, click on the "Gear Icon" and add the following:
Additional Field CSS Class: filestyle_uploadcv
Outer Element ID: This field needs to be unique on each cv field, so please do not add "upload_field", because this is the ID of the default field. Since a unique ID needs to be added, adding a number after the default field will work as well.
Example: upload_field_events
Once the form is saved the field will show in the Form Preview.
The Display Settings are also very helpful when enabled, each setting has a specific function.
- Input View - allows the person to fill out the form.
- Display View - displays the field/input on the front-end of the site.
- Lead Preview - shows in the Lead Preview emails.
- Include In - includes the field in emails associated with the form.
- Table View - shows up in the admin when viewing the information in tables.
In-depth information about these fields is found within this article: In-Depth Look into Form Fields and their Settings.
Member Dashboard Forms
These are the forms that appear in the member dashboard. These include forms like the Post Types, Verify Listing, Contact Details, Additional Details and About forms.
The example below uses the Feature - Events form, the field was added below the "Cost to Attend" field:
Once the file has been uploaded the member will have the option to view the file and remove the file. These are two new text labels:
- View File
System Variable: view_my_file
- Remove File
System Variable: remove_my_file
Viewing the File
The widget, Post Meta Details v2.0, needs to be part of the sidebar in order to see the file; How To Display Custom Post Fields In The Post Details Page.
The button to "View File" is available in the sidebar for anyone viewing the post.
Admin Forms
These are the forms that appear on the front end of the site. These include forms like the Contact Us, Get Matched, Newsletter and the Signup forms.
The example below uses the Bootstrap Get Matched form, the field was added below the "Phone Number" field:
When this form is submitted the file will be visible within the admin dashboard, specifically where the form lands.
For leads that is the Member Leads folder:
If it's the Contact Us form, it will appear in the Forms Inbox. It is visible by clicking on "View Full Inquiry":
This link will open the image file in a separate tab for the admin forms:
Deleting Files
This is the method for the website owner to permanently delete the file from the system.
Member Forms:
Look for the "Remove File" button:
Admin Forms:
Look for the red, Delete File, text:
