wfu_logo_formfields

After many users’ requests, WordPress File Upload plugin has been extended to allow various field types to be used in order to submit additional user data along with the uploaded files. These field types are:

Furtermore, several options have been added to configure these new field types. A detailed description per field type is contained below.

Simple Text

This is the most simple field type, to add arbitrary single-line text. To manually set the field to this type, add |t:text in the userdatalabel attribute.

formfield-screenshot2

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the text field, as “Your name” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Your name”.To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Your name/Your sirname” will create two text fields, one with label “Your name” and one with label “Your sirname”.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Your name” to be at the right side of the field, then you must set userdatalabel=”Your name|s:right”
Required If activated, then the field will have to be filled before the user uploads a file. A “(required)” word will be appended to the label. If the user tries to upload a file but the field is empty, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Your name” to be required, then you must set userdatalabel=”Your name|r:1″
Do not autocomplete If activated, then browsers will not be allowed to fill this field with auto-complete data. |a:{0 or 1}e.g. if you want the field with label “Your name” not be filled with auto-complete data, then you must set userdatalabel=”Your name|a:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is empty. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Your name|h:top”
Default Set a default value for the field |d:{default value}e.g. if you want the field with label “Your name” to have a default value “nick”, then you must set userdatalabel=”Your name|d:nick”

Multiple Lines Text

This is text field type to add arbitrary multi-line text. To manually set the field to this type, add |t:multitext in the userdatalabel attribute.

formfield-screenshot4

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the text field, as “Your comments” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Your comments”. To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Your name/Your comments|t:multitext” will create two fields, one text field with label “Your name” and one multi-line text with label “Your comments”.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Your name” to be at the right side of the field, then you must set userdatalabel=”Your name|s:right”
Required If activated, then the field will have to be filled before the user uploads a file. A “(required)” word will be appended to the label. If the user tries to upload a file but the field is empty, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Your comments” to be required, then you must set userdatalabel=”Your comments|r:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is empty. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Your comments|h:top”

Number

This is a number field, to add arbitrary integer or floating-point numbers. For floating point numbers, dot (.) symbol is used as decimal separator. To manually set the field to this type, add |t:number in the userdatalabel attribute.

formfield-screenshot5

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the number field, as “Give a value” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Give a value”.To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Your name/Give a value|t:number” will create two fields, one text field with label “Your name” and one number field with label “Give a value”.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Give a value” to be at the right side of the field, then you must set userdatalabel=”Give a value|s:right”
Required If activated, then the field will have to be filled before the user uploads a file. A “(required)” word will be appended to the label. If the user tries to upload a file but the field is empty, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Give a value” to be required, then you must set userdatalabel=”Give a value|r:1″
Do not autocomplete If activated, then browsers will not be allowed to fill this field with auto-complete data. |a:{0 or 1}e.g. if you want the field with label “Give a value” not be filled with auto-complete data, then you must set userdatalabel=”Give a value|a:1″
Validate If activated, then the field value will be checked if it is a valid number before file upload. If it is not a valid number, then a hint will appear next to the field notifying the user. |v:{0 or 1}e.g. if you want the field with label “Give a value” to be validated, then you must set userdatalabel=”Give a value|v:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is empty or not validated. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Give a value|h:top”
Default Set a default value for the field |d:{default value}e.g. if you want the field with label “Give a value” to have the default value “1.0”, then you must set userdatalabel=”Give a value|d:1.0″
Format Set the format of the field. It accepts the following values:

  • d for inserting an integer number
  • f for inserting a floating point number
|f:{d or f}e.g. if you want the field with label “Give a value” to accept a floating point number, then you must set userdatalabel=”Give a value|f:f”

Email

This is an email field, to add an arbitrary email address. To manually set the field to this type, add |t:email in the userdatalabel attribute.

