Page tree
Skip to end of metadata
Go to start of metadata

On this page, you can work with questions and other elements, add pages, set up logic and alerts, create a unique layout using various tools, and launch the form.

Once you have chosen a form creation method, named the form, and clicked Save, you will see the Form Builder. This functionality has intuitive drag-and-drop interface and a robust set of tools.

The left pane (1) contains a list of all questions and objects in the form. These objects are grouped by their type: Questions, Buttons, Shapes, etc. To expand a grouped list click the plus sign next to it.

The grid (2) on the right side is used to edit the form layout. This is where all the form elements will be located.

The ribbon toolbar (3) contains functionality for designing the form.

The current page contains the following topics:

Ribbon Toolbar

 Click here for more details:


The ribbon toolbar contains form design functionality, the functionality is grouped into three tabs: Home, Edit, and Tools. Please click on the links below for more information.

The current page contains the following topics:

Home Tab

 Click here for more details:

The Home tab contains the primary features for editing the Custom form, such as:


  • Adding new questions (1)
  • Renaming the form (2)
  • Styles page with form design options (3)
  • Adding logo and images (4)
  • Defining form settings (5)
  • Adding special messages to the form (6) – Welcome Back, Header and Footer, Thank you page and Internal notes.
  • Applying plugins (7)

The following plugins do not work with forms:
– Section Randomization
– Question Randomization
– Select All Checkbox
– Fixed Header for Rate and Matrix Questions.

  • Advanced interactivity and functionality can be added with the help of Javascript. Such scripts should be inserted into the Scripts section (8)
  • Previewing and testing the form (9)
  • Printing the form (10) launching (11)

 

All these features work with custom forms in the exact way they work with surveys. But there are also features unique to the Custom Form Builder:

  • The Save (1) button saves changes applied to your form at any time it is clicked.

  • The Undo (2) button allows you to revert the last changes applied to the form one at a time; the Redo (3) button applies the undone changes back. 

  • The Text (4) button creates an empty text field on the grid so you could insert additional sub-header, notes or instructions if needed. Such text objects appear under the Other text section on the left pane.

  • The Shape button (5) is used to add three types of shapes: Rectangle, Vertical Line, and Horizontal Line. 

     More about shapes:
    Sometimes it is necessary to add additional lines or frames to your form layout. When a shape on the form is selected, the ribbon toolbar automatically switches to the Edit tab, showing controls for editing the shape.

    Three elements are available here: Rectangles, Vertical and Horizontal lines. To insert the element click on Shape and select a type. Once you choose an object it appears on the grid. Right after creation it has default size and color, but a special set of controls allows you to re-size and format your element easily:


    Line Size (1) sets the thickness of the line the shape is drawn with, and the color selector (2) next to it sets the line color. When working with a rectangle, you can activate the Filled check box (3) and use the second color selector (4) to choose the fill color.

     Shapes do not appear in form reports.

    Choosing one immediately adds it to the grid. You can then move it by dragging, and re-size it by using the handles at its edges.

  • Use Page Format (6) to change properties of the form pages.

     More about page format:

    Page formatting allows you to set additional page settings. Upon clicking on the Page Format button, a Page settings pop-up box will appear.

    These settings apply to all pages of the form.

    Measurement units is used to set the grid rulers to centimeters (1) or inches (2).

    • Orientation can be either Portrait (paper set vertically) or Landscape (paper set horizontally).

    • Paper size options are useful for printed forms. Select the format you are going to print the form in and green grid guides will adjust automatically. Note that the elements placed outside the green guide lines will still be visible on the form.

    • The Web size option activates a blue guide line on the grid. This line assists in designing a form of a certain width.

    • The Printed pages on screen option changes the grid size to include the number of pages selected.

    These settings are not related to the number of pages of the online form
    • The Max screen height value sets the height of the blue guide line at the far right of the grid. This is a helpful guide for staying within size constraints imposed by other factors, such as other content on a web page where the form will be displayed
  • Use New Page (7) to add another page to the form. When you have more than one page, navigation controls appear just above the grid. Use Page Order (8) to rearrange the form pages, and Delete Page (9) to remove the current page.

    Page 1 of a password protected form should have only the password question on it. All other questions should be on page 2 or later.


