Home > Nintex Forms 2013 Help and How-to > Using the Form Designer
Getting started with the form designer

​​​

Getting started with the Nintex Forms designer 

The Nintex Forms designer lets you create customized forms within your SharePoint environment quickly and easily. Forms can be consumed on most common mobile devices such as Smart Phones, Windows Phones, iPhones, Androids and iPads. Nintex offers two Forms designers:

  • The Responsive Forms Designer allows you to create forms that automatically adapt to the device they are displayed on.
  • The Classic Forms Designer allows you to create pixel-perfect forms using layouts to control how the form appears on each device.

Once a form has been designed, the Forms designer automatically generates the form on other devices. You can also publish the form to the cloud with one click. For more information, see Saving and publishing forms.

Note: Your administrator may have configured your experience to use a single designer only.

Access the Nintex Forms designer

You can access the forms designer from a SharePoint list or library to design forms for list items, documents, or document sets. You can also access the forms designer from Nintex workflows.
 
The first time you access the forms designer from a list or library, the default form is shown.
 
Note: Your administrator may have configured your forms experience to use a single designer only.

To access the forms designer from a list

  1. Click the List tab.
  2. On the List tab ribbon, in the Customize List section, click Nintex Forms.
    Note:  If the list contains multiple content types, click the down arrow for Nintex Forms and then select the option for the form you want.
    You are prompted to select the responsive or classic forms designer.
  3. Select the forms designer you want.
    The forms designer appears with the form displayed. The form type is indicated below the forms designer ribbon. Example: "List Form."

To access the forms designer from a document library

  1. Click the Library tab.
  2. On the Library tab ribbon, in the Customize Library section, click the down arrow for Nintex Forms and then select the option for the form you want.
    • Customize the Document form: Design the document form for this library.
    • Customize the Document Set form: Design the document set form for this library. Note: Document Sets must be enabled on the library for this option to appear.
      For more information, see the Microsoft article "Document set planning" at https://technet.microsoft.com/en-us/library/mt493298(v=office.16).aspx.
      You are prompted to select the responsive or classic forms designer.
  3. Select the forms designer you want.
    The forms designer appears with the form displayed. The form type is indicated below the forms designer ribbon. Example: "Document Form."

To close the forms designer

  1. Click the Nintex Forms tab.
  2. On the Nintex Forms tab ribbon, in the Form section, click Close.

The Form Designer screen

The designer screen contains four main areas. The Ribbon at the top, the Form Controls toolbox on the left, the Controls In Use and Rules panes on the right (hidden by default) and the form design canvas in the center.

The Form Controls toolbox

The controls toolbox displays the controls which can be added to forms in the design canvas. The controls are divided into categories of related control types and preconfigured controls.
Click the heading of a category to view the controls in that group. The default categories are:
  • General: Unconfigured controls.
  • SharePoint: Unconfigured controls specific to SharePoint.
  • Content Type Columns*: Preconfigured controls for each column in the underlying content type.
  • List Columns: Preconfigured controls for each column in the underlying SharePoint List.
  • Task Columns*: Preconfigured controls for each column in the underlying SharePoint Workflow Tasks List.
  • Workflow Variables*: Preconfigured controls for each Nintex Workflow variable in the underlying workflow.
* shown only if designing a form for Nintex Workflow.
The preconfigured controls are automatically generated for content type columns, list columns, task columns and workflow variables that are related to the form. The Connected to property is automatically set to the corresponding related column or variable. 

Resizing and hiding/unhiding the toolbox

  • To resize the pane: Click and drag on the expander bar on the inside edge of the toolbox.
  • To hide the toolbox: Click the drawing pin icon located on the top right corner of the toolbox header. The toolbox will collapse, leaving a visible tab.
  • To access the toolbox: Hover over the tab. The toolbox will be visible while the mouse remains over it and will be hidden when the mouse is moved away.
  • To make the toolbox remain visible: Click the drawing pin icon to pin the panel open.

The design canvas

The design canvas is used to creat the forms by dragging and dropping controls:

  • The Responsive Forms Designer canvas allows you to create themed forms based on four-column grids that automatically adapt to the device size.
  • The Classic Forms Designer canvas allows you to create pixel-perfect forms for multiple layouts, with control-specific formatting.

Adding controls to the design canvas

To begin designing a form, add controls to the canvas and configure each control: Drag a control from the toolbox and drop it into position onto the design canvas.
 
In the Classic Forms Designer, you can also right-click on the design canvas, select Insert Control and select the required control from the list. 

Note:

  • The Insert Control option is only available if the mouse is over an area which is free of other controls.
  • Use the arrow keys to reposition a control once it is on the design canvas.

Selecting Controls

Select any control on the canvas by left-clicking with the mouse on it.

To select multiple controls:

  • Hold down the CTRL button and left-click with the mouse to select additional controls
  • Click and drag to highlight all controls within the area

Configuring controls

Please refer to Control Settings for more information on configuring a control.

Controls In Use pane

The Controls In Use pane provides a view of all of the controls which have been added to all of the layouts configured for the form. This is particularly helpful when forms contain numerous controls and layouts, and when replicating control(s) from one layout to another.
Please refer to Controls In Use for more information on the Controls In Use pane.

Note: The Controls in Use pane is available in the Classic Forms Designer only.