formfield-screenshot6

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the email field, as “Your email” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Your email”.To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Your name/Your email|t:email” will create two fields, one text field with label “Your name” and one email field with label “Your email”.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Your email” to be at the right side of the field, then you must set userdatalabel=”Your email|s:right”
Required If activated, then the field will have to be filled before the user uploads a file. A “(required)” word will be appended to the label. If the user tries to upload a file but the field is empty, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Your email” to be required, then you must set userdatalabel=”Your email|r:1″
Do not autocomplete If activated, then browsers will not be allowed to fill this field with auto-complete data. |a:{0 or 1}e.g. if you want the field with label “Your email” not be filled with auto-complete data, then you must set userdatalabel=”Your email|a:1″
Validate If activated, then the field value will be checked if it is a valid email address before file upload. If it is not a valid email, then a hint will appear next to the field notifying the user. |v:{0 or 1}e.g. if you want the field with label “Your email” to be validated, then you must set userdatalabel=”Your email|v:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is empty or not validated. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Your email|h:top”
Default Set a default email address for the field |d:{default value}e.g. if you want the field with label “Your email” to have the default value “myname@domain.com”, then you must set userdatalabel=”Your email|d:myname@domain.com”
Group ID If a non-empty value is set, then this field will act as a base email address for another email confirmation field having the same group ID. |g:{group id}e.g. if you want the field with label “Your email” to have a group ID value of 1, then you must set userdatalabel=”Your email|g:1″

Confirmation Email

This is an email field, to confirm the email address entered in another Email field having the same Group ID. To manually set the field to this type, add |t:confirmemail in the userdatalabel attribute.

formfield-screenshot7

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the email confirmation field, as “Confirm email” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Confirm email”.To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Your email|t:email|g:1/Confirm email|t:confirmemail|g:1″ will create two fields, one email field with label “Your email” and one email confirmation field with label “Confirm email” grouped together.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Confirm email” to be at the right side of the field, then you must set userdatalabel=”Confirm email|s:right”
Required If activated, then the field will have to be filled before the user uploads a file. A “(required)” word will be appended to the label. If the user tries to upload a file but the field is empty, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Confirm email” to be required, then you must set userdatalabel=”Confirm email|r:1″
Do not autocomplete If activated, then browsers will not be allowed to fill this field with auto-complete data. |a:{0 or 1}e.g. if you want the field with label “Confirm email” not be filled with auto-complete data, then you must set userdatalabel=”Confirm email|a:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is empty or not matching the base email. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Confirm email|h:top”
Group ID Set an non-empty value matching the Group ID of another Email field, so that it can act as a confirmation email. |g:{group id}e.g. if you want the field with label “Confirm email” to have a group ID value of 1, then you must set userdatalabel=”Confirm email|g:1″

Password

This is a single-line password field, to enter a password. The characters typed inside the field will not be shown, but will replaced by bullet characters ( ). To manually set the field to this type, add |t:password in the userdatalabel attribute.

formfield-screenshot8

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the password field, as “Enter password” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Enter password”.To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Your name/Enter password|t:password” will create two fields, one text field with label “Your name” and one password field with label “Enter password”.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Enter password” to be at the right side of the field, then you must set userdatalabel=”Enter password|s:right”
Required If activated, then the field will have to be filled before the user uploads a file. A “(required)” word will be appended to the label. If the user tries to upload a file but the field is empty, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Enter password” to be required, then you must set userdatalabel=”Enter password|r:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is empty. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Enter password|h:top”
Group ID If a non-empty value is set, then this field will act as a base password field for another password confirmation field having the same group ID. |g:{group id}e.g. if you want the field with label “Enter password” to have a group ID value of 1, then you must set userdatalabel=”Enter password|g:1″

Confirmation Password

This is a single-line password field, to confirm another Password field having the same Group ID. The characters typed inside the field will not be shown, but will replaced by bullet characters ( ). To manually set the field to this type, add |t:confirmpassword in the userdatalabel attribute.