Edit Tab

 Click here for more details:

Edit tab gets activated when you click on any form element in the structure tree or on a working field.The functionality in this tab provides for editing form components.

If you click on a particular question in the left pane, the Edit tab of the ribbon toolbar will have the following look:

  • The Save button (1) serves for saving changes made to the form.
  • The Undo button allows you to revert the last changes applied to the form one at a time, while the Redo button applies the undone changes back (2). 

  • Edit Question (3) opens up a page for editing the particular question type you have selected. To read more about creating and editing questions of different types, please consult our Question Types section.
  • The Logic (4) button is used to configure logic for your form. Unlike logic in a survey, form logic works on a per-page basis. It cannot be pointed to a specific follow up question and is instead pointed to a later page. Therefore, you should locate your questions on separate pages if you wish to set up logic for your form. For further guidelines on setting up logic, please refer to Logic section. 
  • The Images(5) button serves for adding images to your form questions and answer choices. For more information, please refer to the Add Image section. 
  • Use Delete (6) to delete a question, and Hide (7) to hide it from respondent’s view. This is commonly used if you autofill respondents' data into a hidden question for reporting purposes.
  • The Validation button (8) can be used to configure whether a question is obligatory to answer. More about validation can be found in the Question Setup section. 

  • The controls of the Layer section (9) are used for adjusting the overlapping of grid elements (placing one element on top of another). The four buttons from left to right are: 

    • Bring To Front - brings the form element to very top of the stack.
    • Send To Back - sends the form element to the bottom of the stack.
    • Send Backward - moves the form element down one level in the stacking order.
    • Bring Forward - moves the form element up one level in the stacking order.
    You can also change the value in the Layer box to move an element a desired number of layers forward or backward in a single action. Another way to access this functionality is to right-click on a form element located in the grid.
  • Every element on the grid has its own coordinates, size and position. While the size of an element can be changed by dragging its handles, you can be more exact by using the W and H boxes (10) to change the width and height, respectively. Similarly, you can use the X and Y boxes to change the position of an element on the grid, allowing for pixel-perfect placement. Use X to specify distance, in pixels, between an element and the left edge of the working area that contains it, and Y - between an element and the top edge of the working area. The XYHW properties are automatically updated when you move or size an element

  • The Lock button will freeze the selected element in place so it cannot be accidentally moved or re-sized. The color of its handles will change to red to indicate this. This can be done with multiple elements at once by selecting all of them before locking. The Attribute Default button can be used to set the selected element to its default size and shape, depending on its type and contents.

  • The last section (11) features the Preview button for previewing the form, the Print button for printing it out, and the Launch button for launching the form.

  • If you click on a form header or footer in the left pane, the Edit tab will also contain a section with functionality similar to the one of the WYSIWYG editor.

Tools Tab

 Click here for more details:


The third tab on the ribbon toolbar has advanced design features. Using them can save you time and help you with precise form building.

Grid

The grid size (1) and brightness (2) can be adjusted using the provided dropdowns. Size options include both inches and centimeters.


The grid can be disabled by selecting No grid in the Grid size dropdown. 

If Snap objects to grid is enabled, it will still work with Brightness set to 0% when the grid is enabled.

Guides

Guides (3) are custom grid lines that make it easier to align objects. They can be added, moved or disabled at any time.  To customize them, click the Guides button (3). Activate the check boxes for the horizontal and vertical guides you would like to see.

Change the pixel value for an active guide to adjust its position. Click the Guides default button to revert to the original guide settings. Click the Close button when finished editing the Guides settings.

On the grid, visible guides can be dragged to change their position.

Guides are only visible in the Form Builder. They are not shown in Preview mode or in the live form.

Snapping Objects