Properties pane

The Rules pane can be used to control:

  • The control settings and theme in the Responsive Forms Designer.
  • The control settings and layout in the Classic Forms Designer.

Rules pane

The Rules pane can be used to add dynamic formatting, visibility or editability changes to controls within any form based on defined conditions.
Please refer to Rules for more information on the Rules pane.

The Ribbons

At the top of the designer screen is the Nintex Forms Ribbon. The Design Ribbon appears slightly differently in the Responsive and Classic Forms Designers. The options and related Help topics for each are all listed below.

Responsive Forms Designer Design Ribbon

  • Save: Please refer to Saving and publishing.
  • Publish: Please refer to Saving and publishing forms.
  • Preview: Clicking Preview will display how the form will be rendered in the various configured device layouts. Please refer to Previewing a Form.
  • Close: Clicking Close will close the form designer and return to the original location. If the current form has not been saved, a prompt will appear to save before closing. If the form is not saved, the unsaved work will be lost.
  • Reset: Clicking Reset will reset the current form to the original, auto-generated state.
  • Delete Form: Clicking Delete will delete the current form. This will also restore the default form that was in use before a Nintex form was created.
  • Clear All: Clicking Clear All will remove all of the controls on the Default layout and delete all additional layouts.
  • Create Column: The Create Column button allows a column to be added to the current list.
  • Form Settings: Please refer to Form and Layout settings.
  • Import: Please refer to Importing and exporting forms.
  • Export: Please refer to Importing and exporting forms.
  • Properties: Displays the Properties pane.
  • Rules: Displays the Rules pane.
  • Classic Forms Designer Design Ribbon

    • Save: Please refer to Saving and publishing forms.
    • Publish: Please refer to Saving and publishing forms.
    • Preview: Clicking Preview will display how the form will be rendered in the various configured device layouts. Please refer to Previewing a Form.
    • Close: Clicking Close will close the form designer and return to the original location. If the current form has not been saved, a prompt will appear to save before closing. If the form is not saved, the unsaved work will be lost.
    • Reset: Clicking Reset will reset the current form to the original, auto-generated state.
    • Delete Form: Clicking Delete will delete the current form. This will also restore the default form that was in use before a Nintex form was created.
    • Clear All: Clicking Clear All will remove all of the controls on the Default layout and delete all additional layouts.
    • Versions: Available for list forms, displays a list of all saved and published forms. From this list a form can berolled back to a specific earlier saved or published version.
    • Import: Please refer to Importing and exporting forms.
    • Export: Please refer to Importing and exporting forms.
    • Clipboard options: Provides the option to Cut / Copy and Paste controls onto the current layout or to a different layout. Shortcut keys are available for the clipboard options.
    • Create Column: The Create Column button allows a column to be added to the current list.
    • Settings: Please refer to Form and Layout settings.
    • Form Variables: Please refer to Form Variables.
    • Live Settings: Please refer to Live Settings. (shown only if Nintex Live Forms has been enabled).
    • Device Layouts: Click on a device to create a form layout targeted to that device, or to switch between existing device layouts. The Layout device buttons appear greyed out with a "+" sign when the layout has not yet been created and active when the layout has been created. Only some device layouts will appear on the Ribbon; access to all remaining device layouts are accessible through the Other Devices button. For adding device layouts and selecting which layouts appear on the Ribbon, please refer to Manage device layouts.
    • Replace With Layout: Clicking Replace With Layout allows a selected layout to replace the current layout. This will discard all controls on the current layout and add all controls from the selected layout.
    • Delete Layout: Clicking Delete Layout will delete the current layout and return to the default layout.
    • Workflow Settings: Allows changes to be made to workflows that are associated with this list. Alternatively, use to add a workflow to the list.
    • Controls in Use: Displays the Controls In Use pane.
    • Rules: Displays the Rules pane.
    • Workflow Variables: Create workflow variables and start data (only if designing a form in Nintex Workflow). Please refer to the Nintex Workflow Help file.

    Ribbon Extras 

    • Undo icon: Undo the last action. A stack of up to 50 undo actions is available.

          Note: Changes to Rules cannot be undone; with the exception of deleting a rule.

    • Redo icon: Reverses the most recent Undo action.

    Creating a form

    To create a new form for a List:

    1. Select the List tab on the List Tools Ribbon.

    2. In the Customize List group, click the Nintex Forms button to edit the default list form. If the list contains multiple content types, click the drop- down and select Customize the [Content Type] Form from the menu options.

    To create a new form in Nintex Workflow (requires Nintex Workflow to be installed and configured), refer to Designing forms in Nintex Workflow for more information.

    The Nintex Forms designer will open in the current window.

    To create a new form for a Content Type:

    1. Navigate to the content type's information page (e.g. Site Actions > Site Settings > Site Content Types).

    2. In the Settings section, click on Edit form with Nintex Forms.

    The Nintex Forms designer will open in the current window.

    Note: All lists using the content type will inherit the designed Nintex form.

    Related Topics

    Controls In Use
    Control Settings
    Print to PDF
    Form and Layout settings
    Saving and publishing forms
    Importing and exporting forms
    Live Forms settings
    Manage device layouts
    Designing forms in Nintex Workflow
    Rules
    Form Variables

    forms|Saving and publishing forms]].
Getting started with the form designer