formfield-screenshot9

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the password confirmation field, as “Confirm password” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Confirm password”.To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Enter password|t:password|g:1/Confirm password|t:confirmpassword|g:1″ will create two fields, one password field with label “Enter password” and one password confirmation field with label “Confirm password” grouped together.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Confirm password” to be at the right side of the field, then you must set userdatalabel=”Confirm password|s:right”
Required If activated, then the field will have to be filled before the user uploads a file. A “(required)” word will be appended to the label. If the user tries to upload a file but the field is empty, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Confirm password” to be required, then you must set userdatalabel=”Confirm password|r:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is empty or not matching the base password. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Confirm password|h:top”
Group ID Set an non-empty value matching the Group ID of another Password field, so that it can act as a confirmation password. |g:{group id}e.g. if you want the field with label “Confirm password” to have a group ID value of 1, then you must set userdatalabel=”Confirm password|g:1″

Checkbox

This is a checkbox field, to confirm or not confirm a statement. To manually set the field to this type, add |t:checkbox in the userdatalabel attribute.

formfield-screenshot10

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the checkbox field. In the above screenshot example, the label is not shown because its position has been set to “none”, however the label is useful to identify the field when using it as a variable for other shortcode attributes using the Shortcode Composer. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Confirm license”.To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Enter name/Confirm license|t:checkbox|s:none|l:Check the box to accept the license agreement|f:right” will create two fields, one text field with label “Enter name” and one checkbox field with label “Confirm license” (not shown) and description “Check the box to accept the license agreement” positioned at the right side of the check-box.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “none”. |s:{label position}e.g. if you want the label “Confirm license” to be at the right side of the field, then you must set userdatalabel=”Confirm license|s:right”
Required If activated, then the field will have to be checked before the user uploads a file. A “(required)” word will be appended to the label (if the label is visible). If the user tries to upload a file but the field is not checked, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Confirm license” to be required, then you must set userdatalabel=”Confirm license|r:1″
Do not autocomplete If activated, then browsers will not be allowed to fill this field with auto-complete data. |a:{0 or 1}e.g. if you want the field with label “Confirm license” not be filled with auto-complete data, then you must set userdatalabel=”Confirm license|a:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is not checked. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Confirm license|h:top”
Default Set a default value for the field (true for checked, false or nothing for unchecked). |d:{true or false}e.g. if you want the field with label “Confirm license” to be checked by default, then you must set userdatalabel=”Confirm license|d:true”
Description Set a description (statement) that will be shown next to the check-box, to explain what this check-box is for. This can be a long text (e.g. acceptance of a license agreement), such as “Check the box to accept the license agreement” as the above screenshot example. |l:{description}e.g. if you want the field with label “Confirm license” to have a description “Check the box to accept the license agreement”, then you must set userdatalabel=”Confirm license|l:Check the box to accept the license agreement”
Format Set the position of the description in relation to the check-box. Acceptable values are: top, right, bottom, left. |f:{format}e.g. if you want the field with label “Confirm password” and description “Check the box to accept the license agreement” to position the description at the right of check-box, then you must set userdatalabel=”Confirm license|l:Check the box to accept the license agreement|f:right”

Radio Button

This is a radio-button field, to show a list of selections as radio buttons. To manually set the field to this type, add |t:radiobutton in the userdatalabel attribute.

