Form Fields



... General Settings
Form fields
 are used to actually create the form. You can add, remove, enable, disable and customize these form fields. You can also reorder them with drag&drop in the Layout Mode. To remove form fields, you have to select one or more fields, then click the Remove button at the right and then click on the Save button. You can expand the fields just by clicking on the label, this will open the settings panel where you can customize the UI.

The main configuration options are the Title and Type fields. Basically, the Title is the label of the the form. The Type field is a drop down list which specifies the input type required from the user, for example Text, Email, Check box, etc. 

You can customize the form fields with the General, UI Settings and Validations options. The General options allow you to select the type of the field, name, assign values to the title, etc. The UI Settings option allows you to apply CSS styles and the Validation option allow you to set the filed as required and to put specific validations on it. See the screenshot below (this is an example of Text Box type of field). For additional information about fields, please check each field page.



Most settings in the screenshot above are found in all field types. Y
ou will find described the specific settings, on each field page.

... Form field Type

Action Form supports various field types, from simple text boxes to complex controls such as date pickers. The type determines how users interact with the form to submit data. Field types are specified in the Type drop down box of the Fields section and also in the drop down list on the Add Field button. There are several field type categories like: Address, Buttons, Date & Time, DNN, Files, Hidden Data, Image, Multiple choice, Security, Statistics, Text, 
User
A description of each category is specified in the list below.
Address
Buttons
Date & Time
DNN (DotNetNuke)
Files
Hidden Data
Multiple choice
Security
 Image
Statistics
Text
User

... Field Title

The Title field is for specifying the name for the field - it's displayed on front end as a label for the field. Example: First Name, Email, Message, etc. 

... Field ID
Action Form gives you the ability to automate the field ID using the Auto check box. It is responsible for storing the Title name. You can assign a new ID for the Title or keep the assigned ID in the field. The assigned ID is auto-generated based on the text entered for the Title. This option supports My Tokens.

... Field Short Description

This option allows you to enter a short description for the Title field. It is a tooltip or placeholder that will help users to fill in the form. For example, for a Name field, a short description could be: "Please enter your Name." This option supports My Tokens.

... Other Options

This section just gives you the ability to enable/disable the Field and the Auto Complete. 

... Initial Value

This option allows you to insert Tokens. The token inserted here, is applied to the Title field. For example, [User:LastName] token is entered on the Field Initial Value to populate the user's last name in the text field on the Action Form. This option also supports My Tokens.

... Autocomplete URL 

this option can feed auto-completed suggestions for this text box, here you can use {query} where you want the typed text to go.

... Mask

Optionally you can set a mask on a field, for example, if you want a certain type of Phone field, you can put a mask like (000) 000-0000 or a certain date type like 00/00/00, or a time field 00:00:00percentage 0,00%, amount 000.000,00$The following mask definitions are predefined: a - represents an alpha character (A-Z,a-z); 0 - represents a numeric character (0-9); * - represents an alphanumeric character (A-Z,a-z,0-9).

... UI Settings

The UI Settings allow you to insert and apply CSS Styles and Classes to individual or multiple text fields. Action Form gives you the ability to customize the form exactly the way you want so it perfectly suites you website design. Action Form allows you to use the Label CSS Classes and Control CSS Classes properties to apply CSS styles to the forms. CSS classes are predefined classes created by DNN and should reference the relevant css file. 
  • Label CSS Classes - allows you to apply multiple CSS classes to labels on the form.

  • Control CSS Classes - allows you to apply multiple CSS classes to controls. 

  • Label CSS Styles property allows you to input and apply CSS Styles to labels.
Click here to see a sample of how to style your form.

... Resizing Form Field Fonts


You can try something like setting the height, line-height, font-size and/or padding styles on each input elements. You could also set it in page settings under meta tag to affect all input and select elements.

... Validation

The Validations properties includes the Required check box option, two Custom Validation boxes and the Group Validation drop down menu. They allow you to set validations on the fields. 

... Required check box option
  • It allows you to set a field as required in order for the user to be informed that it's a mandatory field and the form will not be submitted without info filled in that specific field. If the user does not complete the field, the form returns the standard "required" error message.

... Custom Validators #1 & #2
  • Custom Validation #1 and #2 specifies formats for validating text fields on the action form. You can set up to two validations. If you want additional validators you can add them to the \DesktopModules\DnnSharp\ActionForm\Config\Validators folder. Create XML files simillar to Defaults.xml to have your own input validations available in Action Form.Don't edit Defaults.xml as this file will get overwritten on upgrades!(Exemple of Minimum Lenght 30 - Here)



  • Date US format allows you to set the field to accept inserting the date in the US format mm/dd/yyyy.
  • Email Address format allows you to set the field to accept only email addresses.
  • Floating Point Number format allows you to set the field to accept only decimal numbers.
  • Integer Number format allows you to set the field to accept only integers.
  • No Whitespace format allows you to set the field to not accept white spaces.
  • Phone format allows you to set the field to accept phone numbers, using the (###) ###-#### format.
  • Strip HTML format allows you to set the field to accept HTML. This will strip the HTML tags and submit only the text.
  • User exists validator allows you to display a message to inform the user who is trying to register that the email address used is already in the database.
  • Username is Available validator allows you to display a message when the username is available. 
  • Web Address format allows you to set the field to accept only web addresses.

  • ... Group Validation
    • From the drop down list you can chose one of the group validations. Click here to see a tutorial about group validation on Action Form.