Snapping can be used to precisely align multiple elements on the form by dragging them.
There are three snap methods available:

    • Snap objects to grid – The selected object automatically snaps to the nearest grid lines.
    • Snap object to guides – The selected object automatically snaps to the nearest available guide lines.

 

If you would like to snap the element to a certain guide line, move it toward this line until the guide becomes a solid line.
    • Snap guides to grid – The selected guide line automatically snaps to the nearest grid line.

Snapping can be activated or deactivated at any time by checking or unchecking the appropriate options. Note that when both Snap objects to grid and Snap objects to guides are activated, the selected object will snap to the nearest line of either type when dragging it.

Move and Resize

Another way to adjust the position and size of an object is through using the Move and resize button.

    • Move arrows (1) – These move the selected object in the indicated direction, one pixel at a time
    • Resize arrows (2) – These resize the selected object by moving the edge corresponding to the arrow position, one pixel at a time. Note that the mode of these buttons can be toggled using the Make larger and Make smaller buttons (3)
    • The WidthHeight, and All buttons will proportionally resize an object either smaller or larger, depending on which button is selected above. Since both or all edges are moved by this, the height and/or width changes by two pixels at a time
    • The Lock position and size button will freeze the selected object in place, preventing any accidental change to its size or position. Its handles will turn red to indicate it is locked

Alignment

When you have a group of elements on the grid, you can easily align them to the left, right, bottom, top or center using the Alignment option.

 

 Click here to see the examples of each allignment option:

Example

Horizontal:

TopMiddleBottom

Vertical:

LeftCenterRight

 

 

 

 

 

 

 

 

Left Pane

 Click here for more details:


The left pane contains a list of all questions and objects in the form. These objects are grouped by their type: questions, buttons, shapes, etc. To expand a grouped list, click the plus sign next to it.

The left pane of the Form Builder has context menu functionality. Right-click on an element in the tree to see a menu with options specific to that type of element.

 

Some of the options in the menu are for features also available in the ribbon toolbar. Unique to the context menu are the following options:

  • Change question number – This allows changing the order of selected question numbers, without changing their placement on the form.

  • Move To Page – This sends the selected question to the selected page. The question number is not changed.

  • Visible on RBR only – This feature hides the question from respondents even though it is placed on the grid. It will still be shown in the report’s View By Respondent mode.

Text Objects 

 Click here for more details:


You can add instructions, notes and other information as separate Text Objects that are not connected to any question in a Form structure.

In order to create a Text Object you would need to:

  1. Click the Text button (1) on the Home tab and then type your text into the text box (2) that appears.
  2. Once the text box is created, it appears under the Other Texts section (3) in the left pane.

  3. When editing a Text element, the ribbon toolbar automatically switches to the Edit tab, which provides familiar formatting and editing controls, including Undo and Redo.This pane has the usual document editing tools along with additional options for discarding changes made step by step, applying them back and saving all the work at any time.

  4. The Text element will automatically adjust its size to accommodate the text entered, but can still be resized using the provided handles.

 

Text objects created in this way do not appear in reports.

Move and Resize Elements

 Click here for more details:


By default, all questions appear on the grid right after creation. You can place them back to the elements tree by dragging and dropping to the left pane.

Form elements can be dragged and dropped from the left pane to the grid and vice versa.

To move the form element within the form working area, follow the steps below:

  1. Click in the element frame to make it active.
  2. Drag the element frame to the desired target.
  3. Click the Save button to save your progress.

To resize the form element within form working area, follow the steps below:

  1. Click in the element frame to make it active.
  2. Point to the border of the element frame.
  3. Drag the pointer to move the split line.
  4. Click the Save button to save your progress.

  • You can use grids to help positioning form elements at precise point on a working area. The grid lines will not be printed along with the form. The Snap to Grid option aligns an element frame with the nearest grid line when you move the object. For details, see the Page Format section of the Ribbon Toolbar Home Tab.
  • You can enter the precise measurements for the element width and height as you resize it by using Attribute panel.