formfield-screenshot11

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the radio-button field, as “Select color” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Select color”. To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Enter name/Select color|t:radiobutton|l:red,green,blue,black” will create two fields, one text field with label “Enter name” and one radio-button field with label “Select color” and a list of radio buttons with labels red, green, blue, black as the above screenshot example.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Select color” to be at the right side of the field, then you must set userdatalabel=”Select color|s:right”
Required If activated, then a radio button will have to be selected before the user uploads a file. A “(required)” word will be appended to the label (if the label is visible). If the user tries to upload a file but no selection has been made, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Select color” to be required, then you must set userdatalabel=”Select color|r:1″
Do not autocomplete If activated, then browsers will not be allowed to fill this field with auto-complete data. |a:{0 or 1}e.g. if you want the field with label “Select color” not be filled with auto-complete data, then you must set userdatalabel=”Select color|a:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that no selection has been made. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Select color|h:top”
Default Set a default value for the field (that matches a value in the list of radio button items) or nothing. |d:{default value}e.g. if you want the radio button “green” of the field with label “Select color” to be pre-selected, then you must set userdatalabel=”Select color|d:green”
Items Sets a comma-separated list of radio buttons that will be shown. |l:{items list}e.g. if you want the field with label “Select color” to have radio buttons with values “red”, “green”, “blue” and “black”, then you must set userdatalabel=”Select color|l:red,green,blue,black”
Group ID If a non-empty value is set, then it will be grouped with other radio-button fields having the same Group ID. Grouped radio buttons can have only one radio button selected at a time. |g:{group id}e.g. if you want the field with label “Select color” to have a group ID value of 1, then you must set userdatalabel=”Select color|g:1″
Format Set the position of the radio-button values in relation to the radio buttons. Acceptable values are: top, right, bottom, left.In addition, set the placement of the radio buttons. Acceptable values are horizontal and vertical. |f:{format}e.g. if you want the radio values of the field with label “Select color” to be at the right side of the radio buttons and the radio buttons to be placed one below the other, then you must set userdatalabel=”Select color|f:right-vertical”

Date

This is a date field, to set a date using a date selection box. Click on the field to show the date selection box in a calendar format, as shown below. To manually set the field to this type, add |t:date in the userdatalabel attribute.

formfield-screenshot12

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the date field, as “Select date” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Select date”. To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Enter name/Select date|t:date” will create two fields, one text field with label “Enter name” and one date field with label “Select date”.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Select date” to be at the right side of the field, then you must set userdatalabel=”Select date|s:right”
Required If activated, then a date will have to be selected before the user uploads a file. A “(required)” word will be appended to the label (if the label is visible). If the user tries to upload a file but no selection has been made, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Select date” to be required, then you must set userdatalabel=”Select date|r:1″
Do not autocomplete If activated, then browsers will not be allowed to fill this field with auto-complete data. |a:{0 or 1}e.g. if you want the field with label “Select date” not be filled with auto-complete data, then you must set userdatalabel=”Select date|a:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is empty. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Select date|h:top”
Default Set a default date for the field. Note that the date must have the format of the date field. The default value must be enclosed in parenthesis. |d:(default date)e.g. if you want the field with label “Select date” to have a default date of “2015-09-16”, then you must set userdatalabel=”Select date|d:(2015-09-16)”
Format Set the date format. The format must be enclosed in parenthesis. The default format is “(yy-mm-dd)”. Available options are:

  • d – day of month (no leading zero)
  • dd – day of month (two digit)
  • o – day of the year (no leading zeros)
  • oo – day of the year (three digit)
  • D – day name short
  • DD – day name long
  • m – month of year (no leading zero)
  • mm – month of year (two digit)
  • M – month name short
  • MM – month name long
  • y – year (two digit)
  • yy – year (four digit)
  • @ – Unix timestamp (ms since 01/01/1970)
  • ! – Windows ticks (100ns since 01/01/0001)
  • ‘…’ – literal text
  • – single quote
|f:(format)e.g. if you want the format of the field with label “Select date” to be “dd/mm/yy”, then you must set userdatalabel=”Select date|f:(dd/mm/yy)”

Time

This is a time field, to set a time using a time selection box. Click on the field to show the time selection box in a slider format, as shown below. To manually set the field to this type, add |t:time in the userdatalabel attribute.

