Adding form fields to your upload page
- Adding fields to your upload page
- How to add a Text field
- How to add a File Upload field
- How to add a long text or text area field
- How to add a URL type field
- How to add a Dropdown field
- How to add a Date field
- How to add an Integer Number field
- How to add a Decimal field
- How to use hidden fields in your page
- How to use custom validation patterns
- How to pre-fill field values
You can make use File Request Pro gather information from the sender using custom fields.
You will probably want to add field to your page to:
- Build a custom on-boarding process
- Collect additional information from your users
- Automatically organize your uploads
You can view the entered information either from your files inbox or in the email notification. Furthermore, when you export your file list, the entered information will be exported as well.
Table of Contents
- Adding fields to your upload page
- How to add a Text field
- How to add a File Upload field
- How to add a long text or text area field
- How to add a URL type field
- How to add a Dropdown field
- How to add a Date field
- How to add an Integer Number field
- How to add a Decimal field
- How to use hidden fields in your page
- How to use custom validation patterns
- How to pre-fill field values
Adding fields to your upload page
Select “Page settings“ from your dashboard.
Under the tab “Form Fields“ you add as many fields as you need.
Which type of fields can I use in my form?
You can use the following type of fields in your upload page.
One of the most significant features of HTML5 form controls is the ability to validate most user data without relying on JavaScript. This is done by using validation attributes and the field type on form elements. We will describe those in detail but each field type would be automatically validated on the most of the current browser.
For example, when I choose an Integer type field, the browser will automatically make sure the entered information is a number and not something else.
You can use these multiple field types to validate the data your users will submit with the files.
Sorting the form fields
Your field can be sort according to your needs. Just click the shown icon and move the folder to the correct position.
Making a field mandatory
When you need to make a field mandatory, all you need to do is click the box next to the field label. That will make that field required and the form submission will not be possible with at least some information in that field.
Using a field value to create a new folder in your Cloud Drive
One way to group field together is to use one form value to create a new folder in your cloud drive and place all uploaded files in it. When you check the box we will use the selected field to create folder and place your files in it.
This feature is just available for Text and Hidden fields.
Save form entries as a text file in your Cloud Drive
All the submitted information will be sent to you in your notification emails, can also be exported or accessible from your dashboard.
If you wish to also save the information as a text field in your cloud drive, then check this box, and we will create a new file with the entered information and upload that file to your Cloud Drive.
For this feature to work you need to choose at least one field to be used as folder name.
How to add a Text field
Text fields are the most basic form widgets. They are a very convenient way to let the user enter any kind of data.
You can limit the type of input by using a custom validation pattern
Advanced Settings
- Placeholder: String that provides a brief hint to the user as to what kind of information is expected in the field. Placeholder is the greyout text that you usually see in web forms.
- Min: Is the minimum number of characters required.
- Max: The maximum number of characters allowed in your field.
- Validation Pattern: Used for custom validations. When specified, is a regular expression that the input's value must match in order for the value to pass constraint validation.
How to add a File Upload field
To request a list of files form your customers you could add one or more "Upload File" fields to your upload page.
Once added to your page, the standar dropzone will be replace by a new dropzone with the label and description you assigned to as shown below.
Advanced Settings
- Description: String that provides a brief hint to the user about what file they need to upload. Description is display below the field label.
- File Type: Which types of files should this field accept. Please refer to: Limit Accepted File Types for more information and examples.
- File Size: The max file size accepted by the field. In Megabytes (MB)
How to add a long text or text area field
The main difference between a text area and a regular single line text field is that users are allowed to include hard line breaks (i.e. pressing return) that will be included when the data is submitted.
Advanced Settings
- Placeholder: String that provides a brief hint to the user as to what kind of information is expected in the field. Placeholder is the greyout text that you usually see in web forms.
How to add a URL type field
A special type of field for entering URLs can be created using the value url for the type attribute.
It adds special validation constraints to the field. The browser will report an error if no protocol (such as http:) is entered, or if the URL is otherwise malformed.
- Placeholder: String that provides a brief hint to the user as to what kind of information is expected in the field. Placeholder is the greyout text that you usually see in web forms.
- Validation Pattern: Used for custom validations. When specified, is a regular expression that the input's value must match in order for the value to pass constraint validation.
How to add a Dropdown or Pick-list fields
Drop-down controls are a simple way to let users select from many options without taking up much space in the user interface. It will present a list where the user can pick only one value.
Dropdown Options
To add options to your dropdown field add one per line in the “Option List”
How to add a Date field
HTML date controls are available to handle this specific kind of data, providing calendar widgets and making the data uniform.
When using a Date field, the user will see a calendar picker to choose a date value. Date format depends on the user localization and language settings.
You should be warned that the date and time widgets don't have the best browser support. At the moment, Firefox, Chrome, Edge, and Opera support them well, but there is no support in Internet Explorer, Safari has some mobile support (but no desktop support)
Advanced Settings.
- Validation Pattern: Used for custom validations. When specified, is a regular expression that the input's value must match in order for the value to pass constraint validation.
How to add an Integer Number field
Controls for entering numbers can be created with this type of field. This control looks like a text field but allows only integer numbers, and usually provides buttons in the form of a spinner to increase and decrease the value of the control.
Advanced Settings
- Placeholder: String that provides a brief hint to the user as to what kind of information is expected in the field. Placeholder is the greyout text that you usually see in web forms.
- Min: Is the minimum value the field accepts as valid
- Max: Is the greatest value the field accepts as valid
How to add a Decimal field
Controls for entering numbers can be created with this type of field. This control looks like a text field but allows only floating-point numbers, and usually provides buttons in the form of a spinner to increase and decrease the value of the control.
Advanced Settings
- Placeholder: String that provides a brief hint to the user as to what kind of information is expected in the field. Placeholder is the greyout text that you usually see in web forms.
- Min: Is the minimum value the field accepts as valid
- Max: Is the greatest value the field accepts as valid
How to use hidden fields in your page
Hidden fields, creates a form control that is invisible to the user, but is still sent to the server along with the rest of the form data once submitted. For example, you might want to submit a timestamp to the server stating when an order was placed.
Because it is hidden, the user can not see nor intentionally edit the value, it will never receive focus, and a screen reader will not notice it either.
Advanced Settings
- Field ID: Use these settings to specify a field identifier you will later use to pass a value to this field.
Passing a value to a hidden field
You can use query string to pass values to both text and hidden fields.
Please check the article Using query strings to pre-fill form values for more information
How to use custom validation patterns
Pattern allows you to set up custom validations. For example, if you need your user to enter a text with a specific format you can use a regular expression to force the user to enter the text correctly.
For more information and example patterns please visit: html5pattern.com
How to pre-fill field values
Please check the article Using query strings to pre-fill form values for more information