formfield-screenshot13

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the time field, as “Select time” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Select time”. To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Enter name/Select time|t:time” will create two fields, one text field with label “Enter name” and one time field with label “Select time”.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Select time” to be at the right side of the field, then you must set userdatalabel=”Select time|s:right”
Required If activated, then a time will have to be selected before the user uploads a file. A “(required)” word will be appended to the label (if the label is visible). If the user tries to upload a file but no selection has been made, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Select time” to be required, then you must set userdatalabel=”Select time|r:1″
Do not autocomplete If activated, then browsers will not be allowed to fill this field with auto-complete data. |a:{0 or 1}e.g. if you want the field with label “Select time” not be filled with auto-complete data, then you must set userdatalabel=”Select time|a:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is empty. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Select time|h:top”
Default Set a default time for the field. Note that the time must have the format of the time field. The default value must be enclosed in parenthesis. |d:(default time)e.g. if you want the field with label “Select time” to have a default time of “08:00”, then you must set userdatalabel=”Select time|d:(08:00)”
Format Set the time format. The format must be enclosed in parenthesis. The default format is “(HH:mm)”. Available options are:

  • H – Hour with no leading 0 (24 hour)
  • HH – Hour with leading 0 (24 hour)
  • h – Hour with no leading 0 (12 hour)
  • hh – Hour with leading 0 (12 hour)
  • m – Minute with no leading 0
  • mm – Minute with leading 0
  • s – Second with no leading 0
  • ss – Second with leading 0
  • l – Milliseconds always with leading 0
  • c – Microseconds always with leading 0
  • t – a or p for AM/PM
  • T – A or P for AM/PM
  • tt – am or pm for AM/PM
  • TT – AM or PM for AM/PM
  • z – Timezone as defined by timezoneList
  • Z – Timezone in Iso 8601 format (+04:45)
|f:(format)e.g. if you want the format of the field with label “Select time” to be “hh:mm.ss”, then you must set userdatalabel=”Select time|f:time(hh:mm.ss)”

DateTime

This is a date/time field, to set a date & time using a date/time selection box. Click on the field to show the date/time selection box in a calendar/slider format, as shown below. To manually set the field to this type, add |t:datetime in the userdatalabel attribute.

formfield-screenshot14

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the date/time field, as “Select date-time” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Select date-time”. To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Enter name/Select date-time|t:datetime” will create two fields, one text field with label “Enter name” and one date/time field with label “Select date-time”.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Select date-time” to be at the right side of the field, then you must set userdatalabel=”Select date-time|s:right”
Required If activated, then a date/time will have to be selected before the user uploads a file. A “(required)” word will be appended to the label (if the label is visible). If the user tries to upload a file but no selection has been made, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Select date-time” to be required, then you must set userdatalabel=”Select date-time|r:1″
Do not autocomplete If activated, then browsers will not be allowed to fill this field with auto-complete data. |a:{0 or 1}e.g. if you want the field with label “Select date-time” not be filled with auto-complete data, then you must set userdatalabel=”Select date-time|a:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is empty. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Select date-time|h:top”
Default Set a default date and time for the field. Note that the date and time must have the format of the date/time field. The default value must be enclosed in parenthesis. |d:(default date)e.g. if you want the field with label “Select date-time” to have a default date/time of “2015-08-23 08:00”, then you must set userdatalabel=”Select date-time|d:(2015-08-23 08:00)”
Format Set the date/time format. The format is of the form date(date format) time (time format). For more information about how to format the date and time, check the format option of the aforementioned Date and Time fields. |f:date(date format) time(time format)e.g. if you want the format of the field with label “Select date-time” to be “dd/mm/yy hh:mm.ss”, then you must set userdatalabel=”Select date-time|f:date(dd/mm/yy) time(hh:mm.ss)”

Listbox

This is a listbox field, to select from a list of values. To manually set the field to this type, add |t:listbox in the userdatalabel attribute.

formfield-screenshot15

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the listbox field, as “Select profession” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Select profession”. To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Enter name/Select profession|t:listbox” will create two fields, one text field with label “Enter name” and one listbox field with label “Select profession”.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Select profession” to be at the right side of the field, then you must set userdatalabel=”Select profession|s:right”
Required If activated, then a value will have to be selected before the user uploads a file. A “(required)” word will be appended to the label (if the label is visible). If the user tries to upload a file but no selection has been made, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Select profession” to be required, then you must set userdatalabel=”Select profession|r:1″
Do not autocomplete If activated, then browsers will not be allowed to fill this field with auto-complete data. |a:{0 or 1}e.g. if you want the field with label “Select profession” not be filled with auto-complete data, then you must set userdatalabel=”Select profession|a:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is empty. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Select profession|h:top”
Default Set a default value for the field (that matches a value in the list of items) or nothing. |d:{default value}e.g. if you want the field with label “Select profession” to have a default of “Doctor”, then you must set userdatalabel=”Select profession|d:Doctor”
List Items
Set a comma-separated list of item to be shown in the listbox. |l:{list of items}e.g. if you want the listbox with label “Select profession” to have the items “Engineer”, “Developer” and “Other”, then you must set userdatalabel=”Select profession|l:Engineer,Developer,Other”

Dropdown

This is a dropdown field, to select from a list of dropdown values. To manually set the field to this type, add |t:dropdown in the userdatalabel attribute.

formfield-screenshot16

The following options are supported:

Shortcode Composer Option Description Shortcode Syntax
Label This is the label of the dropdown field, as “Select Destination” in the above example. This is the first element of userdatalabel attribute, just make sure that the label does not contain any slash (/) or pipe (|) characters, because these are used as separators, e.g. userdatalabel=”Select Destination”. To define additional fields, separate them with a slash (/), e.g. userdatalabel=”Enter name/Select Destination|t:dropdown” will create two fields, one text field with label “Enter name” and one dropdown field with label “Select Destination”.
Label Position Select the position of the label, in relation to the field. Available values are: none, top, right, bottom, left. If “none” is selected, then the label will not be shown. Default value is “left”. |s:{label position}e.g. if you want the label “Select Destination” to be at the right side of the field, then you must set userdatalabel=”Select Destination|s:right”
Required If activated, then a value will have to be selected before the user uploads a file. A “(required)” word will be appended to the label (if the label is visible). If the user tries to upload a file but no selection has been made, then upload will fail and a hint will appear next to the field notifying the user. |r:{0 or 1}e.g. if you want the field with label “Select Destination” to be required, then you must set userdatalabel=”Select Destination|r:1″
Do not autocomplete If activated, then browsers will not be allowed to fill this field with auto-complete data. |a:{0 or 1}e.g. if you want the field with label “Select Destination” not be filled with auto-complete data, then you must set userdatalabel=”Select Destination|a:1″
Hint Position Select the position of the hint that is shown next to the field to prompt the user that it is empty. Available values are: none, inline, top, right, bottom, left. |h:{hint position}e.g. if you want the hint to be shown at the top of the field, then you must set userdatalabel=”Select Destination|h:top”
Default Set a default value for the field (that matches a value in the list of items) or nothing. |d:{default value}e.g. if you want the field with label “Select Destination” to have a default of “London”, then you must set userdatalabel=”Select Destination|d:London”
List Items
Set a comma-separated list of item to be shown in the dropdown list. |l:{list of items}e.g. if you want the dropdown list with label “Select Destination” to have the items “New York”, “London” and “Tokio”, then you must set userdatalabel=”Select Destination|l:New York,London,Tokio”
The New Form Fields of WordPress File Upload Plugin

34 thoughts on “The New Form Fields of WordPress File Upload Plugin

  • Can you give me some advice on how to configure the size / font of the prompting text and size (height/width) of the submissions field? It isn’t showing up in same format as the rest of my page.

    I’m super new to web pages, so it might be something very basic. Thanks in advance!

    1. Hi, the plugin has some basic styling options for changing width and height (it is the Dimensions tab in visual editor). However, for more advanced styling (fonts, colors etc.) you need CSS. I can help you with that if you tell me what you want to do and send me the URL of the page.

      Regards

      Nickolas

  • Is there a way to configure a hidden input field? I have some data that I would like to submit with the file that should not be seen by the user…

      1. I know how to script, yeah, but I don’t know how this specific task is done. I want to add this hidden input field to be sent along with the file. Can I then access its content server side in the “wfu_after_upload” hook? How is it done?

        1. Actually it is not wfu_after_upload filter that you need to use, but wfu_before_file_check. This filter allows to change associated file data before they are submitted. So, here is what you need to do:

          1. Add a text user field in the upload form. You can make it hidden by using css like this: input#userdata_1_field_0 { display: none; } . Put this css in Custom CSS tab of the shortcode.
          2. Inside wfu_before_file_check hook add the following line: $changable_data["user_data"][0]["value"] = "new value"; . Change “new value” with any value you want the field to have.

          Nickolas

  • I can’t figure out how to change the length of the text box. I am not sure if I’m labeling the field wrong on entering in the px in the wrong field under Dimensions. Also is there a way for the recipient to have the users name added to the notification email as well. And can the user receive a confirmation email too? Please help!

    1. Hi, regarding the text box, if you want to set a length of e.g. 100 pixels, the value should be 100px in Dimensions.

      If this doesn’t work, it can be done with css. I can help you, just tell me the URL of the page.

      You can add the user’s name in the notification email by adding %username% variable inside the message body. The user can receive the notification email too if you add %useremail% inside the recipients.

      Regards

      Nickolas

  • Hi Nickolas, I am trying File Upload for the first time and can’t seem to understand why when I add a new “additional data field” using a simple text field – after publishing I am unable to type in that field. When the cursor is placed into the text field it appears as you would expect it to – blinking and in wait – but once I begin typing, the cursor size becomes very small and appears as there is something like small dots that can be seen while I type…maybe it is in fact text but is so small that it can’t be seen… what the heck?

    Thank you
    Terry

  • Hello Sir,
    I would like to add the “Password” field but cannot see where to set what the password should actually be!
    Without defining an actual password, I can type anything into the field and the file uploads correctly.
    Hope you can help.
    Kind regards,
    Tony

    1. Hi, this is an additional user field that will prompt the user to put a password like when creating an account. It is not intended to work as a password for allowing or not the upload. However, what you ask can be done with a simple hook. Are you using the Free or Pro version (instructions change)?

      Regards

      Nickolas

  • Hi, is there a way to add standard text in between “additional fields”? I need to group the fields and put a short explanation text right in front of them..thanks in advance

    1. Hi, yes it can be done with css. For instance, if you want to add standard text right after the first field, you need to add the following css code:

      div#userdata_1_0:after {
      content: 'here is additional text';
      display: block;
      }

      Regards

      Nickolas

  • 4 questions:
    – How do I move the user data fields to above the file upload fields?
    – How do I change `(required)` text to `*` or another language text?
    – How do I change the `File %filename% is being uploaded` message? Setting waitmessage value in shortcode doesn’t seem to be working, though other things such as successmessage seem to work.
    – How do I add watermark/placeholder text to simple text field?

    1. Hi, here are answers:

      1. Open the shortcode composer and go to Placements tab, where you can change the relative positioning of the plugin’s elements.
      2. In the shortcode composer, in Labels tab there is an option for this.
      3. This message will not show up during upload, but “Upload in progress” message. Do you want to change this message?
      4. If you set label position of the text field to be ‘inside’, then label will become a placeholder of the text field.

      Regards

      Nickolas

  • I have 2 questions:

    1) I would like to change the width of the title field in my form. When I put widths=”title:110px” into my shortcode (see shortcode below) it doesn’t change anything. I don’t know whether this has something to do with the fact that title, filename, and selectbutton are all on the same line. Basically, what I want to do is to make all of the form fields line up. Right now, all of the userdata form fields line up at 110px, but the filename field does not have the correct spacing. Can you help me with a solution?

    2) All of the userdata field labels show up as bold, but the title (upload files) is not bold. Is there a way to either make all of the userdata field labels plain text or to make the title bold also? I’d like everything in my form to look uniform.

    Thank you.

    Michelle

    [wordpress_file_upload fitmode=”responsive” maxsize=900 uploaduser=’all’ placements=userdata/title+filename+selectbutton/userdata/uploadbutton/captcha/filelist/progressbar/message notify=”true” notifyrecipients=”%useremail%” notifymessage=”Dear %username%,%n%%n% This is an automatic delivery message to notify you that a new file has been uploaded.%n%%n%Best Regards,%n%%n%”
    requiredlabel=”*”
    userdata=”true” userdatalabel=”First Name|r:1/Last name|r:1/Email|t:email|r:1″
    userdatalabel2=”Comments |t:multitext|s:left|r:0|p:none”
    widths=”title:110px, filename:331px, userdata:110px, userdata_label:110px, userdata_value:300px”
    heights=”userdata:30px, userdata_label:40px”]

  • We’ve set the plugin to upload files to our one drive account. Is it possible to have this user data sent along with the uploaded files to one drive? Or is it exclusively assigned to wordpress?

    1. Hi, there is an option in the shortcode, Include Userdata, that will put user data in the description of the OneDrive file.

      Regards

      Nickolas

  • Hi! I need to include several checkboxes with a unique label “Colors” and with options like “cyan” “Magenta” and so one, is that possible? Or I will need to create one checkbox per color?

  • I have to set the upload directory based on some parameters. The first folder must be today’s date, and then the subsequent folders must be those chosen by some custom fields. Example of today’s date / red color / username. I create all the custom fields and can use them from the administration interface. I create the folder with the date with an external snippets. How do I merge both data and have them available to have a custom folder structure?
    Then is it possible to have the same fields to also compose a personalized email? Thank you

    1. Hi, you can create custom folders based on the values entered by the users in the fields by using variables. For instance, if you set uploadpath to be /uploads/%userdata1% then %userdata1% variable will be replaced by the value of the first field. If you want to use the value of the second field, it is %userdata2% and so on. You can have more than one variables in the defined upload path.

      You can also use the same variables inside the email body.

      Regards

      Nickolas

      1. Ok. But I want the current date automatically entered as a subdirectory. For example, first_directory / 19-04-2019 / where 19 is the day, 4 is the month and 2019 is the year. But I don’t want to take it from a data picker. I would like the directory to be created automatically when sending a file, so as to divide all uploads for days

          1. Hi, I’m in the exact same situation than Cristoforo and I can’t find the answer anywhere, would you mind sending me what you sended him for this problem ? Thanks a lot

  • Hi there,
    is it possible to list the uploaded files to a post on a page (using a shortcode, for example) including the user fields?
    I tried to get the files using get_attached_media, but that’s obviously not the right way to do it.
    All I need to do is assembling the DOM using informations like filename, date, link and one or two custom text fields.
    Does the pro version include such an option?
    Thank you in advance for your answer!
    Joo

    1. Hi Joo, the Pro version provides a file viewer that can be added in any page or post using a shortcode. It is highly configurable. You can show various information is separate columns: user, date, link, user fields, etc. Here is an article about this file viewer.

      Regards

      Nickolas

  • First – *AMAZING* plugin. I happily bought the upgraded version. Thank you!

    Second – I cannot find a reference on how to wrap long label text.

    I have long label text, and the position is set to “top” – but the label text goes off the screen, and does not wrap. I’ve tried \n\n – I’ve tried %n% – I’ve tried – nothing wraps the label text to the next line.

    Thanks

  • Hello,
    Is there a way to change the filename based on user input? For instance, I have a name field, and would like the filename to be changed to “name.ext” with ext being the original extension of the file and name be based on the user input.

  • The output of these additional fields in the admin panel is not implemented. I have to spend a lot of time getting the data of an additional field. How can I output the data of the desired field in the List of Uploaded Files?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.